Как я могу использовать Leaflet.Clusters с двумя картами во вкладках и кратными гео Json свойствам?

Question

Я здесь, потому что я прочитал эту топи c и эту

Мне нужна помощь в использовании плагина 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, внутри которой я получаю все свои свойства geo Json, и функцию "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 и класс элементов

Затем я получаю все данные из файла geo Json file

  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)

            }
        });

Я публикую весь этот код, потому что я не знаю если я могу использовать плагин 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;
 }

, но я не понимаю, как его реализовать .. Кому-то удалось заставить его работать с гео Json данными? Любая помощь будет оценена !!

Спасибо

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, который говорит: «добавить слой в кластер, если я нажму на флажок, в противном случае удалите слой». И я добавляю fitBounds на родительский слой, который позволяет мне уменьшать масштаб из кластера.

Я добавляю этот код ко всем моим действиям с флажками.

Затем, в самом конце моего файла Я просто добавляю кластеры на карты.

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

Итак, теперь, когда я отмечаю два флажка, кластер отображается на карте

И когда я нажимаю на кластер, я ясно вижу свои различные маркеры.