How to control the display and hiding of layergroup through transparency in leaflet

Recently leaflet Development process , The map data needs to be played according to the sequence , The idea is to add the elements of each time node to layerGroup in , And then by switching layerGroup Display and hide to achieve the effect . Look over leaflet Of API file , Find out leaflet There is no direct control in layerGroup Show hidden methods , How to realize it layerGroup Show and hide ？

There are usually two ways of thinking ：

The first one is , adopt map.addLayer()、map.removeLayer() add to 、 Remove the layer group , When the amount of data is small , And you don't need to switch layers frequently to show or hide , It is more convenient to use this method . however , When the amount of data is large , Or when you need to switch layer display and hiding frequently , Using this method will increase the pressure on the browser , There's a jam .

The second kind , Traverse all the elements inside the layer , By controlling the transparency of features , Achieve the purpose of controlling layer display and hiding . This method can solve the problem of large amount of data , Or when you need to switch layer display and hiding frequently , There's a Caton situation , The effect is as follows ：

The core code is as follows ：

We can see from the above code that , because maker elements and vector Feature styles are controlled differently , It needs to be placed in two layer groups , It still feels a little cumbersome to write like this , And the style of layer initialization is not considered .

Through to leaflet Source code research , come to know leaflet have access to include Method to rewrite the method to modify the source code .

include The way

Let's learn about ： such as leaflet Source code Polygon.toGeoJSON() The method is not in Polygon.js It's written in the document , It's about using include The way is written in GeoJSON.js In file .Polygon Class doesn't have toGeoJSON() Methodical , This adds to the method . If Polygon Class already has toGeoJSON() Method , This will be written according to the order of execution , The later one will rewrite the first one .

Next , Just use include Way to layerGroup Add a show and hide method . ad locum , We not only control layerGroup Show hidden , It also recorded layerGroup Transparency of elements in the default state , To ensure consistent style when switching to display .

The code is as follows ：

For ease of use , We encapsulate the above code into a plug-in , Just reference this plug-in , call showLayer()、hideLayer() That's right layerGroup Display and hide control of all features in .

See if the code after using the plug-in is very refreshing .

summary

1. control layerGroup There are two ways to show and hide ： add to 、 How to remove ; And traverse the internal elements , How to control the transparency of each element .
2. Controlling transparency is more efficient , Experience better , but leaflet There is no ready-made method in , You need to write your own code .
3. Attention should be paid to ,maker elements and vector Feature styles are controlled differently .
4. Encapsulate the control transparency mode into plug-ins , adopt showLayer()、hideLayer() Method directly use .

Online example

Online example

ShowHideLayerGroup.js plug-in unit

---

Original address ：http://gisarmory.xyz/blog/index.html?blog=LeafletShowHideLayerGroup.

Focus on 《GIS Zeughaus 》 official account , The first time to get more high quality GIS article .

This article adopts Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement Licensing . Welcome to reprint 、 Use 、 Re release , But be sure to keep the signature of the article 《GIS Zeughaus 》（ Include links ： http://gisarmory.xyz/blog/）, Not for commercial purposes , Based on this revised work must be released with the same license .