“获课”：itxt.top/9679/
使用 Leaflet.js 创建交互式地图
Leaflet.js 是一个轻量级、开源的 JavaScript 库，用于在网页中创建互动式地图。凭借其简洁的 API 和强大的扩展性，Leaflet.js 已成为开发 Web 地图应用的首选工具。它支持多种地图图层（如 OpenStreetMap、Google Maps、Bing Maps 等），并提供了丰富的功能来显示标记、绘制路线、添加交互功能等。
在这篇文章中，我们将介绍如何使用 Leaflet.js 创建一个基础的地图应用，并逐步学习如何添加标记、信息窗、绘制路径以及自定义地图样式等常见功能。
一、Leaflet.js 入门
1. 安装和配置
首先，你需要将 Leaflet.js 引入到你的 HTML 页面中。你可以通过 CDN 直接引入 Leaflet.js，或者通过 npm 安装。
通过 CDN 引入 Leaflet.js
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet.js 示例</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>
<style>
#map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// 这里编写 Leaflet.js 的代码
</script>
</body>
</html>
通过 npm 安装 Leaflet.js
如果你使用的是 npm 来管理项目依赖，可以通过以下命令安装 Leaflet：
bash
npm install leaflet
在你的 JavaScript 文件中引入 Leaflet：
javascript
import L from 'leaflet';
2. 创建地图
在 Leaflet.js 中，创建一个地图的基本步骤是：创建一个地图容器、设置地图的初始位置和缩放级别，并选择一个底图图层。
javascript
// 创建地图对象，设置初始位置和缩放级别
const map = L.map('map').setView([51.505, -0.09], 13); // 经度和纬度、缩放级别
// 添加 OpenStreetMap 底图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
在上面的代码中：
L.map('map') 创建一个地图实例，'map' 是 HTML 中的容器 ID。
setView([51.505, -0.09], 13) 设置地图的初始位置为伦敦，并将缩放级别设置为13。
L.tileLayer 添加 OpenStreetMap 图层。
3. 调整地图大小
你可以动态调整地图的大小。例如，在页面的窗口大小发生变化时，自动调整地图的大小：
javascript
window.addEventListener('resize', () => {
map.invalidateSize(); // 调整地图尺寸
});
二、添加地图标记
1. 添加简单标记
Leaflet.js 允许你在地图上添加标记来表示特定的位置。你可以使用 L.marker() 方法创建标记，并将其添加到地图上。
javascript
// 创建标记
const marker = L.marker([51.5, -0.09]).addTo(map);
// 添加弹出信息
marker.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
在上面的代码中：
L.marker([51.5, -0.09]) 创建一个标记，位置是伦敦的经纬度。
bindPopup() 方法给标记绑定一个弹出窗口，用户点击标记时会显示该窗口。
2. 添加自定义图标
你可以为标记添加自定义的图标，修改标记的外观。
javascript
const icon = L.icon({
iconUrl: 'https://example.com/icon.png',
iconSize: [38, 38], // 图标大小
iconAnchor: [22, 94], // 图标锚点
popupAnchor: [-3, -76] // 弹出窗口的位置
});
L.marker([51.5, -0.09], { icon: icon }).addTo(map);
三、添加路径和多边形
1. 绘制折线（PolyLine）
你可以在地图上绘制路径（例如，连接多个地标）。使用 L.polyline() 方法来创建折线。
javascript
// 创建折线
const latlngs = [
[51.5, -0.09],
[51.51, -0.1],
[51.52, -0.11]
];
const polyline = L.polyline(latlngs, { color: 'blue' }).addTo(map);
// 缩放到折线
map.fitBounds(polyline.getBounds());
在上述代码中：
L.polyline(latlngs) 创建一条折线，latlngs 是包含多个坐标点的数组。
map.fitBounds() 将地图视图自动调整为适应折线的大小。
2. 绘制多边形（Polygon）
你也可以绘制多边形来表示区域。
javascript
const latlngs = [
[51.5, -0.09],
[51.51, -0.1],
[51.52, -0.09],
[51.51, -0.08]
];
const polygon = L.polygon(latlngs, { color: 'green' }).addTo(map);
3. 绘制圆形（Circle）
如果你需要在地图上绘制一个圆形，可以使用 L.circle() 方法。
javascript
const circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
四、地图交互
1. 监听地图事件
Leaflet.js 提供了许多事件，可以用来监听用户与地图的交互。例如，监听点击事件，获取点击位置的经纬度。
javascript
map.on('click', function(e) {
alert('You clicked the map at ' + e.latlng);
});
2. 鼠标拖动与缩放控制
Leaflet.js 默认提供了地图的拖动和缩放功能，但你也可以根据需要进行自定义。例如，禁用地图缩放：
javascript
map.scrollWheelZoom.disable(); // 禁用滚轮缩放
五、地图图层控制
Leaflet.js 允许你轻松地在多个地图图层之间切换。你可以使用 L.control.layers() 来实现这一功能。
javascript
const satelliteLayer = L.tileLayer('https://{s}.tile.satellites.com/{z}/{x}/{y}.png');
const terrainLayer = L.tileLayer('https://{s}.tile.terrain.com/{z}/{x}/{y}.png');
const baseMaps = {
"Satellite": satelliteLayer,
"Terrain": terrainLayer
};
L.control.layers(baseMaps).addTo(map);
1. 添加天气图层
你还可以添加更多的地图图层，比如天气图层。通过 Leaflet.js 的扩展插件，支持添加实时天气信息、热力图等。
javascript
const weatherLayer = L.tileLayer('https://{s}.tile.openweathermap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://openweathermap.org">OpenWeatherMap</a>'
});
weatherLayer.addTo(map);
六、总结
Leaflet.js 是一个非常强大且易于使用的 JavaScript 库，用于构建交互式地图应用。通过它，你可以轻松实现地图的显示、标记、路径绘制以及与用户的互动。本文介绍了 Leaflet.js 的基本用法，包括如何创建地图、添加标记和路径、以及实现地图交互等功能。
