问用Leaflet.markercluster替换标记

EN

//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();
        }
    };