Leaflet.js：将地图缩放到可见标记

Question

我有一张带有 collection 标记的 leaflet.js 地图，可以 shown/hidden 在图例中 div 使用插件 Leaflet.StyledLayerControl 完成（我认为这不是太相关，但以防万一）。

我可以在图层显示或隐藏时捕获事件，在那种情况下我想缩放以适合所有可见标记。

SO 中有一些标题非常相似的问题，但其中大多数假装适合缩放到已知的 collection 标记，这不是我的情况（其他一些主题非常相似的问题请参阅Google 地图，而不是传单）。

所以，问题是：

A) 我可以设置缩放以适合所有可见标记吗？ B) 或者，我怎样才能得到所有可见标记的数组来应用看到的其他解决方案？

这是我在地图上创建标记的方式：

const icon_general = L.divIcon({html: '<i class="fas fa-map-marker fa-2x"></i>', iconSize: [20, 20], className: 'node_icon'});

var node_10031 = L.marker([40.7174605,-3.9199218],{ icon: icon_general}).addTo(layer1);
node_10031.bindPopup('<h2>Title</h2>');
var node_10032 = L.marker([40.7184576,-3.9202692],{ icon: icon_general}).addTo(layer1);
node_10032.bindPopup('<h2>Title</h2>');
var node_10032 = L.marker([40.7361371,-3.9453966],{ icon: icon_general}).addTo(layer2);
node_10032.bindPopup('<h2>Title</h2>');

层随后被隐藏或显示，我可以捕获该事件，这是我想要修改缩放或循环浏览可见标记的地方。

编辑（最终解决方案基于 Seth Lutske 回复）：

这是我的最终解决方案，也许它的效率较低，因为每次点击它都会循环遍历地图中的所有可见标记，但经过一些尝试，这是成功的（我无法正确管理 indivadd/remove层的双重事件：

function setZoom2Visible()
{
    var visibleLayerGroup = new L.FeatureGroup();

    mymap.eachLayer(function(layer){
        if (layer instanceof L.Marker)
            visibleLayerGroup.addLayer(layer);
    });

    const bounds = visibleLayerGroup.getBounds();
    mymap.fitBounds(bounds);
}

$('.menu-item-checkbox input[type=checkbox]').click(function(){
    setZoom2Visible();
});

Answer 1

创建一个特征组并向其添加标记：

const myGroup = L.featureGroup([node_10031, node_10032, node_10033]);

无论您使用什么事件来捕获添加到地图的标记，您都可以获取 featureGroup 的边界并将地图的边界设置为：

function onMarkersAddedEventHandler(){
  const bounds = myGroup.getBounds();
  map.fitBounds(bounds);
}

现在，如果您说 每个标记 在 UI 中都有自己的切换开关，那就有点复杂了。您必须将事件附加到每个标记的 UI 复选框，并在更改该复选框时，从组中添加或删除标记，然后重置边界：

const node_10031_checkbox = document.querySelector('input[type="checkbox"]#10031');

function onMarkersAddedEventHandler(e){
  if (e.target.checked){
    myGroup.addLayer(node_10031)
  } else {
    myGroup.removeLayer(node_10031)
  }
  const bounds = myGroup.getBounds();
  map.fitBounds(bounds);
}

Leaflet.js：将地图缩放到可见标记

Leaflet.js: zoom map to visible markers

javascript

leaflet