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

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

<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>

//将地图居中
var map=L.map（'map'）.setView（[54.233669，-4.406027]，6）；
//归属
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=REMOVED'{
属性：“映射和复制；”，
id:“地图盒。街道”
}).addTo（地图）；
//为数据创建空的图层组
var LayerUTMGroundHazards=L.layerGroup（）；
var LayerUTMAirspace=L.layerGroup（）；
//设计特征的样式
功能设置样式（特性）{
返回{
fillColor:feature.properties.fillColor，
颜色：feature.properties.strokeColor，
fillOpacity:feature.properties.fillOpacity，
不透明度：feature.properties.strokeOpacity
};
}
//构建守护者UTM
函数getGuardianUTMdata（）{
//清除当前图层内容
LayerUTMGroundHazards.clearLayers（）；
layerutmailspace.clearLayers（）；
//定义我们想要包含的内容
功能（功能）{
如果（feature.properties.category==“groundHazard”）返回true
}
功能（特性）{
如果(
（feature.properties.category==“空域”| | feature.properties.category==“机场”）
&&feature.properties.detailedCategory！==“英国：frz”
)返回真值
}
//构建层
取回（“https://example.com/json?n=“+map.getBounds（）.getNorth（）+”&e=“+map.getBounds（）.getEast（）+”&s=“+map.getBounds（）.getSouth（）+”&w=“+map.getBounds（）.getWest（），{标题：{'Authorization'：'REMOVED'，X-AA-DeviceId'：'mySite}”）
.then（函数（responseGuardianUTM）{return responseGuardianUTM.json（）}）
.then（函数（dataGuardianUTM）{
//创建图层：地面危险
var featuresUTMGroundHazards=L.geoJson（dataGuardianUTM{
过滤器：防止危险，
风格：setStyle，
pointToLayer:function（feature，latlng）{返回L.marker（latlng，{icon:L.icon（{iconUrl:feature.properties.iconUrl，iconSize:[25,25]，}），}）}，
onEachFeature:function（feature，layer）{layer.bindpoop（feature.properties.name）；}，
});
//将L.GeoJSON实例添加到空的layergroup
LayerUMGroundHazards.addLayer（功能SutmgroundHazards.addTo（地图）；
});
//其他层在这里（从本例中删除）
}
//如果地图移动，则更新Guardian UTM图层
on（'dragend'，function（）{getGuardianUTMdata（）；}）；
on（'zoomend'，function（）{getGuardianUTMdata（）；}）；
//图层控件
var layerControl=新的L.Control.Layers（空{
“空域限制”：分层MAIRSPACE，
“地面危险”：分层危险
//其他层在这里（从本例中删除）
}).addTo（地图）；

问题在于，每次移动或缩放贴图时，所有图层复选框都会重置为再次选中，而不管在移动贴图之前选中了多少。当地图移动时，他们不尊重/记住自己的状态

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

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

您每次都（重新）添加

LayerUTMGroundHazards

。这条线在这里

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

…不仅在

图层危险

中添加

featureOutMgroundHazards

，还在

地图中添加
图层危险

并引述:

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

因此，当您执行
LayerUTMGroundHazards.addTo（map）时，复选框重置。
您每次都（重新）添加
LayerUTMGroundHazards
。这条线在这里

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

…不仅在
图层危险
中添加
featureOutMgroundHazards
，还在
地图中添加
图层危险

并引述:

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

因此，当您执行
LayerUTMGroundHazards.addTo（map）时，复选框将重置。
表面上看，您的代码看起来正常，没有理由重置图层控件中图层组的状态。你能创建一个JSFIDLE吗？嗨，我不知道我是否能在不透露API键和域名的情况下创建一个FIDLE。除非有我可以使用的公共geojson示例？也许你可以拦截一个具有代表性的数据块，并将其静态加载到fiddle中？感谢你的支持，我刚刚添加了一个工作fiddle来演示这个问题。从表面上看，你的代码看起来不错，没有理由重置图层控件中图层组的状态。你能创建一个JSFIDLE吗？嗨，我不知道我是否能在不透露API键和域名的情况下创建一个FIDLE。除非有我可以使用的公共geojson示例？也许你可以拦截一个具有代表性的数据块并将其静态加载到fiddle中？感谢支持，我刚刚添加了一个工作fiddle来演示这个问题。我明白了！因此，通过替换
LayerUTMGroundHazards.addLayer（featuresUTMGroundHazards.addTo（map））带有
图层MgroundHazards.addLayer（功能SutmGroundHazards）问题已解决！谢谢