Leaflet.js动态绑定到可见的标记/集群 [英] Leafletjs dynamically bound to visible markers/clusters

问题描述

这与先前的问题有关: Leafletjs将地图动态绑定到可见的叠加层.

This is related to a previous question: Leafletjs dynamically bound map to visible overlays.

我现在将Leaflet.FeatureGroup.SubGroup插件与Leaflet.markercluster插件一起使用.尝试将地图设置为绑定到所有可见标记和标记簇.我正在使用3个坐标进行测试:

I am now using the Leaflet.FeatureGroup.SubGroup plugin with the Leaflet.markercluster plugin. Trying to set map bound to all visible markers and marker clusters. I am using 3 co-ordinates to test:

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

这是到目前为止的代码:

This is the code so far:

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

到目前为止，我遇到了以下问题:

So far, I am running into these problems:

1. 地图未绑定到[-41.3142772，174.8135975]坐标
2. 取消选中咨询"层不会将地图绑定到来自具有"[-41.3142772，174.8135975]"坐标的其他"层的标记.

更新:单个标记似乎有此边界问题.我尝试添加另一个标记坐标[43.76089289999999，-79.4103427]，它将位于群集中.但是，如果我删除咨询"群集并删除其他"层.地图仍未绑定到地图上剩余的最后一个标记.

Update: it seems to have this bounding problem for single markers. I tried adding another marker co-ordinate [43.76089289999999, -79.4103427] which would be in the cluster. But if I remove "consulting" cluster and remove "other" layer. The map still does not bound to the last marker left on the map.

推荐答案

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

If I understand correctly, you are puzzled because when one of your SubGroups has only 1 marker, the map.fitBounds does not look to be executed?

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

In that case, that is simply the expected behaviour of the !southWest.equals(bounds.getNorthEast()) check: it avoids executing the next block when bounds represents a null area, i.e. there is 0 or 1 marker into it.

通过将支票替换为 bounds.isValid() ，您可以避免仅在标记为0的情况下，而标记恰好为1的情况下，它将允许执行下一个块，因此尝试使边界适合空区域.在这种情况下，Leaflet会平移到该单个标记并放大到maxZoom.

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

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

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

这篇关于Leaflet.js动态绑定到可见的标记/集群的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！