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

【问题标题】：Get a list of markers/layers within current map bounds in Leaflet在 Leaflet 中获取当前地图范围内的标记/图层列表
【发布时间】：2014-02-27 22:13:35
【问题描述】：

这有点类似于here提出的问题--

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

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

显然有服务器端的方法可以做到这一点，或者我也可以遍历整个标记列表来查看哪些符合当前范围；但是有人知道在传单中执行此操作的内置方法吗？看起来像 map.getVisibleLayers() 的东西？

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

我认为这可能会有所帮助： 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);
});

【讨论】：

【解决方案2】：

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

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

在 Stefano 的代码中，围绕这一行显示：

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

【讨论】：

【解决方案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;
}

【讨论】：

非常有帮助。谢谢
使用此代码我无法在地图加载时第一次获得标记列表。有什么办法可以得到吗？

【解决方案4】：

关于你问题的最后一部分，如果你想遍历可见层，你可以使用 eachLayer，例如：

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

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

【讨论】：

我相信迭代所有层，而不仅仅是可见层。