最近在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()方法直接使用。
在線示例
原文地址：http://gisarmory.xyz/blog/index.html?blog=LeafletShowHideLayerGroup。
關注《GIS兵器庫》公眾號， 第一時間獲得更多高質量GIS文章。
本文章采用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名《GIS兵器庫》（包含鏈接： http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改后的作品務必以相同的許可發布。