傳單 - geoJSON 多邊形內的點選擇

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 層 poligons 制作完全相同的東西。

我的代碼如下所示：

 //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: 意外的輸入結束

我一定是完全錯誤的：

我在這里看到了類似的東西：

在傳單地圖上選擇多個重疊特征（此處為多邊形）中的一個特征

和這里

Leaflet中具有突出顯示功能的多邊形

但未解析並引用指定的 geoJson 多邊形要素。

我正在尋找這樣的東西：

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

但不是彈出窗口，我希望在側邊欄中看到多邊形內的所有圓形標記，如下圖所示：

有可能實現嗎？

感謝您的任何幫助

編輯：

根據@Falke Design 用戶，我嘗試了以下鏈接：

確定一個點是否位於傳單多邊形內

檢查一個多邊形點是否在傳單中的另一個點內

並且：

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>