Leaflet中具有突出显示特征的多边形

Question

我在Leaflet中有一个包含多边形的图层，其中也有重叠的多边形。我希望能够通过使用突出显示功能查看单击了哪个多边形。但是我有一些问题才能使它正常工作。

如果我的一个数据集的一个layerGroup中具有一组多边形要素，那没有问题，但是当我想将其与具有不同要素的多个多边形一起使用并将它们拆分为我无法解决的layerGroups时。如何用下面的代码完成？它是许多要素多边形的示例。每个多边形代表距地图上某个点的距离区域，其值分别为5分钟，10分钟和15分钟。许多不同点都有“多边形集”，当达到某个值（例如10和15）时，它们会相互重叠分钟。单击时，我需要突出显示每个要素，以查看该点属于哪个多边形。我确实输入了“ VectorGrid _ ???”，这是我遇到的问题。谢谢你。

polygon_sample：

    var dist_5 = new L.layerGroup();
    var dist_10 = new L.layerGroup();
    var dist_15 = new L.layerGroup();

    var highlight_distance;
    var clearHighlight_distance = function() {
      if (highlight_distance) {
        vectorGrid_???.resetFeatureStyle(highlight_distance);
      }
      highlight_distance = null;
    };

    $.getJSON("../xyz/12345/distance.geojson", function(json) {
    var vectorGrid_dist_5 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 20,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 300.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.3
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                         interactive: true,
                         getFeatureId: function(f) {
                          return f.properties.sid;
                          },
                       })

    var vectorGrid_dist_10 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 19,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 600.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.2
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                         interactive: true,
                         getFeatureId: function(f) {
                          return f.properties.sid;
                          },
                       })

    var vectorGrid_dist_15 =  L.vectorGrid.slicer(json, {
                      maxZoom: 20,
                      zIndex: 18,
                      rendererFactory: L.svg.tile,
                      vectorTileLayerStyles: {
                      sliced: function(properties, zoom){
                          var cl = properties.cost_level;
                          if (cl === 900.0){
                          return {
                          weight: 2,
                          color: '#6c0370',
                          opacity: 1,
                          fill: true,
                          fillColor: '#ff00ff',
                          stroke: true,
                          fillOpacity: 0.1
                          }
                        } else {
                          return {
                            fillOpacity: 0,
                            stroke: false,
                            fill: false,
                            opacity: 0,
                            weight: 0
                          }
                        }
                      }
                         },
                         interactive: true,
                         getFeatureId: function(f) {
                          return f.properties.sid;
                          },
                       })

        function handleClick_dist(e) {
        var properties = e.layer.properties;
        L.popup()
        .setContent(
          "<br><b>Area within</b>: " + properties.cost_level/60 + ' min'
          )
        .setLatLng(e.latlng)
        .openOn(map);

        clearHighlight_distance();
        highlight_distance = e.layer.properties.sid;
        vectorGrid_???.setFeatureStyle(highlight_distance, {   
         weight: 1,
         color: '#ffffff',
         opacity: 1,
         fillColor: '',
         fill: true,
         fillOpacity: 0
         })
        L.DomEvent.stop(e);
        }

        var clearHighlight_distance = function() {
        if (highlight_distance) {
            vectorGrid_???.resetFeatureStyle(highlight_distance);
            }
            highlight_distance = null;

            map.on('click', clearHighlight_distance);
        };

    vectorGrid_dist_5.on('click', handleClick_dist);      
    vectorGrid_dist_10.on('click', handleClick_dist);    
    vectorGrid_dist_15.on('click', handleClick_dist);

    vectorGrid_dist_5.addTo(dist_5)
    vectorGrid_dist_10.addTo(dist_10)
    vectorGrid_dist_15.addTo(dist_15)
    })