Question

我使用以下库：

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>

Answer 1

将问题中提供的代码粘贴到Plunker中进行实时演示：https://plnkr.co/edit/ZzKRs5NnrJeWfBKWOA3R?p=preview

Hum看起来像是在Leaflet.markercluster中遇到了一个错误。

当您在图层控件中勾选SubGroup时，前者将使用父组（您的情况为mcg）addLayers方法if it exists。

在MCG addLayer（单个）correctly unspiderfies时，addLayers（批量）中缺少此步骤。

使用更简单的示例重现错误：https://plnkr.co/edit/G4GAjax5fi3LUqJRLLPN?p=preview（没有Leaflet.FeatureGroup.SubGroup插件）

然后修复这个错误应该很简单：只需要非常明显，与how it is done in addLayer类似：

if (this._map && this._unspiderfy) {
  this._unspiderfy();
}

更新了简单示例：https://plnkr.co/edit/lgvRtiRo7nh9VaWuI0RM?p=preview

更新了您的代码：https://plnkr.co/edit/CjjcHlZW6vpJ6075Ma3F?p=preview

添加一组新标记后如何强制关闭蜘蛛？

1 个答案: