javascript - Leafletjs动态绑定(bind)到可见标记/簇

Question

这与上一个问题相关:Leafletjs dynamically bound map to visible overlays .

我现在将 Leaflet.FeatureGroup.SubGroup 插件与 Leaflet.markercluster 插件一起使用。尝试将 map 设置为绑定(bind)到所有可见标记和标记簇。我使用 3 个坐标来测试:

[43.6425657, -79.38705569999999]
[43.7164673, -79.3395846]
[-41.3142772, 174.8135975]

这是到目前为止的代码:

var map = L.map("mapid");
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);

map.setView([43.6532, -79.3832], 2);

var parentGroup = L.markerClusterGroup().addTo(map),
    consultingMarkers = L.featureGroup.subGroup(parentGroup).addTo(map),
    otherMarkers = L.featureGroup.subGroup(parentGroup).addTo(map);

// subGroup1
L.marker([43.6425657, -79.38705569999999]).addTo(consultingMarkers);
L.marker([43.7164673, -79.3395846]).addTo(consultingMarkers);

// subGroup2 
L.marker([-41.3142772, 174.8135975], {icon: otherIcon}).addTo(otherMarkers);

var overlays = {
  'consulting': consultingMarkers,
  'other': otherMarkers
};

L.control.layers(null, overlays, {
  collapsed: false
}).addTo(map);

map.on('overlayadd overlayremove', function () {
  var bounds = parentGroup.getBounds(),
      southWest = bounds.getSouthWest();

  // Fit bounds only if the Parent Group actually has some markers,
  // i.e. it returns valid bounds.
  if (southWest && !southWest.equals(bounds.getNorthEast())) {
    map.fitBounds(parentGroup.getBounds());
  }
});

到目前为止，我遇到了这些问题:

1. map 未绑定(bind)到 [-41.3142772, 174.8135975] 坐标
2. 取消选中“咨询”图层不会将 map 绑定(bind)到坐标为 [-41.3142772, 174.8135975] 的“其他”图层中的标记。

更新:单个标记似乎存在边界问题。我尝试添加另一个位于集群中的标记坐标 [43.76089289999999, -79.4103427]。但是，如果我删除“咨询”集群并删除“其他”层。 map 仍然没有绑定(bind)到 map 上留下的最后一个标记。

Answer 1

如果我理解正确的话，您会感到困惑，因为当您的子组之一只有 1 个标记时，map.fitBounds 看起来不会被执行？

在这种情况下，这就是 !southWest.equals(bounds.getNorthEast()) 检查的预期行为:它避免在 bounds 时执行下一个 block 代表空区域，即其中有 0 或 1 个标记。

将支票替换为 bounds.isValid() ，您仅避免存在 0 个标记时的情况，但在恰好有 1 个标记的情况下，它将允许执行下一个 block ，因此尝试在空区域上拟合边界。在这种情况下，Leaflet 会平移到该单个标记并缩放到 maxZoom。

map.on('overlayadd overlayremove', function () {
  var bounds = parentGroup.getBounds();

  if (bounds.isValid()) {
    map.fitBounds(bounds);
  }
});

演示:https://jsfiddle.net/3v7hd2vx/355/