Question

我试图通过选择所有位于内部的标记来使我的geoJSON多边形处于活动状态。

以下问题： https://gis.stackexchange.com/questions/343927/selecting-points-within-geojson-polygon-bounds-using-leaflet

我正在考虑以下示例：

http://www.gistechsolutions.com/leaflet/DEMO/Select/SelectPoints3.html

这很好，但仅指圆形增益。

我正在尝试为附加的geoJSON层策略生成完全相同的内容。

我的代码如下：

 //MDU planners
gavin = L.geoJSON(Gavin);
loide = L.geoJSON(Loide);
sam = L.geoJSON(Sam);
jordan = L.geoJSON(Jordan);
steve = L.geoJSON(Steve);
danny = L.geoJSON(Danny);

然后：

  function ProcessClick(lat,lon){
console.log("You clicked the map at LAT: "+ lat+" and LONG: "+lon );
    if (theCircle != undefined) {
        map.removeLayer(theCircle);
    };
    if (theMarker != undefined) {
        map.removeLayer(theMarker);
    };
    if (geojsonLayer != undefined) {
        map.removeLayer(geojsonLayer);
    };
    theMarker = L.marker([lat,lon]).addTo(map);  //Add a marker to show where you clicked.
    SelectPoints(lat,lon);
    theMarker2 = L.marker([lat,lon]).addTo(map);  //Add a marker to show where you clicked. // Newmarker added in order to highlight the geoJSON polygon, where the points will be selected
    SelectPoints2(lat,lon);
 };

下一步，而不是：

  var selPts = [];

  function SelectPoints(lat,lon){
   var dist = document.getElementById("miles").value;
    xy = [lat,lon];  //center point of circle
   var theRadius = parseInt(dist) * 1609.34  //1609.34 meters in a mile  //dist is a string so it's 
 convered to an Interger.
    selPts.length =0;  //Reset the array if selecting new points

    job.eachLayer(function (layer) {
        layer_lat_long = layer.getLatLng(); // Lat, long of current point as it loops through - layer 1.
        distance_from_centerPoint = layer_lat_long.distanceTo(xy); // Distance from our circle marker To current point in meters
    if (distance_from_centerPoint <= theRadius && $('#cf').is(":checked")) { // See if meters is within radius, add the to array
        selPts.push(layer.feature);
    }
})

我添加了：

    var selPts2 = [];

     function SelectPoints2(lat,lon){
     var jo = jordan //geoJSON layer already attached as per above
    xy = [lat,lon];  //center point of circle
    var jorange = jo
    selPts2.length =0;  

    jordan.eachLayer(function (layer) {
                        layer_lat_long =  L.geoJson.getLatLng(); 
                        selPts.push(layer.feature);
                    }
                })

   map.on('click',function(e){  
    ProcessClick(jordan)    
    });

但是由于我的控制台说了那，

未捕获到的SyntaxError：输入意外结束

我一定是完全错误的：

我在这里看到了类似的东西：

Select one feature of multiple overlapping features (here polygons) on a Leaflet map

在这里

Polygons with highlight features in Leaflet

但无法解析，而是参考指定的geoJson多边形要素。

我正在寻找某事……

http://www.gistechsolutions.com/leaflet/DEMO/basic/basic_Poly.html

但我不想让弹出窗口具有弹出窗口中所示的多边形内的所有圆形标记，如下图所示：

有可能实现吗？

谢谢您的帮助

编辑：

根据@Falke Design用户，我尝试了以下链接：

Determine if a point reside inside a leaflet polygon

Check if a polygon point is inside another in leaflet

还有：

https://turfjs.org/docs/#pointsWithinPolygon

其中有一些JSfiddle示例：

http://jsfiddle.net/guspersson/6s1np2n4/

https://jsfiddle.net/4psL2hoo/1/

http://jsfiddle.net/ehpL8fho/14/

很不幸，无法正常工作。

我附上了：

  function isMarkerInsidePolygon(marker, poly) {
var inside = false;
var x = marker.getLatLng().lat, y = marker.getLatLng().lng;
for (var ii=0;ii<poly.getLatLngs().length;ii++){
    var polyPoints = poly.getLatLngs()[ii];
    for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = 
  i++) {
        var xi = polyPoints[i].lat, yi = polyPoints[i].lng;
        var xj = polyPoints[j].lat, yj = polyPoints[j].lng;

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
}

return inside;
   };

在我的代码中，但没有返回任何内容，类似于JSturf示例，甚至还附有一个虚拟示例。

 var points = turf.points([
[-46.6318, -23.5523],
[-46.6246, -23.5325],
[-46.6062, -23.5513],
[-46.663, -23.554],
[-46.643, -23.557]
 ]);

var searchWithin = turf.polygon([[
[-46.653,-23.543],
[-46.634,-23.5346],
[-46.613,-23.543],
[-46.614,-23.559],
[-46.631,-23.567],
[-46.653,-23.560],
[-46.653,-23.543]
 ]]);

 var ptsWithin = turf.pointsWithinPolygon(points, searchWithin);

在任何地方都可以找到这种问题的示例吗？

Answer 1

您可以使用turf.js库。这是一个强大的几何计算库。

<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5.1.6/turf.min.js"></script>

var jordancoords = jordan.toGeoJSON().geometry.coordinates
job.eachLayer(function (layer) {
   if(turf.booleanContains(jordancoords, layer.toGeoJSON().geometry.coordinates)){
        selPts.push(layer.feature);
   }
})

否则，您可以尝试以下操作：https://stackoverflow.com/a/31813714/8283938

Answer 2

更新了按钮选择示例： https://jsfiddle.net/jsfiddM/hs0njxfq/12/

<div id="map"></div>
<button id="myButton">Button</button>

传单-geoJSON多边形内的点选择

2 个答案: