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

Question

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

这就是我目前正在尝试的:-

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

现在我使用这些 bounds(southWest, northEast) latlongs 来虚拟创建行列间距，然后相应地填充标记。

问题:-

上述方法适用于矩形，所有标记都填充在矩形内。
不适用于圆形和多边形。标记也填充在圆和多边形之外（附近）。我猜 getBounds() 方法是通过创建一个接触圆和多边形所有角的框来给出边界或计算面积。

关于如何严格在圆和多边形的内部或边界上填充标记有什么建议吗？

提前致谢。

Answer 1

您或许可以使用 PointInLayer leaflet plug-in 来检查某个点是否在您的区域内。

然后您可以仅为实际位于多边形内的网格点添加标记。

类似的东西：

// 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);
   }
}

Answer 2

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

获取点的经纬度。
获取圆心经纬度
运行 distanceTo() 方法在上述两个经纬度中的任何一个上，并将第二个经纬度作为参数传递。
检查距离是否大于圆的半径
如果它大于半径，则该点在圆外，否则在圆内。

这是我使用的条件：

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

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

Populating markers inside rectangle, circle and polygon

javascript

jquery

leaflet

mapbox