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

2022-01-12 00:00:00 leaflet javascript

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

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

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

相关文章