在矩形、圆形和多边形内填充标记

Question

我的要求是在用户绘制的区域内放置标记，该区域可以是圆形、矩形或多边形。

以下是我目前尝试的方法：

map.on('draw:created', function(e) {
    var type = e.layerType, layer = e.layer;
    var bounds =  layer.getBounds();
});

现在我正在使用这些边界（southWest，northEast）的纬度和经度来虚拟创建一个行列间距，然后相应地填充标记。
问题 :-

• 上述方法对矩形有效，所有标记都在矩形内部填充。
• 不适用于圆形和多边形。标记位于圆形和多边形外部（附近）。 我想getBounds()方法正在通过创建接触圆形和多边形所有角落的框来给出边界或计算区域。

有什么建议可以使标记严格位于圆形和多边形的内部或边界上吗？

提前致谢。

- New Bee

Answer 1

按照@kmandov建议的PIP方法解决了点在多边形内的问题，并通过以下过程解决了圆的问题：

• 获取点的纬度和经度。
• 获取圆心的纬度和经度。
• 对以上两个经纬度之一运行distanceTo（）方法，并将第二个经纬度作为参数传递。
• 检查距离是否大于圆的半径。
• 如果距离大于半径，则该点在圆外，否则在圆内。

这是我使用的条件：

if (customMarker.getLatLng().distanceTo(myCircle.getLatLng()) <= myCircle.getRadius()) {
          console.log("Marker is inside circle");
}else{
         console.log("Marker is outside circle");
}

- New Bee

Answer 2

您可以使用PointInLayer leaflet插件来检查点是否在您的区域内。然后，您只需为实际在多边形内的网格点添加标记。类似于这样：

// the user area:
var areaLayer = L.geoJson(userArea);

// iterate over your grid of points
for (var i = 0; i < gridPoints.length; i++) {

   // add marker only if the point is within the area
   var results = leafletPip.pointInLayer(gridPoints[i], areaLayer, true);
   if (results.length > 0) {
      L.marker(gridPoints[i]).addTo(map);
   }
}

- kmandov

---

太棒了，它起作用了。昨天我也在检查leaflet-pip。我刚刚实现了它，它起作用了。我也想为圆形实现相同的功能。它会起作用吗？我会试一试。再次感谢您 :) - New Bee

太好了！不客气 :) leaflet-pip对于圆形不起作用，但是你可以使用一个公式来检查一个点是否在圆内。在这里可以看到：https://dev59.com/pXRB5IYBdhLWcg3w4bAo - kmandov

您还可以查看geojson-utils（leaflet-pip是其包装器）。Geojson-utils具有半径过滤功能：https://github.com/maxogden/geojson-js-utils - kmandov

谢谢，我会尝试的。 :) - New Bee