带有 onchange 事件侦听器的自定义传单控件 - 您是否传递图层名称或传单 ID？

Question

在为 Leaflet 制作选项卡式控制菜单时，我将复选框的 ID 设置为组的名称，然后将该 ID 调用到一个函数中，该函数是输入的 onclick 的一部分。

当我用 me.id 调用它时，如下所示，我得到一个

 leaflet.js:2361 Uncaught Error: The provided object is not a Layer.
at i.addLayer (leaflet.js:2361:28)
at i.addLayer (leaflet.markercluster.layersupport.js:6:6275)
at RgnCtrlChk (index.html:1217:7)
at HTMLInputElement.onclick (VM18957 -1.859:1224:25)

或者类似地 Cannot create property '_leaflet_id' on string custom control based on the method I use

当我用 this._leaflet_id 调用它时，我得到

 leaflet.markercluster.layersupport.js:6 Uncaught TypeError: Cannot read properties of undefined (reading '_mcgLayerSupportGroup')
at i.addLayer (leaflet.markercluster.layersupport.js:6:6203)
at RgnCtrlChk (index.html:1217:7)
at HTMLInputElement.onclick (VM18921 -2.090:1224:25)

我不知道是否是我使用了层的名称（这不是它们在传单中的调用方式），或者我是否完全错过了它。

我的代码如下： 对于 onclick 中调用的 if/else 删除/添加图层

 function RgnCtrlChk(me) {
    if(map.hasLayer(me.id)){
    map.removeLayer(me.id);
    console.log(me.id)
    }else{
    map.addLayer(me.id);
    console.log(me.id);
    }};

，然后根据先前定义的图层名称在填充的复选框列表中创建此图层，但可能不使用 Leaflet 使用的名称？

var cats = ["Development","Regeneration","Health and Equality","Strategy","Transport","MultipleDeliverables"];
        var catslayers = ["DevelopmentGrp","RegenerationGrp","HealthAndEqualityGrp","StrategyGrp","TransportGrp","MultipledeliverablesotherGrp"]

        for (var i = 0; i < cats.length; i++) {
            var label = document.createElement('label');
                label.id = cats[i];
                tabCtrlPane2SectionDiv.appendChild(label);
                var div = document.createElement('div');
                label.appendChild(div);
                    var checkbox = document.createElement('input');
                    checkbox.id = catslayers[i];
                    checkbox.type = "checkbox";
                    checkbox.setAttribute("class","leaflet-control-layers-selector");
                    checkbox.setAttribute("onclick","return RgnCtrlChk(this)");
                    div.appendChild(checkbox);
                    var span = document.createElement('span');
                    div.appendChild(span);
                        span.appendChild(document.createTextNode(cats[i]));
                    }

有没有更简单的方法可以在不弄乱私有 _leaflet_id 的情况下做到这一点？

编辑：

然后，当首先调用图层变量时

var layer = map._layers.mcg[me.id];
        
        if(map.hasLayer(layer)){
        console.log(layer);
        map.removeLayer(layer);
        }else{
        map.addLayer(layer);
        console.log(layer);
        }};

会抛出此错误 - 我认为这是因为之前调用它的 MarkerCluster/LayerSupport 中存在分组？

leaflet.markercluster.layersupport.js:6 Uncaught TypeError: Cannot read properties of undefined (reading '_mcgLayerSupportGroup')
    at i.addLayer (leaflet.markercluster.layersupport.js:6:6203)
    at RgnCtrlChk (index.html:1220:7)
    at HTMLInputElement.onclick (VM20824 0.2204:1226:25)

检查图层

var mcg = L.markerClusterGroup.layerSupport().addTo(map),
            control2 = L.control.layers(null, null, {collapsed: false}),
            RegionCtrl = L.control.layers(null, null, {collapsed: false});

        mcg.checkIn([
            DevelopmentGrp,
            HealthAndEqualityGrp,
            RegenerationGrp,
            MultipledeliverablesotherGrp,
            TransportGrp,
            StrategyGrp
            ]);

上述代码中创建了 mcg 组并在将子组附加到 map._layers.mcg[me.id] 时 ；该组本身没有定义让我觉得我没有正确调用它？

index.html:1214 Uncaught TypeError: Cannot read properties of undefined (reading 'DevelopmentGrp')
    at RgnCtrlChk (index.html:1214:31)
    at HTMLInputElement.onclick (VM20752 0.2135:1226:25)

Answer 1

在使用 hasLayer、addLayer 和 removeLayer 之前，您需要先获取图层：

var layer = map._layers[YOUR_LEAFLET_ID]

该函数如下所示：

function RgnCtrlChk(me) {
    var layer = map._layers[me.id];

    if(map.hasLayer(layer)){
        map.removeLayer(layer);
        console.log(layer)
    }else{
        map.addLayer(layer);
        console.log(layer);
    }
}

但我不明白如何您可以从 html 元素 “return RgnCtrlChk(this)” 获取 leafletId。

有没有一种更简单的方法可以在不弄乱私有_leaflet_id的情况下做到这一点？

Leaflet id 的公共函数是 L.stamp(object)

Answer 2

没有通过 JavaScript 发送单击的复选框，而是采用 jQuery 方法，效果很好。

$(".p2input").change(function(){
        var layerClicked = window[$(this).attr("id")];
            console.log(layerClicked);
        if(map.hasLayer(layerClicked)){
            map.removeLayer(layerClicked);
        }else{
            map.addLayer(layerClicked);
          }});