Leaflet自定义TileLayer添加到图层控件报错：Cannot read properties of undefined

我在Leaflet地图中扩展TileLayer来加载航空信息图层，直接把图层添加到地图上能正常运行，但尝试添加到图层控件（layer control）时，出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'setZIndex')

我的代码如下：

export default function AeroInfo() {
    const map = useMap();

    L.TileLayer.Aeronautical = L.TileLayer.extend({
        getTileUrl: function (coords) {
            return "https://api.tiles.openaip.net/api/data/openaip/" + coords.z + "/" + coords.x + "/" + coords.y + ".png?apiKey=APIKEYGOESHERE";
        },
    });

    L.tileLayer.aeroInfo = function () {
        return new L.TileLayer.Aeronautical();
    }

    // L.tileLayer.aeroInfo().addTo(map);

    L.control.layers(null,L.tileLayer.aeroInfo()).addTo(map);
    return null;
}

核心问题 #

L.control.layers的第二个参数要求传入键值对格式的图层集合（键是显示在控件里的图层名称，值是图层实例），你直接传了图层实例，导致控件内部无法正确处理图层对象，从而触发setZIndex的报错。另外，自定义图层的定义放在组件内部会导致每次组件渲染都重新定义类，存在潜在问题。

修改后的代码 #

// 将自定义图层定义移到组件外部，避免重复创建类
L.TileLayer.Aeronautical = L.TileLayer.extend({
    getTileUrl: function (coords) {
        return "https://api.tiles.openaip.net/api/data/openaip/" + coords.z + "/" + coords.x + "/" + coords.y + ".png?apiKey=APIKEYGOESHERE";
    },
});

L.tileLayer.aeroInfo = function () {
    return new L.TileLayer.Aeronautical();
}

export default function AeroInfo() {
    const map = useMap();

    // 创建图层实例
    const aeroLayer = L.tileLayer.aeroInfo();

    // 传入键值对格式的图层对象给控件
    L.control.layers(null, {"航空信息图层": aeroLayer}).addTo(map);
    
    return null;
}

关键说明 #

1. 图层控件参数格式：L.control.layers(baseLayers, overlayLayers)的第二个参数overlayLayers必须是对象，比如{"图层名称": 图层实例}，这样控件才能正确识别并管理图层。
2. 自定义图层定义位置：把图层类的扩展放在组件外部，避免组件每次渲染都重复定义L.TileLayer.Aeronautical，减少性能损耗和意外问题。

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