如何将 Leaflet.Clusters 与选项卡中的两个地图和多个 geoJson 属性一起使用？

Question

我来这里是因为我读了this topic and

我正在寻求使用 SubGroup 插件的帮助。

我正在构建这样的地图

var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
        subdomains: 'abcd',
        maxZoom: 19
    });

然后我为自定义标记添加代码，就像这样

 var ccl18Icon = L.AwesomeMarkers.icon({
        prefix: 'fa', //font awesome rather than bootstrap
        iconColor: 'white',
        markerColor: 'orange', // see colors above
        icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
    });

我添加我的地图

var map = L.map('map')
        .addLayer(cartoDb)
        .setView([46.85, 2.3518], 6);

然后我创建了一个 OnEachFeature 函数，在其中我得到了我所有的 geoJson 属性，以及一个 "layer.on" 函数。像这样

 function onEachFeature(feature, layer) {

        var html = '';
        if (feature.properties.Myfirstproperty) {
            html += '<p class="myfirstproperty">' + feature.properties.Myfirstproperty+ '</p>';
        }
        (....more html)
        layer.on('click', function() {
            $('#layer_infos .fill').html(html);
            if (L.Browser.mobile) {
                $('#infos').addClass("slide"); 
                $('#filters').removeClass('slide');
                $('.hamburger').text('Sélect something').fadeIn();
             }
        })

我复制了这部分，因为我在选项卡中有两个地图，只更改了元素的 id 和 class

然后我从 geoJson 文件中获取所有数据

  var promise = $.getJSON("examen.json");
    promise.then(function(data) {
        var all = L.geoJson(data);


        var ccl18 = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.Category == "ccl18";
            },
            onEachFeature: onEachFeature,
            pointToLayer: function(feature, latlng) {

                return L.marker(latlng, {
                    icon: ccl18Icon
                })
            }
        })

完成所有这些代码后，我创建了点击函数来显示隐藏层，这取决于 chekcbox 过滤器，类似这样。

$("#ccl18").click(function() {
            if (this.checked) {
                map.addLayer(ccl18)
                map.fitBounds(allexamens.getBounds(), {
                    padding: [50, 50]
                });
                map.removeLayer(glucomarker)
            } else {
                map.removeLayer(ccl18)

            }
        });

我 post 所有这些代码，因为我不知道我是否可以在我的配置中使用 SubGroup 插件。我正在寻找的是让用户点击多个复选框过滤器并聚类标记，即使它们来自不同类别；目前，我可以将每个组分别聚类，但不能将不同的组聚在一起。我看到这段代码，来自插件作者：

var parentGroup = L.markerClusterGroup().addTo(map);

var overlays = {};

for (var i = 1; i <= 5; i += 1) {
   overlays['Group ' + i] = L.featureGroup.subGroup(
   parentGroup,
   getArrayOfMarkers()
  ).addTo(map);
 }

 L.control.layers(null, overlays, {
  collapsed: false,
 }).addTo(map);

 function getArrayOfMarkers() {
  var result = [];
  for (var i = 0; i < 10; i += 1) {
   result.push(L.marker();
 }
 return result;
 }

但我不明白如何实现它。有人设法让它与 geoJson 数据一起使用吗？任何帮助将不胜感激!!

谢谢

Answer 1

好的，我终于找到了解决方案。

我只使用 markercluster 插件。

当我获得 geoJsonfile 数据时，我添加以下内容

var promise = $.getJSON("examen.json");
    var clusters = L.markerClusterGroup(); // a new cluster group for my first map
    var clusterade = L.markerClusterGroup(); // a new cluster group for my second map
    promise.then(function(data) {

在我的点击操作（复选框过滤器）中，我将图层添加到群集组，而不是像以前那样直接添加到地图。像这样：

 $("#ccl18").click(function() {
            if (this.checked) {

                 ccl18.addTo(clusters);
                map.fitBounds(allexamens.getBounds(), {
                    padding: [50, 50]
                });
            } else {
                 clusters.removeLayer(ccl18);
                 map.fitBounds(allexamens.getBounds(), {
                    padding: [50, 50]
                });
            }
        });

这是一个 if 语句："add layer to cluster if I click on the checkbox, otherwise remove layer"。然后我将 fitBounds 添加到父层，这让我可以从群集中缩小。

我将此代码添加到我所有的复选框操作中。

然后，在文件的最后，我将集群添加到地图中。

clusters.addTo(map);//my clusters for my first map
clusterade.addTo(map2);//my clusters for my second map

所以现在，当我选中两个复选框时，集群就会显示在地图上

而且当我点击集群时，我可以清楚地看到我不同的标记。

如何将 Leaflet.Clusters 与选项卡中的两个地图和多个 geoJson 属性一起使用？

How can I use Leaflet.Clusters with two maps in tabs and multiples geoJson properties?

cluster-computing

leaflet