当前位置: 代码迷 >> JavaScript >> 在矩形,圆形和多边形内填充标记
  详细解决方案

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

热度:45   发布时间:2023-06-05 10:24:23.0

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

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

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

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

问题: -

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

有关如何在圆和多边形的内部或边界上严格填充标记的任何建议?

提前致谢。

由@kmandov建议的PIP解决了内部多边形点,并通过以下过程解析为圆形: -

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

这是我使用的条件:

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

您可以使用来检查您的区域内是否有一个点。

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

像这样的东西:

// 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);
   }
}
  相关解决方案