无法使用 .getBounds() 函数（传单）仅显示特定范围（圆圈）内的点

Posted 2023-02-19

【中文标题】无法使用 .getBounds() 函数（传单）仅显示特定范围（圆圈）内的点

【英文标题】：Unable to display only the points within a specific range (circle) using the .getBounds() function (Leaflet)

【发布时间】：2015-04-28 19:26:19

【问题描述】：

我正在尝试显示特定范围内的一定数量的点，即在 圆圈 内。但是当使用.getBounds() 函数进行比较以查看该点是否在边界内时，我得到了一些超出边界的点，如下面的屏幕截图所示：

Map Screenshot

当前用于检查点是否在圆圈范围内的代码如下：

        echo '
        var mark = L.marker([' . $r->coordinates[0]->longitude . ',' . $r->coordinates[0]->latitude . ']);

        if(circle.getBounds().contains(mark.getLatLng()))
            mark.addTo(map);
            mark.bindPopup("'.$info.'");
        
        ';

我正在循环进入一个数组以检索纬度和经度，然后从那里查看坐标是否填充到边界内，如果是，它将其添加到地图中并带有相应的弹出窗口

关于这个特定问题的任何解决方案？

感谢您的帮助

【参考方案1】：

您可以创建自己的contains 方法并将其添加到L.Circle 类，因为默认情况下它没有。您可以使用L.LatLng 对象的实用方法distanceTo 来计算标记与圆心之间的距离，并将其与圆的半径进行比较：

L.Circle.include(
    contains: function (latLng) 
        return this.getLatLng().distanceTo(latLng) < this.getRadius();
    
);

现在，当您有一个圆圈和一个标记或 latlng 对象时，您可以这样做：

var map = L.map(...);

var circle = L.circle(...).addTo(map),
    marker = L.marker(...).addTo(map);
    latLng = L.latLng(...);

// Returns true when in the circle and false when outside
circle.contains(marker.getLatLng());
circle.contains(latLng);

Plunker 上的工作示例：http://plnkr.co/edit/OPF7DM?p=preview

L.Circle 参考：http://leafletjs.com/reference.html#circle

L.Marker 参考：http://leafletjs.com/reference.html#marker

L.LatLng 参考：http://leafletjs.com/reference.html#latlng

【讨论】：

omg 再次非常感谢您的帮助，代码正在运行。你是救命恩人！！

【参考方案2】：

getBounds() 方法总是返回一个矩形区域。因此它不能用于检查非矩形对象是否包含给定点。

对于圆，您应该能够计算点到圆心 (getLatLng()) 的距离 (distanceTo()) 并检查它是否小于圆的半径 (getRadius())。请注意，距离和半径以米为单位。

【讨论】：

您能详细说明一下吗？

我还没有太多使用 Leaflet 的经验。你不清楚哪一部分？

我从上面的 iH8 得到了答案。也感谢您的回复和帮助。

太棒了 :) 如果您喜欢我的回答（以及 iH8 的回答），那么请考虑支持 :)