Leaflet 单击“图层控制”对话框，无法删除可变宽度覆盖

我正试图使它，使覆盖线的宽度变化取决于哪个层是在使用。也就是说，我有以下代码：

var params = {
    color: 'blue',
    opacity: 0.75,
    smoothFactor: 1
};

var latlngs = [[30.267222, -97.743056],[31.267222, -96.743056]];

tempParams = Object.assign(params, {weight: 10});
satelliteLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {weight: 3});
lightLines.addLayer(L.polyline(latlngs, tempParams));
tempParams = Object.assign(params, {weight: 5});
streetsLines.addLayer(L.polyline(latlngs, tempParams));

var hasOverlay = false;

mymap.on('baselayerchange', function(e) {
    switch (e.name) {
        case 'Light':
            if (hasOverlay) {
                lightLines.addTo(mymap);
                streetsLines.removeFrom(mymap);
                satelliteLines.removeFrom(mymap);
            }
            break;
        case 'Streets':
            if (hasOverlay) {
                lightLines.removeFrom(mymap);
                streetsLines.addTo(mymap);
                satelliteLines.removeFrom(mymap);
            }
            break;
        case 'Satellite':
            if (hasOverlay) {
                lightLines.removeFrom(mymap);
                streetsLines.removeFrom(mymap);
                satelliteLines.addTo(mymap);
            }
    }
});

mymap.on('overlayadd', function(e) {
    console.log('overlayadd called');
    hasOverlay = true;
});

当我打开“演示”覆盖时，这非常有效，但当我关闭覆盖时，如果我处于默认“灯光”层以外的层中，则效果不太好。当我在“光”层以外的层中时，会发生什么情况？线不会被移除。它只会在“灯光”层中被删除

为了克服这个问题，我添加了以下内容：

mymap.on('overlayremove', function(e) {
    console.log('overlayremove called');
    lightLines.removeFrom(mymap);
    streetsLines.removeFrom(mymap);
    satelliteLines.removeFrom(mymap);
});

这就是事情开始变得奇怪的时候。为了删除除默认“灯光”层以外任何层的所有“演示”覆盖层线，我现在必须双击覆盖控制对话框中的“演示”覆盖层链接，以使“演示”覆盖层线消失。我希望它在单击一次后消失（如果我不尝试动态调整宽度，这就是它通常的工作方式）

根据

console.log

，我看到第一次更改图层时会调用overlayremove，但overlayadd不会。这向我建议，

lightLines.removeFrom（mymap）正在触发
overlayremove
事件。但是如果是这样，为什么不调用
overlayadd
事件呢？不管怎样，如果我取消选中，然后选中右上角的“演示”覆盖链接，什么都不会发生。至少不是我第一次点击它。该行仍然存在，并且未调用
overlayadd
或
overlayremove
。但是当我点击“Demo”覆盖链接时，就会调用
overlayadd
。之后我取消选中它时，该行消失，最后调用了
overlyremove

不管怎样，我不理解这种行为

有什么想法吗

我只是想让它，使可变宽度覆盖线消失，无论是什么层显示后，在菜单中的覆盖条目已取消选中

下面是一个独立的演示：

L.Control.Layers在您的代码中只负责
lightLines

var overlays = {
    'Demo': lightLines
};
L.control.layers(baseMaps, overlays).addTo(mymap);

单击控件时，控件不会处理卫星线路。此外，当覆盖被删除时，您永远不会将
hasOverlay
放入
false

因此，根据您正在执行的一组用户操作，将发生不同的行为。例如：

打开地图，默认为灯光，演示处于关闭状态
单击演示（
hasOverlay=true
并添加
灯线
）
单击街道。
灯线
被删除（仍在控件中处于选中状态），
街道线
被添加，
hasOverlay
为
true
单击演示。不会引发事件，因为
灯线
不在地图上，而
街线
仍在地图上，因为控件不知道它
单击演示。
灯线
将添加到地图中
单击演示。
lightDemo
将从地图中删除，并引发
overlayremove
remove事件，因此三个覆盖层将被删除
要修复它，我将采用与您不同的方法。不要使用三个不同的覆盖层，而只使用一个。只侦听
baselayerchange
事件。不要在此回调中手动处理从映射中添加或删除覆盖层。只需使用
setStyle
更改其样式即可