Заменить маркеры на Leaflet.markercluster - PullRequest
Новая
       22

Заменить маркеры на Leaflet.markercluster

0 голосов
/ 20 июня 2019

Я использую карту Leaflet, чтобы показать вулкан по всему миру. При нажатии кнопки переключения отображаются все маркеры. При нажатии на кнопку переключения должны появиться маркеры.

Там я хочу применить кластерный маркер. Это не работает. 

//Creating map options
    var mapOptions = {
        center: [40.4168, -3.7038],
        zoom: 2,
        minZoom: 2,
        maxZoom: 18,
        maxBounds: [
            [-75, -190],
            [90, 190]
        ],
        maxBoundsViscosity: 0.5,
    }

    // Creating a map object
    var map = new L.map('map', mapOptions);

    // Add Tile Layer and add to map
    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=8vFNrApGjV6jRicu4ins').addTo(map);

    //Adding geoJson data and adding the marker and popup

    var geojsonMarkerOptions = {
        radius: 3,
        fillColor: "#FF0000",
        color: "#000",
        weight: 1,
        opacity: 0.2,
        fillOpacity: 0.5
    };
    //Marker Cluster

    var markerClusters = L.markerClusterGroup();

    for ( var i = 0; i < volcano.length; ++i )
    {
      var popup = volcano[i].name +
                  '<br/>' + volcano[i].properties. NAME_+
                  '<br/><b>Type:</b> ' + volcano[i].properties.TYPE_ +
                  '<br/><b>Location:</b> ' + volcano[i].properties.LOCATION;


      var m = L.marker( [volcano[i].lat, volcano[i].lng], {icon: geojsonMarkerOptions} )
                      .bindPopup( popup );

      markerClusters.addLayer( m );
    }

    map.addLayer( markerClusters );


    //-Creating interactive buttons:Toggler button to show on/off worldwide volcanoes

    var volcanoPoints = null;


    // Create event listener for add Volcanoes Worldwide Button
    document.getElementById("addButton").addEventListener("click", addVolcanoWorldwide);

    // Add volcano worldwide function
    function addVolcanoWorldwide() {
        volcanoPoints.addTo(map);
    };

    function addVolcanoWorldwide() {
        if (map.hasLayer(volcanoPoints)) {
            removeVolcanoWorldwide();
        };
        volcanoPoints = L.geoJson(volcano, {
            pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng, geojsonMarkerOptions);
            },
            onEachFeature: volcanoSearch
        }).addTo(map);
    };


    // Create event listener for the remove Volcanoes Worldwide Button
    document.getElementById("removeButton").addEventListener("click", removeVolcanoWorldwide);

    // Remove volcano worldwide function
    function removeVolcanoWorldwide() {
        volcanoPoints.remove(map);
    };

    document.getElementById("toggleButton").addEventListener("click", toggleVolcanoes);

    // Toggle Volcanoes
    function toggleVolcanoes() {
        if (map.hasLayer(volcanoPoints)) {
            removeVolcanoWorldwide();
        }
        else {
            addVolcanoWorldwide();
        }
    };

1 Ответ

0 голосов
/ 21 июня 2019

Добро пожаловать в ТАК!

Ваш код показывает, что вы создаете 2 отдельных набора Маркеров из volcano: - для вашей MarkerClusterGroup, как массив объектов со свойствами lat и lng - для вашей функции переключения, в виде массива функций GeoJSON, которые вы передаете фабрике Leaflet GeoJSON Layer Group.

Если ваш volcano содержит массив совместимых функций GeoJSON, то первый набор (для MarkerClusterGroup) не должен работать так, как он в данный момент кодируется.

Если вы хотите, чтобы функция переключения переключалась непосредственно на вашу MarkerClusterGroup, просто добавьте volcanoPoints в MCG, а не на карту. Вы также можете создать его только один раз, а затем переключить MCG.

...