获取Leaflet中当前地图范围内的标记/图层列表

时间:2014-02-27 22:13:36

标签: javascript leaflet

这有点类似于问here -

我正在为地图应用程序编写一个搜索框,它会立即从服务器检索一整套搜索结果(人名和信息),然后翻阅结果列表。因此,在地图上的任何给定点处,存在两种标记 - 用于搜索结果中但不在当前页面中的点的背景标记,以及用于搜索结果的当前页面中的点的前景标记。

所有这一切都很好。我现在要做的就是设置它,这样如果用户缩放或平移地图,搜索结果列表会更新以仅显示当前地图范围内的标记。

显然,有服务器端方法可以做到这一点,或者我也可以浏览整个标记列表,看看哪个适合当前范围;但有人知道在传单内做这个内置的方法吗?看起来像map.getVisibleLayers()的东西?

4 个答案:

答案 0 :(得分:7)

我认为这可能会有所帮助: https://github.com/stefanocudini/leaflet-list-markers

从演示中可以看到

,包括图层中的所有标记,此插件仅显示当前视口中可见的列表。 它的用法很简单,连续:

var markersLayer = new L.LayerGroup();
map.addControl( new L.Control.ListMarkers({layer: markersLayer}) );

获取它的代码如下:

var layers = L.LayerGroup(), //layers contains all markers..
    contained = [];          //makers in map boundingbox

layers.eachLayer(function(l) {
    if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) )
        contained.push(l);
});

答案 1 :(得分:7)

您必须检查每个图层的边界与地图的边界。因为eachLayer()返回所有图层,无论它们是否在可见范围内。

if(map.getBounds().contains(layer.getLatLng())) { ... }

在Stefano的代码中,这一行显示在这一行:

https://github.com/stefanocudini/leaflet-list-markers/blob/master/src/leaflet-list-markers.js#L95

答案 2 :(得分:5)

关于问题的最后一部分,如果要迭代可见图层,可以使用eachLayer,例如:

map.eachLayer(function (layer) {
    // do something with the layer
});

API参考:http://leafletjs.com/reference.html#map-stuff-methods

答案 3 :(得分:3)

这是一个完成工作的完全正常的功能:

// var map is an instance of a Leaflet map
// this function assumes you have added markers as GeoJSON to the map
// it will return an array of all features currently shown in the
// active bounding region.

function getFeaturesInView() {
  var features = [];
  map.eachLayer( function(layer) {
    if(layer instanceof L.Marker) {
      if(map.getBounds().contains(layer.getLatLng())) {
        features.push(layer.feature);
      }
    }
  });
  return features;
}