Leaflet加载PostGIS线图层后旧图层交互失效问题求助

嘿，我来帮你分析下为什么添加第二个图层后，第一个图层明明可见却触发不了弹窗和点击事件。看了你的代码，主要是几个细节问题导致的，咱们一步步来修复：

1. 别重复创建Canvas渲染器实例 #

你现在每次点击复选框都会重新创建一个myRenderer，但Leaflet的Canvas渲染器是可以被多个图层共享的。重复创建会导致先添加的图层绑定的渲染器实例被后续操作干扰，最终没法响应鼠标事件。

修复方法：
把渲染器的定义放到全局作用域，只创建一次就行：

// 全局只创建一次渲染器，所有图层共用
var myRenderer = L.canvas({ padding: 0.5, tolerance: 20 });
var trasyAll = L.featureGroup();
var R10;
var WTR;

$('input[name="trasy_checkbox"]').click(function() {
    // 删掉这里重复创建myRenderer的代码
    if (!$(this).is(':checked')) {
        // 你的移除图层逻辑，后面再优化这个部分
    };
    if ($(this).is(':checked')) {
        // 先拿到当前复选框的值，确保checkedTrasa是正确的
        var checkedTrasa = $(this).val();
        $.ajax({
            url:'script.php',
            type:'POST',
            data:{ wybor_trasy: checkedTrasa },
            success: function(response){
                window[checkedTrasa] = L.geoJSON(JSON.parse(response), {
                    // 直接用全局的渲染器，不用每个图层单独设置
                    renderer: myRenderer,
                    onEachFeature: function(feature, layer) {
                        var str = "blahblah";
                        layer.bindPopup(str, { maxWidth: "auto" });
                        layer.setStyle(StanOdcinkaStyle(layer));
                        layer.bindTooltip('<img src="images/r10-13.png" height="20"/>');
                        layer.on('mouseover', function () {
                            this.setStyle({ opacity: 0.6, weight: 6 });
                        });
                        layer.on('mouseout', function () {
                            this.setStyle(StanOdcinkaStyle(this));
                            this.setStyle({ opacity: 1, weight: 4 });
                        });
                    }
                });
                window[checkedTrasa].id = checkedTrasa;
                window[checkedTrasa].addTo(trasyAll);
            }
        });
    }
});
trasyAll.addTo(mymap);

2. 优化图层移除的逻辑 #

你的移除代码里有个未定义的removeTrasa变量，这会导致旧图层根本没被正确删掉，堆积的图层可能会干扰交互。而且直接遍历整个地图的图层不如从trasyAll这个FeatureGroup里移除更高效：

修复后的移除逻辑：

if (!$(this).is(':checked')) {
    var removeTrasa = $(this).val();
    // 从featureGroup里找到要移除的图层
    var layerToRemove = trasyAll.getLayers().find(layer => layer.id === removeTrasa);
    if (layerToRemove) {
        trasyAll.removeLayer(layerToRemove);
        // 顺便清理window上的变量，避免内存浪费
        delete window[removeTrasa];
    }
}

3. 确保checkedTrasa变量的正确性 #

之前的代码里没看到你怎么赋值checkedTrasa，一定要在发起AJAX请求前拿到当前复选框的value，不然动态创建的图层变量会出问题，这也是我上面在AJAX前加var checkedTrasa = $(this).val();的原因。

为什么这些修改能解决问题？ #

• 共用同一个Canvas渲染器，Leaflet能统一管理所有图层的绘制和事件监听，不会出现旧渲染器失效的情况。
• 正确移除图层，避免冗余图层占用资源或者干扰交互事件的触发。
• 确保变量作用域正确，不会因为未定义的变量导致逻辑出错。

你可以先试试这些修改，应该能解决第一个图层无法交互的问题。

内容的提问来源于stack exchange，提问作者Jakub O