Как принудительно закрыть паук после добавления новой группы маркеров?
Я использую следующие библиотеки:
- leaflet.js
- leaflet.markercluster.js
- leaflet.subgroup.js
и мой собственный сценарий.
У меня есть 3 типа маркеров, все в разных подгруппах. 11 маркеров находятся в одном месте. Когда я открываю кластер, показывается паук, при снятии отметки с 1 типа маркера, паук закрывается и счетчик показывает правильное значение. Когда я снова открываю кластер, показывается измененный паук.
Проверка типа маркера не помещает дополнительный маркер-паук на экран, но также не закрывает паук.
Как я могу заставить паука закрыться?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bee-Idees kaart</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<script type='text/javascript' src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.featuregroup.subgroup@1.0.2/dist/leaflet.featuregroup.subgroup.js'></script>
</head>
<body>
<div id="map" style="height: 580px; border: 1px solid #AAA;"></div>
</body>
<script>
markers = [
{
"name": "Moordrecht",
"lat": 52.019716,
"lng": 5.183973,
"marker": "green"
},
{
"name": "Zoetermeer",
"lat": 52.046985,
"lng": 4.478968,
"marker": "red"
},
{
"name": "Gouda",
"lat": 52.021616,
"lng": 4.687917,
"marker": "green"
},
{
"name": "Gouda 2",
"lat": 52.021616,
"lng": 4.687917,
"marker": "blue"
},
{
"name": "Gouda 3",
"lat": 52.021616,
"lng": 4.687917,
"marker": "red"
}
];
</script>
<script>
var iconBase = 'css\\icons\\';
// Standard fields
var groupLabel = [];
groupLabel[0] = "Red";
groupLabel[1] = "Blue";
groupLabel[2] = "Green";
var map = L.map('map', {
center: [52.021616, 4.85],
zoom: 10
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);
var mcg = L.markerClusterGroup(),
group0 = L.featureGroup.subGroup(mcg),
group1 = L.featureGroup.subGroup(mcg),
group2 = L.featureGroup.subGroup(mcg),
control = L.control.layers(null, null, { collapsed: false }), i, a, title, m;
mcg.addTo(map);
var markerClusters = L.markerClusterGroup();
for (var i = 0; i < markers.length; ++i) {
var iconName = iconBase + markers[i].marker + ".png";
var myIcon = L.icon({ iconUrl: iconName, iconAnchor: [20, 40] })
var popup = '<h2>' + markers[i].name + '</h2>';
var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon, title: markers[i].name} )
.bindPopup( popup );
if (markers[i].marker === "red") { m.addTo(group0);}
else if (markers[i].marker === "blue") { m.addTo(group1); }
else if (markers[i].marker === "green") { m.addTo(group2); }
}
control.addOverlay(group0, groupLabel[0]);
control.addOverlay(group1, groupLabel[1]);
control.addOverlay(group2, groupLabel[2]);
control.addTo(map);
group0.addTo(map);
group1.addTo(map);
group2.addTo(map);
map.addLayer(mcg);
map.on('overlayadd', function() {
// How can I close the spider
});
map.on('overlayremove', function() {
});
</script>
</html>
1 ответ
Вставьте код, указанный в вашем вопросе, в Plunker для демонстрации в реальном времени: https://plnkr.co/edit/ZzKRs5NnrJeWfBKWOA3R?p=preview
Hum выглядит так, как будто вы столкнулись с ошибкой в https://github.com/Leaflet/Leaflet.markercluster.
Когда вы отметите в своей подгруппе в Layers Control, первый будет использовать родительскую группу (mcg
в твоем случае) addLayers
метод, если он существует.
Пока MCG addLayer
(одиночный) правильно spiderfies, этот шаг отсутствует в addLayers
(Партии).
Воспроизведение ошибки с более простым примером: https://plnkr.co/edit/G4GAjax5fi3LUqJRLLPN?p=preview (без плагина Leaflet.FeatureGroup.SubGroup)
Тогда это должно быть довольно просто исправить эту ошибку: просто unspiderfy, как это делается в addLayer
:
if (this._map && this._unspiderfy) {
this._unspiderfy();
}
Обновленный простой пример: https://plnkr.co/edit/lgvRtiRo7nh9VaWuI0RM?p=preview
Обновил ваш код: https://plnkr.co/edit/CjjcHlZW6vpJ6075Ma3F?p=preview