Leaflet初始化与缩放时双Tile Layer同时显示问题及需求

你的问题根源在于初始化地图时同时把两个图层都加入了layers配置项，这会让Leaflet同时加载并渲染两个图层——因为Layer1在数组中靠后（层级更高），加载完成后会覆盖Layer2，但Layer2加载速度更快，所以会先显示出来，同时右下角也会叠加显示两个图层的版权信息。

修复方法非常直接：初始化地图时只传入你想要默认显示的单个图层，剩下的交给图层切换控件管理，控件会自动处理图层的显示/隐藏逻辑：

const layer1: L.TileLayer = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
  attribution: 'OpenCycleMap'
});
const layer2: L.TileLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'OpenStreetMap'
});

// 初始化地图时仅添加默认显示的图层（示例为layer1）
const map = L.map(SOME_DIV, {
  center: [54.1109, -115.5322],
  zoom: 5,
  layers: [layer1] // 这里只保留单个默认图层
});

const baseMaps: Record<string, L.TileLayer> = {
  'Layer2': layer2,
  'Layer1': layer1
};

// 控件会自动管理图层切换时的显示/隐藏
L.control.layers(baseMaps).addTo(map);

修改后会实现这些效果：

• 初始化时仅加载并显示指定的默认图层，不会出现双图层叠加闪烁的问题
• 右下角版权信息只会显示当前活跃图层的内容
• 图层切换控件正常工作，切换时Leaflet会自动隐藏当前图层、显示选中的图层

如果想默认显示Layer2，只需要把layers数组里的内容换成[layer2]即可。

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