Question

缩小时如何让带有打开的弹出窗口的标记崩溃成簇？

我正在使用leaflet中设置的markercluster和this example：

HTML：

<div id="map"></div>

CSS：

html,
body {
  height: 100%;
}

#map {
  height: 100%;
}

JS：

const map = L.map('map', {
    zoom: 5,
    center: [0,0],
    maxZoom: 18
});
const clustered = L.markerClusterGroup();
map.addLayer(clustered);

const m1 = L.marker(L.latLng(0,0));
m1.addTo(clustered);
m1.bindPopup('one');

const m2 = L.marker(L.latLng(0,1));
m2.addTo(clustered);
m2.bindPopup('two');

const m3 = L.marker(L.latLng(1,0));
m3.addTo(clustered);
m3.bindPopup('three');

只要标记的弹出窗口是打开的，我想暂时免除标记折叠成簇的情况。对于该示例，这意味着：

放大直到看到各个标记。
单击一个以打开一个弹出窗口。
再次放大。

“弹出”标记以及打开的弹出窗口应可见。其余标记应折叠。

关闭弹出窗口后，标记应消失在群集中。

我尝试将标记暂时移至popupopen（和popupclose）上的地图上（然后再移回），但这不起作用：

map.on('popupopen', function(e) {
    const m = e.popup._source;
    clustered.removeLayer(m);
    map.addLayer(m);
});
map.on('popupclose', function(e) {
    let m = e.popup._source;
    map.removeLayer(m);
    clustered.addLayer(m);
});

有什么想法吗？

Answer 1

现在this似乎正在工作。我必须添加一个单独的层unclustered，并且仅在群集层中处理popupopen，并且仅在非聚集层中处理popupclose

const unclustered = L.markerClusterGroup(); // NOTE
map.addLayer(unclustered);
clustered.on('popupopen', function(e) {
    console.log('open');
    const m = e.popup._source;
    clustered.removeLayer(m);
    unclustered.addLayer(m);
    m.openPopup();
});
unclustered.on('popupclose', function(e) {
    console.log('close');
    let m = e.popup._source;
    unclustered.removeLayer(m);
    clustered.addLayer(m);
    m.closePopup();
});

注意：我不满意将L.markerClusterGroup用于非集群层。但是我不知道还有什么。只要该层中只有一个标记，它就会起作用。但是要避免多个标记崩溃成簇，必须使用不同的层。哪一个？ L.layerGroup不起作用。

Answer 2

首次尝试失败的直接原因是，当您尝试从m MarkerClusterGroup（MCG）（clustered）中删除标记clustered.removeLayer(m)时，它将关闭标记弹出窗口，从而触发地图"popupclose"事件，这又将您的标记重新添加到MCG中。

这很容易解释为什么您的第二次尝试（在您的答案中）起作用的原因：您现在在另一个MCG上而不是在地图上监听"popupclose"事件，因此，当您从初始MCG中删除标记时，它会不会在其他MCG上触发该事件。

用Layer Group替换另一个MCG无效的事实仅仅是因为后者不处理事件委托，与Feature Group相反。因此，您可以简单地将要素组用作其他组，以确保您的标记将永远无法聚类。

更新的JSFiddle：https://jsfiddle.net/sghL4z96/69/

Answer 3

这绝不是全面的，但是您应该在每个事件处理程序的末尾调用clustered.refreshClusters()。给定集群在其层中具有的所有标记后，这将通知集群进行更新。您的小提琴中会抛出一些错误，但仍然需要一些解决方案，但这应该使您更接近目标。

例如

map.on('popupopen', function(e) {
  const m = e.popup._source;
  clustered.removeLayer(m);
  map.addLayer(m);

  // update the cluster now that layer data has changed
  clustered.refreshClusters();
});

Leaflet Markercluster：免于聚类的标记

3 个答案: