Leaflet - выбор точки в полигоне geoJSON - PullRequest
Новая
       64

Leaflet - выбор точки в полигоне geoJSON

0 голосов
/ 11 декабря 2019

Я пытаюсь сделать мой полигон geoJSON активным с возможностью выделения всех маркеров, лежащих внутри.

После этого вопроса: https://gis.stackexchange.com/questions/343927/selecting-points-within-geojson-polygon-bounds-using-leaflet

Я рассматривал этот пример:

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

, что очень хорошо, но относится только к кругу buffor.

Я пытался сделать что-то точно такое же для моих прикрепленных полигонов 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)    
    });

Но так как моя консоль говорит, что:

Uncaught SyntaxError: Неожиданный конец ввода

Я должен быть совершенно не прав:

Iвидел нечто подобное здесь:

Выберите одну особенность из нескольких перекрывающихся объектов (здесь многоугольников) на карте Leaflet

и здесь

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

Но не разрешается и относится к указанным объектам полигона geoJson.

Я ищу что-то вроде этого:

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

, но вместо всплывающего окна я хочу, чтобы все маркеры окружности внутри многоугольника были видны на боковой панели, как показано на рисунке. ниже:

enter image description here

Возможно ли достичь?

Спасибо за любую помощь

РЕДАКТИРОВАТЬ:

По словам пользователя @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);

Есть ли где-нибудь достойный работающий пример такого рода проблемы?

1 Ответ

0 голосов
/ 12 декабря 2019

Вы можете использовать библиотеку 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

...