最近在leaflet開(kāi)發(fā)過(guò)程中，遇到地圖數(shù)據(jù)需要按時(shí)序播放的需求，處理思路是將每個(gè)時(shí)間節(jié)點(diǎn)的要素添加到layerGroup中，然后通過(guò)切換layerGroup的顯示隱藏來(lái)實(shí)現(xiàn)效果。翻看leaflet的API文檔，發(fā)現(xiàn)leaflet中沒(méi)有直接控制layerGroup顯示隱藏的方法，那如何來(lái)實(shí)現(xiàn)layerGroup的顯示和隱藏呢？

通常有如下兩種思路：

第一種，通過(guò)map.addLayer()、map.removeLayer()添加、移除圖層組的方式來(lái)實(shí)現(xiàn)，當(dāng)數(shù)據(jù)量較小，并且不需要頻繁切換圖層顯示隱藏時(shí)，使用這種方式較為方便。但是，當(dāng)數(shù)據(jù)量較大，或需要頻繁切換圖層顯示隱藏時(shí)，使用這種方式則會(huì)增加對(duì)瀏覽器的壓力，出現(xiàn)卡頓現(xiàn)象。

第二種，遍歷圖層內(nèi)部所有要素，通過(guò)控制要素透明度的方式，達(dá)到控制圖層顯示隱藏的目的。此方式可以解決在數(shù)據(jù)量較大，或需要頻繁切換圖層顯示隱藏時(shí)，出現(xiàn)卡頓的情況，效果如下：

核心代碼如下：

從上面代碼中我們可以看出，由于maker要素 和 vector要素樣式控制方式不同，需放在兩個(gè)圖層組，這樣寫起來(lái)感覺(jué)還是有些繁瑣，而且也沒(méi)有考慮圖層初始化時(shí)樣式。

通過(guò)對(duì)leaflet源碼研究，了解到leaflet可以使用 include 方式對(duì)方法進(jìn)行重寫來(lái)做到修改源碼。

include方式
通過(guò)例子了解一下：比如leaflet源碼中 Polygon.toGeoJSON() 方法不是在 Polygon.js 文件中寫的，而是用 include 方式寫在了GeoJSON.js文件中。Polygon類本來(lái)是沒(méi)有toGeoJSON()方法的，這樣就增加了這個(gè)方法。如果Polygon類中已經(jīng)有了toGeoJSON()方法，這樣寫會(huì)根據(jù)執(zhí)行的順序，后執(zhí)行的會(huì)把先加載的重寫。

接下來(lái)，就采用include方式對(duì)layerGroup添加顯示隱藏方法。在這里，我們不僅控制了layerGroup的顯示隱藏，還記錄了layerGroup中要素默認(rèn)狀態(tài)下的透明度，以保證切換到顯示時(shí)樣式一致。

代碼如下：

為方便使用，我們將上述代碼封裝成插件，只需引用這個(gè)插件，調(diào)用showLayer()、hideLayer()就能實(shí)現(xiàn)對(duì) layerGroup 中所有要素的顯示隱藏控制。

看使用插件后的代碼是不是很清爽。

總結(jié)

控制layerGroup顯示隱藏的方式有兩種：添加、移除的方式；和遍歷內(nèi)部要素，控制每個(gè)要素透明度的方式。

控制透明度方式效率更高，體驗(yàn)更好，但leaflet中沒(méi)有現(xiàn)成方法，需要自己寫代碼實(shí)現(xiàn)。

實(shí)現(xiàn)時(shí)需要注意，maker要素 和 vector要素樣式控制方式不同。

把控制透明度方式封裝成插件，通過(guò)showLayer()、hideLayer()方法直接使用。

在線示例

在線示例

ShowHideLayerGroup.js 插件

---

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。