Как получить край многоугольника, нарисованного на карте в Leaflet - PullRequest
Новая
       46

Как получить край многоугольника, нарисованного на карте в Leaflet

0 голосов
/ 21 февраля 2020

Я работаю с Leaflet и Leaflet-Draw в Angular, чтобы нарисовать несколько полигонов на карте Google. Как реализовать слушателя, когда пользователь щелкает точно по краю нарисованных многоугольников и получает широту и длину этого ребра. Я знаю, что аналогичная ситуация может быть реализована с помощью Google Map API, как показано в приведенном ниже коде, но я не могу найти источник, который помог бы мне реализовать то же самое в Leaflet.

google.maps.event.addListener(polygon, 'click', function (event) { console.log(event.edge) }

Google Документация карты: https://developers.google.com/maps/documentation/javascript/reference/polygon#PolyMouseEvent

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Для тех, кто сталкивался с таким вопросом: я сам нашел решение! Я не нашел ничего из библиотеки рисования Leaflet, которую мог бы использовать, поэтому я определил проблему для себя как проблему тригонометрии и решил ее таким образом. Я определил функцию, в которой при щелчке многоугольника она конвертирует event.latlng и перебирает polygon.getLatLngs () [0], беря пару точек A и B. A - это первые координаты, B - следующая, и если она достигает конца массива, B будет первой точкой. Затем, используя коллинеарную функцию из 3 точек с x, y, я проверил, имеет ли нажатие x, y тот же наклон, что и точки A и B. соединить их с информацией о latLng и в дальнейшем использовать ее в моем проекте. Хотя этот метод работает, я был бы признателен, если бы кто-нибудь знал лучшее решение или встроенную функцию библиотеки, которую можно использовать вместо этого. Спасибо!

0 голосов
/ 21 февраля 2020

Когда пользователь нажимает на многоугольник, вы можете l oop через все углы и проверять, щелкнул ли он в ближайшем углу. 


poly.on('click', function(e){
  var latlng = e.latlng;
  var corners = poly.getLatLngs();
  if(!L.LineUtil.isFlat(corners)){ //Convert to a flat array
    corners = corners[0];
  }

    //Convert the point to pixels
    var point = mymap.latLngToContainerPoint(latlng);

  //Loop through each corner
  corners.forEach(function(ll){    
    //Convert the point to pixels
    var point1 = mymap.latLngToContainerPoint(ll);
    var distance =  Math.sqrt(Math.pow(point1.x - point.x, 2) + Math.pow(point.y - point1.y, 2));

    //Check if distance between pixels is smaller then 10
    if(distance < 10){
        console.log('corner clicked');
    }
  });
});

Это просто JS, вам нужно преобразовать angular.

Альтернативой является размещение в каждом углу DivMarker или CircleMarker и запуск события, если щелкнуть маркер. Выглядит как: https://geoman.io/leaflet-geoman

...