引言
在本篇文章中，我们将深入探讨Leaflet中的图层控制功能，帮助你在地图上展示多种地图数据和切换不同的地图图层。图层控制功能是任何交互式地图应用中非常重要的一部分，因为它允许用户根据需要切换不同的地图视图，比如切换卫星地图、街道地图、地形图等。
通过本篇教程，你将学习如何使用Leaflet的图层控制功能，来实现更丰富的地图展示效果。
前情提要：
【地图视界-Leaflet1】快速搭建你的第一个地图-CSDN博客
什么是图层控制？
图层控制（Layer Control）是指在地图中添加多个图层（Layer），并通过控件允许用户在不同图层之间切换。图层可以是底图、覆盖物或其他各种地图数据源。Leaflet提供了非常灵活的API来处理图层，最常见的图层类型包括：
- 底图图层（Tile Layers）：如街道图、卫星图等。
- 标记图层（Marker Layers）：地图上显示的标记。
- 自定义图层：例如GeoJSON图层或矢量图层等。
添加多个底图图层
Leaflet允许你为地图添加多个底图图层，并使用图层控制器让用户在它们之间切换。我们来看一个例子，展示如何在地图上添加多个底图图层，并提供图层切换功能。
1. 添加多个底图图层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet图层控制示例</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 600px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13); // 初始化地图，设置中心和缩放级别
// 创建底图图层
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var satelliteLayer = L.tileLayer('https://{s}.tile.satellite.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// 添加默认底图（OpenStreetMap）
osmLayer.addTo(map);
// 创建图层控制器
var baseMaps = {
"街道地图": osmLayer,
"卫星地图": satelliteLayer
};
// 添加图层控制器到地图
L.control.layers(baseMaps).addTo(map);
</script>
</body>
</html>
2. 解释代码
- 我们创建了两个底图图层：
osmLayer（OpenStreetMap）和satelliteLayer（卫星图层）。这两个图层通过不同的URL模板加载不同的地图数据。 - 通过
L.control.layers(baseMaps)创建图层控制器，并将其添加到地图上。 baseMaps对象包含了要显示的所有底图图层，我们通过L.control.layers()让用户可以在“街道地图”和“卫星地图”之间进行切换。
3. 运行效果
在浏览器中打开这个代码，你将看到一个地图，初始时显示的是街道地图。你可以在左上角的图层控制面板中选择切换到卫星地图。这个功能非常适合展示不同地图视图。
添加叠加图层
除了底图，我们还可以添加叠加图层（Overlay Layers），例如标记、GeoJSON图层等。下面是一个例子，展示如何添加标记图层和GeoJSON图层，并通过图层控制器让用户控制是否显示这些图层。
步骤4：添加叠加图层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet叠加图层示例</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 600px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13); // 初始化地图
var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 创建标记图层
var markerLayer = L.layerGroup([
L.marker([51.5, -0.09]).bindPopup("伦敦"),
L.marker([51.505, -0.08]).bindPopup("伦敦塔桥")
]);
// 创建GeoJSON图层
var geoJsonLayer = L.geoJSON({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-0.09, 51.505]
},
"properties": {
"name": "位置1"
}
}]
});
// 创建叠加图层控制器
var overlayMaps = {
"标记图层": markerLayer,
"GeoJSON图层": geoJsonLayer
};
// 添加图层控制器到地图
L.control.layers(null, overlayMaps).addTo(map);
// 将标记图层添加到地图
markerLayer.addTo(map);
</script>
</body>
</html>
步骤5：解释代码
markerLayer是一个包含多个标记的图层，这些标记通过L.layerGroup创建并组合成一个图层。geoJsonLayer是一个GeoJSON图层，我们用GeoJSON格式的数据表示一个点，并将其添加到地图。overlayMaps包含了两个叠加图层：标记图层和GeoJSON图层。用户可以通过图层控制器来选择是否显示这些图层。
步骤6：运行效果
在浏览器中运行代码，你将看到地图上有两个叠加图层。用户可以通过图层控制器选择显示或隐藏标记图层和GeoJSON图层。
总结
在本篇文章中，我们学习了如何使用Leaflet的图层控制功能，添加多个底图图层和叠加图层。通过图层控制，用户可以灵活地在不同的地图视图之间切换，或选择是否显示特定的图层。你可以根据实际需求，添加更多的图层类型，如热力图、路线图等，让你的地图应用更具交互性。
在后续的文章中，我们将进一步探讨如何为地图添加更多自定义功能，敬请期待！