如何在传单中同时添加新标记和删除与多边形点击相关的旧标记 [英] How to simultaneously add new markers and remove old markers associated with polygon clicks in leaflet

问题描述

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

I have a map with Geojson polygons where each polygon is identified by a unique ID. I have a separate Geojson of point markers where each point is associated with a polygon with the same polygon ID, as well as a unique identifier for each individual point.

初始地图显示仅包含多边形.每次单击多边形将显示与单击的多边形关联的点.单击一个新的多边形时，我想绘制与该新多边形关联的点，同时删除先前绘制的点.因此，每次用户单击多边形时，都只会显示该多边形内的所有点.

The initial map display is of only polygons. Each polygon click will display the points that are associated with the clicked polygon. When a new polygon is clicked, I want to plot the points associated with the new polygon while simultaneously removing the previously plotted points. So each time the user clicks a polygon, ONLY points within that polygon are ever displayed.

以下是一些可复制的代码: https://jsfiddle.net/3v7hd2vx/1146/

Here is some minimally reproducible code: https://jsfiddle.net/3v7hd2vx/1146/

var polys = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0.5,
        "polygon": "one"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -87.33032226562499,
              37.90953361677018
            ],
            [
              -85.374755859375,
              37.90953361677018
            ],
            [
              -85.374755859375,
              39.036252959636606
            ],
            [
              -87.33032226562499,
              39.036252959636606
            ],
            [
              -87.33032226562499,
              37.90953361677018
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0.5,
        "polygon": "two"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -85.3857421875,
              37.90953361677018
            ],
            [
              -83.3642578125,
              37.90953361677018
            ],
            [
              -83.3642578125,
              39.04478604850143
            ],
            [
              -85.3857421875,
              39.04478604850143
            ],
            [
              -85.3857421875,
              37.90953361677018
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "fill": "#555555",
        "fill-opacity": 0.5,
        "polygon": "three"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -87.34130859375,
              36.90597988519294
            ],
            [
              -83.3642578125,
              36.90597988519294
            ],
            [
              -83.3642578125,
              37.91820111976663
            ],
            [
              -87.34130859375,
              37.91820111976663
            ],
            [
              -87.34130859375,
              36.90597988519294
            ]
          ]
        ]
      }
    }
  ]
}; 
var pts = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "id": "one",
        "animal": "bear"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -86.72607421875,
          38.77121637244273
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "id": "one",
        "animal": "fish"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -86.583251953125,
          38.487994609214795
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "id": "two",
        "animal": "tiger"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -84.276123046875,
          38.38472766885085
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "id": "two",
        "animal": "lizard"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -85.067138671875,
          38.70265930723801
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "id": "three",
        "animal": "dog"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -83.880615234375,
          37.483576550426996
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "id": "three",
        "animal": "horse"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -85.93505859374999,
          37.709899354855125
        ]
      }
    }
  ]
};

var map = L.map("map", {
    center: [37.5, -85], 
  zoom: 7
});
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

var defaultStyle = {
  fillColor: "whitesmoke", 
  color: "#171717", 
  fillOpacity: 1, 
  weight: 1
};

// create polygon geojson, add to map 
var polyJson = L.geoJson(polys, defaultStyle).addTo(map);

// empty layer group to add markers to 
var layerGroup = L.layerGroup();

// loop through polygon layers for events
polyJson.eachLayer(function(layer){

    // zoom to bbox on each polygon click
    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;

    // pts added to map when they match the clickedpoly id
    L.geoJson(pts, {
        pointToLayer: function(feature, latlng){
        if(feature.properties.id === clickedPoly){

           var clicked = L.circleMarker(latlng, { 
             color: "red"
           }).addTo(map).addTo(layerGroup);
        }
      }
    });
  });
});

polyJson.on("click", function(){
    if(map.hasLayer(layerGroup)){
    map.removeLayer(layerGroup);
  }else{
    map.addLayer(layerGroup);
    //layerGroup.removeLayers();
  }
});

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

In this example, the entire layerGroup of points is removed every other click based on the conditional statement at the end of the code block. But each new click continues to append markers to the layerGroup, so ALL selected markers are displayed every other click.

我倾向于让每个标记组"以它们所在的多边形命名，因此当显示的标记与当前单击的多边形 ID 不匹配时，它们将从地图和 layerGroup 中删除.我在 R 中与 Leaflet 进行了广泛的合作，但我不确定如何在 JS 中实现这一点(或者在不同的语言中逻辑是否相同).我无法手动定义每个图层，因为我将遍历许多动态加载的多边形和点.

My inclination is to have each "group" of markers named by the polygon that they lie within, so when displayed markers do not match the currently clicked polygon ID, they will be removed both from the map AND from the layerGroup. I've worked extensively with Leaflet in R, but I'm not sure how to accomplish this in JS (or if the logic is even the same in the different languages). I can't manually define each layer because I'll be iterating through many dynamically loaded polygons and points.

推荐答案

一种使用所需点填充图层的简单方法是:

One simple way to fill your layer with teh desired points would be to:

• 将您的 layerGroup 设置为永久层，
• 清空该层，当用户单击带有 layerGroup.clearLayers()
• 用有效标记填充 layerGroup (由

• make your layerGroup a permanent layer,
• empty this layer when the user clicks on a polygon with layerGroup.clearLayers()
• fill layerGroup with the valid markers (determined by the filter property) and let Leaflet handle the markers without interfering with pointToLayer.

基本上，简化一下:).

Basically, simplify things:).

例如:

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;
        }
    }));
});

还有一个演示 https://jsfiddle.net/3v7hd2vx/1147/

这篇关于如何在传单中同时添加新标记和删除与多边形点击相关的旧标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！