传单：每次地图移动或缩放时都会重置图层复选框状态

Question

我有以下代码从 API 获取一些远程 GeoJSON 并在 Leaflet 地图上显示结果：

<script>

    // Center the map
    var map = L.map('map').setView([54.233669, -4.406027], 6);


    // Attribution
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=REMOVED', {
        attribution: 'Map &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
        id: 'mapbox.streets'
    }).addTo(map);


    // Create an empty layergroup for the data
    var LayerUTMGroundHazards = L.layerGroup();
    var LayerUTMAirspace = L.layerGroup();


    // Style the features
    function setStyle(feature) {
        return {
            fillColor: feature.properties.fillColor,
            color: feature.properties.strokeColor,
            fillOpacity: feature.properties.fillOpacity,
            opacity: feature.properties.strokeOpacity
        };
    }


    // Build Guardian UTM
    function getGuardianUTMdata() {


        // Clear the current Layer content
        LayerUTMGroundHazards.clearLayers();
        LayerUTMAirspace.clearLayers();


        // Define what we want to include
        function FuncGroundHazards(feature) {
            if (feature.properties.category === "groundHazard") return true
        }
        function FuncAirspace(feature) {
            if (
                (feature.properties.category === "airspace" || feature.properties.category === "airport")
                && feature.properties.detailedCategory !== "uk:frz"
                ) return true
        }



        // Build the layers
        fetch("https://example.com/json?n=" + map.getBounds().getNorth() + "&e=" + map.getBounds().getEast() + "&s=" + map.getBounds().getSouth() + "&w=" + map.getBounds().getWest(), { headers: { 'Authorization': 'REMOVED', 'X-AA-DeviceId': 'mySite' } })
          .then(function (responseGuardianUTM) { return responseGuardianUTM.json() })
          .then(function (dataGuardianUTM) {

              // Create Layer: Ground Hazards
              var featuresUTMGroundHazards = L.geoJson(dataGuardianUTM, {
                  filter: FuncGroundHazards,
                  style: setStyle,
                  pointToLayer: function (feature, latlng) { return L.marker(latlng, { icon: L.icon({ iconUrl: feature.properties.iconUrl, iconSize: [25, 25], }), }) },
                  onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.name); },
              });
              // Add the L.GeoJSON instance to the empty layergroup
              LayerUTMGroundHazards.addLayer(featuresUTMGroundHazards).addTo(map);

          });


          // other layers are here (removed from this example)

    }



    // Update the Guardian UTM layer if the map moves
    map.on('dragend', function () { getGuardianUTMdata(); });
    map.on('zoomend', function () { getGuardianUTMdata(); });


    // Layer controls
    var layerControl = new L.Control.Layers(null, {
        'Airspace Restrictions': LayerUTMAirspace,
        'Ground Hazards': LayerUTMGroundHazards
        // other layers are here (removed from this example)
    }).addTo(map);


</script>

问题是每次移动或缩放地图时，所有图层复选框都会再次重置为已检查，无论在地图移动之前检查了多少。当地图移动时，它们不会尊重/记住自己的状态。

鉴于上面的代码，我如何存储或保留我拥有的多个图层中的每一个的复选框状态，以便在每次移动地图时都不会重置它们？

编辑： 这是一个工作小提琴。从“Ground Hazards”中删除复选框，然后移动或缩放地图，您将看到它如何再次在框中打勾

https://jsfiddle.net/hdwz1b6t/1/

Answer 1

您每次都（重新）添加LayerUTMGroundHazards。这一行在这里...

      // Add the L.GeoJSON instance to the empty layergroup
      LayerUTMGroundHazards.addLayer(featuresUTMGroundHazards).addTo(map);

...不仅将featureUTMGroundHazards 添加到layerUTMGroundHazards，它还（重新）将layerUTMGroundHazards 添加到map。

并引用https://leafletjs.com/examples/layers-control/：

图层控件足够智能，可以检测我们已经添加了哪些图层，并设置了相应的复选框和单选框。

所以当您执行LayerUTMGroundHazards.addTo(map); 时，复选框会重置。