Leaflet中TileLayer文件扩展名的动态配置问题

嘿，我看你现在遇到的是Leaflet里要根据访问路径甚至瓦片的坐标、层级来动态设置TileLayer文件扩展名的问题对吧？刚好之前折腾过类似的需求，给你几个实用的解决思路，直接结合你现有的代码改就行～

首先，Leaflet的TileLayer其实支持用函数来动态生成每个瓦片的URL，这比固定字符串模板灵活太多，完全能满足你“不同路径、不同z/x/y用不同扩展名”的需求。

先结合你现有的代码逻辑，给你改个实际可用的版本：

// Funkcja do ustawiania odpowiedniej mapy na podstawie ścieżki
function setupMap() {
    let baseTilePath; // 改成基础路径，不带扩展名
    let minZoom;
    let maxZoom;
    
    // Pobranie bieżącej ścieżki URL
    const currentPath = window.location.pathname;

    // Sprawdzenie ścieżki i ustawienie odpowiednich wartości
    if (currentPath.includes('/white_orchard/index.html')) {
        baseTilePath = '/resources/maps/white_orchard/{z}/{x}/{y}';
        minZoom = 2;
        maxZoom = 5;
    } else if (currentPath.includes('/velen_novigrad/index.html')) {
        baseTilePath = '/resources/maps/hos_velen/{z}/{x}/{y}';
        minZoom = 1;
        maxZoom = 6;
    } else {
        console.error('Nieznana ścieżka mapy');
        return;
    }

    // 用动态函数生成瓦片URL，处理扩展名逻辑
    const tileLayer = L.tileLayer((tileCoord) => {
        let extension = '.jpg'; // 默认扩展名
        
        // 针对white_orchard的特殊规则：z=2且x=2时用png
        if (currentPath.includes('/white_orchard/index.html')) {
            if (tileCoord.z === 2 && tileCoord.x === 2) {
                extension = '.png';
            }
        }
        // 你还可以加其他路径的特殊规则，比如velen某个层级用其他扩展名
        // else if (currentPath.includes('/velen_novigrad/index.html')) {
        //     if (tileCoord.z === 3) {
        //         extension = '.png';
        //     }
        // }

        // 替换路径里的z/x/y占位符，加上扩展名
        return baseTilePath
            .replace('{z}', tileCoord.z)
            .replace('{x}', tileCoord.x)
            .replace('{y}', tileCoord.y) + extension;
    }, {
        minZoom: minZoom,
        maxZoom: maxZoom
    }).addTo(map); // 这里假设你的map实例已经创建好了

    // 原来的平均zoom计算逻辑可以保留，比如用来设置初始zoom
    const avgZoom = Math.round((minZoom + maxZoom) / 2);
    map.setZoom(avgZoom);
}

这个方法的核心就是利用TileLayer的函数式URL生成：每个瓦片加载时都会调用这个函数，传入当前瓦片的z/x/y坐标，你可以根据自己的规则随便改扩展名——不管是按路径分、按zoom层级分、甚至按x/y坐标分，都能灵活处理。

另外给你提个小建议：测试的时候最好打开浏览器的开发者工具，看Network面板里的瓦片请求URL是不是符合预期，避免因为坐标判断错了导致404。

备注：内容来源于stack exchange，提问作者Vergil Sparda