共计 1378 个字符，预计需要花费 4 分钟才能阅读完成。
最近在 leaflet 开发过程中，遇到地图数据须要按时序播放的需要，解决思路是将每个工夫节点的因素增加到 layerGroup 中，而后通过切换 layerGroup 的显示暗藏来实现成果。翻看 leaflet 的 API 文档，发现 leaflet 中没有间接管制 layerGroup 显示暗藏的办法，那如何来实现 layerGroup 的显示和暗藏呢？
通常有如下两种思路：
第一种，通过 map.addLayer()、map.removeLayer() 增加、移除图层组的形式来实现，当数据量较小，并且不须要频繁切换图层显示暗藏时，应用这种形式较为不便。然而，当数据量较大，或须要频繁切换图层显示暗藏时，应用这种形式则会减少对浏览器的压力，呈现卡顿景象。
第二种，遍历图层外部所有因素，通过管制因素透明度的形式，达到管制图层显示暗藏的目标。此形式能够解决在数据量较大，或须要频繁切换图层显示暗藏时，呈现卡顿的状况，成果如下：
外围代码如下：
从下面代码中咱们能够看出，因为 maker 因素 和 vector 因素款式管制形式不同，需放在两个图层组，这样写起来感觉还是有些繁琐，而且也没有思考图层初始化时款式。
通过对 leaflet 源码钻研，理解到 leaflet 能够应用 include 形式对办法进行重写来做到批改源码。
include 形式
通过例子理解一下：比方 leaflet 源码中 Polygon.toGeoJSON() 办法不是在 Polygon.js 文件中写的，而是用 include 形式写在了 GeoJSON.js 文件中。Polygon 类原本是没有 toGeoJSON()办法的，这样就减少了这个办法。如果 Polygon 类中曾经有了 toGeoJSON()办法，这样写会依据执行的程序，后执行的会把先加载的重写。
接下来，就采纳 include 形式对 layerGroup 增加显示暗藏办法。在这里，咱们不仅管制了 layerGroup 的显示暗藏，还记录了 layerGroup 中因素默认状态下的透明度，以保障切换到显示时款式统一。
代码如下：
为方便使用，咱们将上述代码封装成插件，只需援用这个插件，调用 showLayer()、hideLayer() 就能实现对 layerGroup 中所有因素的显示暗藏管制。
看应用插件后的代码是不是很清新。
总结
- 管制 layerGroup 显示暗藏的形式有两种：增加、移除的形式；和遍历外部因素，管制每个因素透明度的形式。
- 管制透明度形式效率更高，体验更好，但 leaflet 中没有现成办法，须要本人写代码实现。
- 实现时须要留神，
maker因素 和vector因素款式管制形式不同。 - 把管制透明度形式封装成插件，通过
showLayer()、hideLayer()办法间接应用。
在线示例
在线示例
ShowHideLayerGroup.js 插件
原文地址：http://gisarmory.xyz/blog/index.html?blog=LeafletShowHideLayerGroup。
关注《GIS 兵器库》公众号，第一工夫取得更多高质量 GIS 文章。
本文章采纳 常识共享署名 - 非商业性应用 - 雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS 兵器库》（蕴含链接：http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。