Leaflet Markercluster：从聚类中免除标记

Question

如何在缩小时将带有打开弹出窗口的标记折叠成一个集群？

我正在使用本示例中设置的 传单和标记集群：

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

我想暂时免除一个标记折叠成一个集群，只要它的弹出窗口是打开的。 例如，这意味着：

1. 放大直到看到单个标记。

2. 单击一个以打开一个弹出窗口。

3. 再次缩小。

“弹出”标记应该与打开的弹出窗口一起可见。 剩余的标记应该折叠。

4. 当弹出窗口关闭时，标记应该消失在集群中。

我试图在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

现在这似乎奏效了。 我不得不添加一个单独的层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.markerClusterGroup层L.markerClusterGroup 。 但我不知道还有什么。 只要该层中只有一个标记，它就会起作用。 但是为了避免多个标记折叠成一个簇，必须使用不同的层。 哪一个？ L.layerGroup不起作用。

Answer 2

您的第一次尝试不起作用的直接原因是，当您尝试从clustered MarkerClusterGroup (MCG) ( clustered.removeLayer(m) ) 中删除 Marker m ，它会关闭 Marker 弹出窗口，从而触发地图"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();
});