Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/412.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在矩形、圆形和多边形内填充标记_Javascript_Jquery_Leaflet_Mapbox - Fatal编程技术网

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

Javascript 在矩形、圆形和多边形内填充标记,javascript,jquery,leaflet,mapbox,Javascript,Jquery,Leaflet,Mapbox,我的要求是在用户绘制的区域内填充标记,该区域可以是圆形、矩形或多边形 这就是我目前正在尝试的内容:- map.on('draw:created', function(e) { var type = e.layerType, layer = e.layer; var bounds = layer.getBounds(); }); 现在,我使用这些边界(西南、东北)latlongs虚拟地创建一个行-列间距,然后相应地填充标记 问题:- 上述方法适用于矩形,所有标记都填充在矩形内

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

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

map.on('draw:created', function(e) {
    var type = e.layerType, layer = e.layer;
    var bounds =  layer.getBounds();
});
现在,我使用这些边界(西南、东北)latlongs虚拟地创建一个行-列间距,然后相应地填充标记

问题:-

  • 上述方法适用于矩形,所有标记都填充在矩形内
  • 不适用于圆和多边形。标记也填充在圆和多边形的外部(附近)。 我猜getBounds()方法是通过创建一个接触圆和多边形所有角的框来给出边界或计算面积
关于如何在圆和多边形的内部或边界上严格填充标记,有什么建议吗

提前谢谢

您可能可以使用来检查某个点是否在您的区域内

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

诸如此类:

// 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);
   }
}
//用户区域:
var areaLayer=L.geoJson(userArea);
//在点网格上迭代
对于(var i=0;i0){
L.标记(网格点[i])。添加到(地图);
}
}

根据@kmandov的建议,通过PIP对多边形内的点进行解析,并通过以下过程对圆进行解析:-

  • 获取点的纬度和经度
  • 获取圆心的纬度和经度
  • 对上述两个latlong中的任何一个运行distanceTo()方法,并将第二个latlong作为参数传递
  • 检查距离是否大于圆的半径
  • 如果大于半径,则该点位于圆外或圆内
以下是我使用的条件:

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

if(customMarker.getLatLng().distanceTo(myCircle.getLatLng())有点不对劲。它奏效了。我昨天也在检查传单pip。刚刚实现了它,它奏效了。我也希望circle有同样的功能。它行吗?我会试试。再次感谢:)太好了!不客气:)传单pip不适用于圆,但您可以使用公式检查点是否在圆内。请看这里:您还可以查看geojson utils(传单pip是它的包装)。Geojson UTIL具有半径过滤:谢谢。我试试这个。:)