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

时间:2015-07-30 11:59:18

标签: javascript jquery leaflet mapbox

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

这就是我目前的尝试: -

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

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

问题: -

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

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

提前致谢。

2 个答案:

答案 0 :(得分:4)

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

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

以下是我使用的条件:

SELECT da FROM defined_absence da 
  WHERE da.length = ?1 AND
  (CASE WHEN da.from > ?2 THEN da.from ELSE ?2) < (CASE WHEN da.to < ?3 THEN da.to ELSE ?3)

答案 1 :(得分:2)

您可以使用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);
   }
}