Leaflet Markercluster:从聚类中免除标记

2022-01-12 00:00:00 leaflet javascript leaflet.markercluster

如何在缩小时检查带有打开弹出窗口的标记以防止折叠成簇?

How can one exampt a marker with open popup from collapsing into a cluster when zooming out?

我正在使用 leaflet 和 markercluster 在 这个例子:

I am using leaflet and markercluster as set up in 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');

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

I would like to temporarily exempt a marker from collapsing into a cluster as long as its popup is open. For the example, this would mean:

  1. 放大直到看到各个标记.

  1. Zoom in until you see the individual markers.

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

Click one to open a popup.

再次缩小.

弹出"标记应与打开的弹出窗口一起可见.剩余的标记应该折叠起来.

The "popped up" marker should be visible, together with the open popup. The remaining markers should collapse.

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

我尝试在 popupopen(和 popupclose)上将标记临时移动到地图(并返回)，但这不起作用:

I've tried to temporarily move the marker to the map (and back) on popupopen (and popupclose), but this does not work:

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

有什么想法吗?

推荐答案

现在 这个 似乎正在工作.我必须添加一个单独的层unclustered，只在集群层处理popupopen，只在非集群层处理popupclose

Now this seems to be working. I had to add a separate layer unclustered, and handle popupopen only in the clustering layer, and popupclose only in the unclustered layer

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 不起作用.

NOTE: I'm not happy with using L.markerClusterGroup for the unclustered layer. But I would not know what else. As long as there's only one marker in that layer, it will work. But to exempt multiple markers from collapsing into a cluster, a different layer must be used. Which one? L.layerGroup does not work.

相关文章