最近在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 中所有要素的顯示隱藏控制。

看使用外掛後的程式碼是不是很清爽。

總結

1. 控制layerGroup顯示隱藏的方式有兩種：新增、移除的方式；和遍歷內部要素，控制每個要素透明度的方式。
2. 控制透明度方式效率更高，體驗更好，但leaflet中沒有現成方法，需要自己寫程式碼實現。
3. 實現時需要注意，maker要素 和 vector要素樣式控制方式不同。
4. 把控制透明度方式封裝成外掛，通過showLayer()、hideLayer()方法直接使用。

線上示例

線上示例

ShowHideLayerGroup.js 外掛

原文地址：http://gisarmory.xyz/blog/index.html?blog=LeafletShowHideLayerGroup。

關注《GIS兵器庫》公眾號， 第一時間獲得更多高質量GIS文章。

本文章採用 知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議 進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名《GIS兵器庫》（包含連結： http://gisarmory.xyz/blog/），不得用於商業目的，基於本文修改後的作品務必以相同的許可釋出。