如何实现Leaflet底图层的平滑切换？

我有一个基于Leaflet的简单地图示例（取自Leaflet官方图层控制示例），包含两个底图层。切换底图层时会出现闪烁现象，请问是否有实现平滑切换的方法？
9年前曾有类似提问但未得到解决方案，希望如今已有新的解决办法。
另外，不知为何代码片段在此处无法运行，但在本地环境是正常的。

代码示例 #

<html>
<head>
    <title>A Leaflet map!</title>

    <!-- leaflet v 1.0.3 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

    <style>
        #map {
            height: 100%
        }
    </style>
</head>
<body>

<div id="map"></div>

<script>
    var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    });

    var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
    });

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [osm]
    });

    var baseMaps = {
        "OpenStreetMap": osm,
        "OpenStreetMap.HOT": osmHOT
    };

    var layerControl = L.control.layers(baseMaps, {}).addTo(map);
</script>
</body>
</html>

解决方案 #

平滑切换底图层的实现方案 #

Leaflet原生底图层切换是先隐藏旧图层再加载新图层，空白间隙导致闪烁。以下两种方法可实现平滑过渡：

方法1：自定义透明度动画+预加载

核心逻辑：先让新图层在旧图层下方完成加载，再通过透明度渐变完成图层切换，避免空白闪烁。

修改后的完整代码：

<html>
<head>
    <title>A Leaflet map!</title>

    <!-- 建议升级到稳定版Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
        #map {
            height: 100vh;
            margin: 0;
        }
        .leaflet-control-layers button {
            display: block;
            width: 100%;
            padding: 8px 12px;
            margin: 4px 0;
            border: none;
            background: white;
            cursor: pointer;
            border-radius: 4px;
        }
        .leaflet-control-layers button:hover {
            background: #f5f5f5;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script>
    // 初始化图层时关闭自动添加
    var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap',
        autoAdd: false
    });

    var osmHOT = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France',
        autoAdd: false
    });

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [osm]
    });

    // 自定义图层切换函数
    function switchBaseLayer(newLayer) {
        // 获取当前活跃的底图层
        var currentLayer = Object.values(map._layers).find(layer => 
            layer instanceof L.TileLayer && layer._map === map
        );
        if (!currentLayer || currentLayer === newLayer) return;

        // 添加新图层到地图底层
        newLayer.addTo(map);
        newLayer.setZIndex(currentLayer.getZIndex() - 1);
        newLayer.setOpacity(0);

        // 等待新图层加载完成后执行动画
        newLayer.whenReady(() => {
            var opacity = 1;
            const interval = setInterval(() => {
                opacity -= 0.05;
                currentLayer.setOpacity(opacity);
                newLayer.setOpacity(1 - opacity);
                
                if (opacity <= 0) {
                    clearInterval(interval);
                    currentLayer.remove();
                    newLayer.setOpacity(1);
                }
            }, 20);
        });
    }

    // 自定义图层控制面板
    var baseControl = L.control({ position: 'topright' });
    baseControl.onAdd = function() {
        const div = L.DomUtil.create('div', 'leaflet-control-layers leaflet-bar');
        div.innerHTML = `
            <button onclick="switchBaseLayer(osm)">OpenStreetMap</button>
            <button onclick="switchBaseLayer(osmHOT)">OpenStreetMap.HOT</button>
        `;
        return div;
    };
    baseControl.addTo(map);
</script>
</body>
</html>

方法2：使用第三方插件

可以使用专门的Leaflet平滑切换插件，这类插件封装了预加载和动画逻辑，只需引入后简单配置即可。注意选择与你使用的Leaflet版本兼容的插件（比如适配1.x版本的插件）。

关于代码无法在线运行的问题 #

你提供的代码使用了较老的Leaflet 1.0.3版本，在线环境可能存在资源加载兼容性问题。建议升级到稳定版（如1.9.4），替换对应的CSS和JS链接，新版本不仅修复了部分跨域和加载问题，也优化了图层性能。

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