集群未出现在标记集群和 FeatureGroup.SubGroup 的传单中

Question

我一直在合并 MarketCluster 和来自 Leaflet 的相关 FeatureGroup.SubGroup 插件，以便为我生成的 QGIS2web 地图添加额外的功能。

我的部分要求是可切换的图层，当我从 QGIS 中对图层进行分类时，MarkerCluster 工作得很好，这些图层自动与单独的图层聚类，但情况已不再如此。据我了解，我需要 MarkerCluster.LayerSupport 或 FeatureGroup.SubGroup 插件来处理附加层并仍然提供集群。

我合并了来自 MarkerCluster 的 CSS，来自 MarkerCluster 和 SubGroup 的 JS，并在地图和相应的地方调用了它，但图标实际上并没有聚类 - 下图。

底部的 3 层都在父组 mcg 下，并且都已添加到地图并在插件下调用，所以我不太确定为什么它们不在小范围内聚类？

Var地图代码：

      var map = L.map('map', {
    zoomControl:true, maxZoom:28, minZoom:1
}).fitBounds([[49.00937377692994,-15.999585641644666],[58.71040708512685,14.852158356152763]]),
    mcg = L.markerClusterGroup(), // Could be any other Layer Group type!
    DevelopmentGrp = L.featureGroup.subGroup(mcg, DevelopmentGrp),
    RegenerationGrp = L.featureGroup.subGroup(mcg, RegenerationGrp),
    HealthAndEqualityGrp = L.featureGroup.subGroup(mcg, HealthAndEqualityGrp);

将标记添加到地图和分组的代码：

    var mcg = L.markerClusterGroup(),
        DevelopmentGrp = L.featureGroup.subGroup(mcg),
        HealthAndEqualityGrp = L.featureGroup.subGroup(mcg),
        RegenerationGrp = L.featureGroup.subGroup(mcg);
        
    mcg.addLayer(map);
    
    function style_Development_1_0() {
        return {
            pane: 'pane_Development_1',
    rotationAngle: 0.0,
    rotationOrigin: 'center center',
    icon: L.icon({
        iconUrl: 'markers/Asset 3Development.svg',
        iconSize: [228.0, 228.0]
    }),
            interactive: true,
        }
    }
    
    map.createPane('pane_Development_1');
    map.getPane('pane_Development_1').style.zIndex = 401;
    map.getPane('pane_Development_1').style['mix-blend-mode'] = 'normal';
    var DevelopmentGrp = new L.geoJson(json_Development_1, {
        attribution: '',
        interactive: true,
        dataVar: 'json_Development_1',
        layerName: 'DevelopmentGrp',
        pane: 'pane_Development_1',
        onEachFeature: pop_Development_1,
        pointToLayer: function (feature, latlng) {
            var context = {
                feature: feature,
                variables: {}
            };
            return L.marker(latlng, style_Development_1_0(feature));
        },
    });

    
     function style_HealthAndEquality_2_0() {
        return {
            pane: 'pane_HealthAndEquality_2',
    rotationAngle: 0.0,
    rotationOrigin: 'center center',
    icon: L.icon({
        iconUrl: 'markers/Asset 5HealthAndE.svg',
        iconSize: [228.0, 228.0]
    }),
            interactive: true,
        }
    }
    map.createPane('pane_HealthAndEquality_2');
    map.getPane('pane_HealthAndEquality_2').style.zIndex = 402;
    map.getPane('pane_HealthAndEquality_2').style['mix-blend-mode'] = 'normal';
    
    var HealthAndEqualityGrp = new L.geoJson(json_HealthAndEquality_2, {
        attribution: '',
        interactive: true,
        dataVar: 'json_HealthAndEquality_2',
        layerName: 'HealthAndEqualityGrp',
        pane: 'pane_HealthAndEquality_2',
        onEachFeature: pop_HealthAndEquality_2,
        pointToLayer: function (feature, latlng) {
            var context = {
                feature: feature,
                variables: {}
            };
            return L.marker(latlng, style_HealthAndEquality_2_0(feature));
        },
    });


    function style_Regeneration_3_0() {
        return {
            pane: 'pane_Regeneration_3',
    rotationAngle: 0.0,
    rotationOrigin: 'center center',
    icon: L.icon({
        iconUrl: 'markers/Asset 2Regeneration.svg',
        iconSize: [228.0, 228.0]
    }),
            interactive: true,
        }
    }
    map.createPane('pane_Regeneration_3');
    map.getPane('pane_Regeneration_3').style.zIndex = 403;
    map.getPane('pane_Regeneration_3').style['mix-blend-mode'] = 'normal';
    var RegenerationGrp = new L.geoJson(json_Regeneration_3, {
        attribution: '',
        interactive: true,
        dataVar: 'json_Regeneration_3',
        layerName: 'RegenerationGrp',
        pane: 'pane_Regeneration_3',
        onEachFeature: pop_Regeneration_3,
        pointToLayer: function (feature, latlng) {
            var context = {
                feature: feature,
                variables: {}
            };
            return L.marker(latlng, style_Regeneration_3_0(feature));
        },
    });

调用控件和底图的代码：

              var baseMaps = {};
    
    L.control.layers(baseMaps, {
        '<img src="legend/NorthEastnoinvert_7.png" /> North East nointestvert': layer_NorthEastnoinvert_7,
        '<img src="legend/Transport_6.png" /> Transport': layer_Transport_6,
        '<img src="legend/Strategy_5.png" /> Strategy': layer_Strategy_5,
        '<img src="legend/Multipledeliverablesother_4.png" /> Multipledeliverablesother': layer_Multipledeliverablesother_4,
        '<img src="legend/Regeneration_3.png" /> Regeneration': layer_Regeneration_3,
        '<img src="legend/HealthAndEquality_2.png" /> HealthAndEquality': layer_HealthAndEquality_2,
        '<img src="legend/Development_1.png" /> Development': layer_Development_1,
        "Positron": layer_Positron_0,
        "Development test": DevelopmentGrp,
        "Regeneration test": RegenerationGrp,
        "Health and equality test": HealthAndEqualityGrp,
        }, {
        collapsed: false
        }).addTo(map);
    setBounds();

非常感谢您的任何意见和建议

Answer 1

我现在已经通过使用 MarkerCluster.LayerSupport 并将其添加到 var 映射并签入它来使其工作 - 可能是错误的插件使用，但可能是我的人为错误。

下面的工作代码：

var map = L.map('map', {
    zoomControl: true,
    maxZoom: 28,
    minZoom: 1
})
.fitBounds([[49.00937377692994,-15.999585641644666],[58.71040708512685,14.852158356152763]]),
    mcg = L.markerClusterGroup.layerSupport();

var mcg = L.markerClusterGroup.layerSupport().addTo(map),
control2 = L.control.layers(null, null, {collapsed: false});

mcg.checkIn([
    DevelopmentGrp,
    HealthAndEqualityGrp,
    RegenerationGrp,
]);

control2.addOverlay(mcg, 'Toggle all');
control2.addOverlay(DevelopmentGrp, 'Development');
control2.addOverlay(RegenerationGrp, 'Regeneration');
control2.addOverlay(HealthAndEqualityGrp, 'Health and equality');
control2.addTo(map);

Answer 2

发生的事情是您正确地准备了您的 MarkerClusterGroup 和您的子组：

var mcg = L.markerClusterGroup(),
    DevelopmentGrp = L.featureGroup.subGroup(mcg),

...但后来你是 re-assigning 变量：

var DevelopmentGrp = L.geoJson(data, options)

...因此使初始子组丢失且无用。

要让它工作，只需不要 re-assign 包含您的子组的变量，而是将您的 GeoJSON 图层组添加到其中：

L.geoJson(data, options)
  .addTo(DevelopmentGrp); // Add into the subgroup

集群未出现在标记集群和 FeatureGroup.SubGroup 的传单中

Clusters not appearing in leaflet from Marker Cluster and FeatureGroup.SubGroup

javascript

jquery

markerclusterer

leaflet

leaflet.markercluster