問題描述

如何在縮小時檢查帶有打開彈出窗口的標記以防止折疊成簇?

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.

這篇關于Leaflet Markercluster:從聚類中免除標記的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！