无法使用.getBounds()函数(传单)仅显示特定范围(圆)内的点 [英] Unable to display only the points within a specific range (circle) using the .getBounds() function (Leaflet)

问题描述

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

I am trying to display a certain amount of points within a specific range, that is within a circle. But when using the .getBounds() function for comparison to see whether the point is within the bound, i get some points outside it as shown in the screenshot below:

地图屏幕截图

当前用于检查点是否在圆界内的代码如下:

The code currently using to check if the point is within the circle bound is below:

        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.'");
        }
        ';

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

I am looping into an array to retrieve the latitude and longitude and from there, to see whether the coordinates fills into the bound, if so, it adds it to the map with their corresponding popup

有关此特定问题的任何解决方案?

Any solution regarding this particular issue?

感谢您的帮助

推荐答案

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

You can create your own contains method and add it to the L.Circle class because it doesn't have one by default. You can use the utility method distanceTo of the L.LatLng objects to calculate distance between your marker and the circle's center and compare that to the circle's radius:

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

现在，当您有一个圆和一个标记或latlng对象时，您可以执行以下操作:

Now when you have a circle and a marker or latlng object you can do this:

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

Working example on Plunker: http://plnkr.co/edit/OPF7DM?p=preview

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

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

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

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

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

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

这篇关于无法使用.getBounds()函数(传单)仅显示特定范围(圆)内的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！