Многоугольники с выделенными элементами в Leaflet

Question

У меня есть слой в Leaflet с полигонами, где также есть перекрывающиеся полигоны. Я хочу иметь возможность видеть, на каком полигоне щелкают, используя функцию выделения. Но у меня есть проблемы, чтобы заставить это работать должным образом.

Если у меня есть набор данных с одним набором объектов полигонов в одной группе слоев, проблем не возникает, но я хочу использовать его с несколькими полигонами с различными объектами и разделить их на группы слоев, которые я не могу решить. Как это можно сделать с помощью приведенного ниже кода? Это пример многих характерных полигонов. Каждый многоугольник представляет область расстояния от точки на карте со значениями, такими как 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)
    })