Question

我正在使用传单地图来显示全世界的火山。单击切换按钮时，将显示所有标记。单击切换按钮时，标记应显示。

我要在其中应用群集标记。它不起作用。

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

Answer 1

欢迎您！

您的代码显示您从volcano构建2套独立的标记： -对于您的MarkerClusterGroup，具有lat和lng属性的对象数组 -对于切换功能，作为传递给Leaflet GeoJSON Layer Group工厂的GeoJSON功能数组。

如果您的volcano包含一系列兼容的GeoJSON功能，则第一个集合（用于MarkerClusterGroup）将无法按照其当前的编码方式工作。

如果您希望切换功能直接处理MarkerClusterGroup，则只需将volcanoPoints添加到MCG中，而不是添加到地图中。您还应该只构建一次，然后切换MCG。

用Leaflet.markercluster替换标记

1 个答案: