最近在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/），不得用于商業目的，基于本文修改后的作品務必以相同的許可發布，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/186040.html
標籤：其他
上一篇：pdf轉圖片并下載
下一篇：js的物件