Javascript 如何在传单中同时添加新标记和删除与多边形单击关联的旧标记

我有一个带有Geojson多边形的地图，其中每个多边形都由一个唯一的ID标识。我有一个单独的点标记Geojson，其中每个点都与一个具有相同多边形ID的多边形关联，并且每个点都有一个唯一的标识符

初始贴图仅显示多边形。每次单击多边形都将显示与单击的多边形关联的点。单击新多边形时，我希望打印与新多边形关联的点，同时删除以前打印的点。因此，每次用户单击多边形时，只会显示该多边形内的点

以下是一些可重复性最低的代码：

在本例中，基于代码块末尾的条件语句，每隔单击一次，就会删除整个点图层组。但每次新的单击都会继续将标记附加到图层组，因此每隔一次单击都会显示所有选定的标记

---

我倾向于让每个标记“组”由它们所在的多边形命名，因此当显示的标记与当前单击的多边形ID不匹配时，它们将从地图和图层组中删除。我曾在R中广泛使用过传单，但我不确定如何在JS中实现这一点（或者不同语言中的逻辑是否相同）。我无法手动定义每个层，因为我将遍历许多动态加载的多边形和点。

用所需点填充层的一种简单方法是：

• 将您的

  图层组

  设为永久图层
• 当用户使用

  layerGroup.clearLayers（）单击多边形时

• 用有效标记（由确定）填充

  layerGroup

  ，并让传单在不干扰

  pointToLayer

  的情况下处理标记

基本上，简化事情：）

例如：

layer.on("click", function(e){
    var bbox = e.target.getBounds();
    var sw = bbox.getSouthWest();
    var ne = bbox.getNorthEast();
    map.fitBounds([sw, ne]);

    // the clicked polygon identifier 
    var clickedPoly = e.target.feature.properties.polygon;

    layerGroup.clearLayers();
    layerGroup.addLayer(L.geoJson(pts, {
        pointToLayer: function(feature, latlng){
            return L.circleMarker(latlng, { 
                color: "red"
            });
        },
        filter: function (feature) {
            return feature.properties.id === clickedPoly;
        }
    }));
});

---

还有一个演示

太棒了！谢谢@Nikosh那么pointToLayer应该专门用于几何造型吗？

layer.on("click", function(e){
    var bbox = e.target.getBounds();
    var sw = bbox.getSouthWest();
    var ne = bbox.getNorthEast();
    map.fitBounds([sw, ne]);

    // the clicked polygon identifier 
    var clickedPoly = e.target.feature.properties.polygon;

    layerGroup.clearLayers();
    layerGroup.addLayer(L.geoJson(pts, {
        pointToLayer: function(feature, latlng){
            return L.circleMarker(latlng, { 
                color: "red"
            });
        },
        filter: function (feature) {
            return feature.properties.id === clickedPoly;
        }
    }));
});