Leaflet implements element click query pop-up window display attributes

Leaflet is a very lightweight webgis framework, and its code structure is also relatively simple.

If there is a need in the project, you need to click to query the relevant attributes for each administrative region and display them, just like the picture below:

 We can do this. First of all, we must understand the structure of the leaflet framework. When leaflet loads a layer, it adds event monitoring to the layer, which means that any user operation on the layer can be captured. We can write like this when adding geojson:

 const layer = L.geoJson(layer, {
      onEachFeature: (f, l) => {
        //f表示每一个要素，l表示整个图层
        l.on({
          //监听图层的点击事件
          click: (e) => {
            //e.target.feature表示当前鼠标点击后获取到的要素
            console.log(e.target);
         
        });
      },
    });

That is, when we add the geojson layer, there is a configuration parameter called onEachFeature. The value of this parameter is a callback function that takes two parameters, one for each feature and the entire layer.

We can use the layer object's listening event click to process the elements.

The value of this click parameter is also a callback function. The parameters of this callback function are all the feature information picked up by the mouse click. e includes multiple information such as longitude and latitude, layers, features, etc. e.target represents the information of the layer itself. . e.target.feature is the current