无法使用 .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屋！