如何获取在传单中的地图上绘制的多边形的边缘

Question

我正在 Angular 中使用 Leaflet 和 Leaflet-Draw 在 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

Answer 1

当用户点击多边形时，您可以遍历所有角并检查他是否点击了角附近。


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

Answer 2

对于遇到这个问题的人：我自己找到了解决方案！我没有直接从 Leaflet 绘图库中找到任何可以使用的东西，所以我将自己的问题定义为三角函数问题并以这种方式解决。我定义了一个函数，在该函数中单击多边形时，它会转换 event.latlng 并在 polygon.getLatLngs()[0] 上循环获取一对 A 和 B 点。 A是第一个坐标，B是下一个，如果到达数组的末尾，B将是第一个点。然后使用 x、y 的 3 点的共线函数，我检查单击的 x、y 是否与点 A 和 B 具有相同的斜率。（必须四舍五入），如果是这样，我将保存 A 和 B 点与他们的 latLng 信息配对，并在我的项目中进一步使用它。尽管此方法有效，但如果有人知道可以替代使用的更好的解决方案或库内置函数，我将不胜感激。谢谢！

如何获取在传单中的地图上绘制的多边形的边缘

How to get the edge of a polygon drawn on map within Leaflet

polygon

draw

edges

leaflet