Как принудительно закрыть паук после добавления новой группы маркеров?

Я использую следующие библиотеки:

  • 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: '&copy; <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

Источник
Другие вопросы по тегам