2

我使用以下库：

  • 传单.js
  • 传单.markercluster.js
  • 传单.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>
4

1 回答 1

0

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

Hum 看起来你遇到了Leaflet.markercluster中的错误。

当您在图层控件中勾选您的子组时，前者将使用父组（mcg在您的情况下）的addLayers方法（如果存在） 。

虽然 MCG addLayer(single)正确地 unspiderfiesaddLayers ，但(batch)中缺少此步骤。

使用更简单的示例重现错误：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

于 2018-03-08T00:56:07.070 回答