本文旨在解决 Leaflet 地图初始化时多个瓦片图层同时加载导致显示异常的问题。通过分析问题现象和原因，提出了一种更有效的解决方案：在地图初始化时仅添加一个默认显示的图层，并通过图层控件实现图层之间的切换，从而避免了图层覆盖和加载顺序带来的视觉问题，提升用户体验。
Leaflet 是一个流行的 JavaScript 库，用于构建交互式地图。在使用 Leaflet 时，我们经常需要添加多个瓦片图层，并允许用户在这些图层之间切换。然而，如果在地图初始化时同时添加多个图层，可能会出现一些问题，例如图层覆盖、加载顺序不一致等，导致地图显示异常。本文将介绍一种更有效的解决方案，以避免这些问题。
问题描述
在 Leaflet 中，如果在初始化地图时同时添加多个瓦片图层，可能会遇到以下问题：
- 图层覆盖： 后添加的图层会覆盖先添加的图层，导致只能看到最上面的图层。
- 加载顺序： 不同图层的加载速度可能不同，导致某些图层先加载完成并显示，然后被其他图层覆盖。
- 属性信息重复： 如果多个图层都显示在地图上，可能会出现属性信息重复显示的问题。
以下是一个示例代码，演示了这个问题：
const layer1 = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
attribution: 'OpenCycleMap'
});
const layer2 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap'
});
const map = L.map('map', {
center: [54.1109, -115.5322],
zoom: 5,
layers: [layer1, layer2] // 同时添加两个图层
});
const baseMaps = {
'Layer2': layer2,
'Layer1': layer1
};
L.control.layers(baseMaps).addTo(map);在这个例子中，layer1 和 layer2 都会被添加到地图上。由于 layer2 在 layer1 之后添加，它会覆盖 layer1，导致只能看到 layer2。此外，由于两个图层同时加载，可能会出现短暂的 layer2 显示，然后被 layer1 覆盖的情况。
解决方案
为了解决这个问题，我们可以在地图初始化时只添加一个默认显示的图层，然后使用图层控件来切换不同的图层。
以下是修改后的代码：
const layer1 = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
attribution: 'OpenCycleMap'
});
const layer2 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap'
});
const map = L.map('map', {
center: [54.1109, -115.5322],
zoom: 5,
layers: [layer1] // 只添加一个默认图层
});
const baseMaps = {
'Layer2': layer2,
'Layer1': layer1
};
L.control.layers(baseMaps).addTo(map);在这个修改后的代码中，我们在地图初始化时只添加了 layer1。layer2 仍然被添加到图层控件中，用户可以通过控件切换到 layer2。这样，就可以避免图层覆盖和加载顺序带来的问题。
代码解释
- L.map(SOME_DIV, { layers: [layer1] }): 这一行代码非常关键。 通过仅在初始化时添加 layer1，我们确保了地图启动时只显示一个图层。
- L.control.layers(baseMaps).addTo(map): L.control.layers 创建一个图层控件，允许用户切换 baseMaps 中定义的图层。 baseMaps 是一个包含图层名称和图层对象的键值对。
总结
在 Leaflet 地图初始化时，如果需要添加多个瓦片图层，建议只添加一个默认显示的图层，然后使用图层控件来切换不同的图层。这样可以避免图层覆盖、加载顺序不一致等问题，提升用户体验。这种方法不仅简单易懂，而且可以有效地解决多图层显示问题，是 Leaflet 开发中的一个常用技巧。
