Javascript 传单标记聚类：免除标记聚类

当缩小时，如何防止带有打开弹出窗口的标记塌陷到集群中

我正在使用和设置：

HTML:

JS:

我想暂时豁免一个标记，只要它的弹出窗口是打开的，它就不会崩溃成集群。例如，这意味着：

放大直到看到单个标记

单击一个打开一个弹出窗口

再次缩小

“弹出”标记应与打开的弹出窗口一起可见。剩下的标记应该塌陷

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

我已尝试在

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

---

有什么想法吗？

这并不全面，但您应该在每个事件处理程序的末尾调用。这将通知集群更新其所在层中的所有标记。在你的小提琴中出现了一些错误，仍然需要一些解决方案，但这会让你更接近你的目标

e、 g

现在似乎正在起作用。我必须添加一个单独的层

unclustered

，只在集群层处理

popupopen

，只在unclustered层处理

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

不起作用。

第一次尝试不起作用的直接原因是，当您尝试从您的

clustered

MarkerClusterGroup（MCG）（

clustered.removeLayer（m）

）中删除标记

m

时，它会关闭标记弹出窗口，从而触发map

“popupclose”

事件，这反过来又会将您的标记重新添加到MCG中

这很容易解释为什么您的第二次尝试（在您的答案中）有效：您现在在另一个MCG上而不是在地图上收听

“popupclose”

事件，因此当您从初始MCG上移除标记时，它不会在另一个MCG上触发事件

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

---

更新的JSFIDLE:

IMHO文档需要

clustered.refreshClusters（）

仅在自定义图标上。不幸的是，双击标记无法再处理，请参阅

https://jsfiddle.net/sghL4z96/67/

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

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

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

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