最近在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 插件

---

總結

以上是生活随笔為你收集整理的flutter控制显示隐藏_leaflet中如何通过透明度控制layerGroup的显示隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。