获取Leaflet中当前地图范围内的标记/图层列表 [英] Get a list of markers/layers within current map bounds in Leaflet

问题描述

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

This is somewhat similar to the question asked here --

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

I'm writing a search box for a map application, which retrieves a whole set of search results (people's names & info) at once from a server and then pages through the list of results. So at any given point on the map there are two kinds of markers -- a background marker for points which are in the search results but not in the current page, and a foreground marker for points which are in the current page of search results.

这一切都运行良好..我现在要做的就是设置它，这样如果用户缩放或平移地图，搜索结果列表会更新为仅显示当前地图边界内的标记。

All this works nicely.. what I'd like to do now is set it up so that if a user zooms or pans the map, the search results list updates to show only markers within the current map bounds.

显然有服务器端的方法可以做到这一点，或者我也可以通过整个标记列表来查看哪个符合当前范围;但有人知道在传单内做这个内置的方法吗？看起来像map.getVisibleLayers（）的东西？

Obviously there are server-side ways to do this, or I could also just run through the whole list of markers to see which fit within the current bounds; but does anybody know a built-in way to do this within leaflet? Something which would look like map.getVisibleLayers()?

推荐答案

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

I think this may be of help: https://github.com/stefanocudini/leaflet-list-markers

从演示中可以看到，包括图层中的所有标记，此插件仅显示当前视口中可见的列表。
它的用法很简单：

as you can see from the demo, including all markers in a layer, this plugin shows a list of only those visible in the current viewport. Its usage is simple, in a row:

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);
});

这篇关于获取Leaflet中当前地图范围内的标记/图层列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！