使用 Leaflet.js 进行 Web 地图开发：新手入门指南

在 WebGIS 开发中，Leaflet.js 凭借其轻量级（核心仅约 40KB）、移动端友好以及极其简单的 API，成为了广受欢迎的开源 JavaScript 地图库。本文将带您一步步构建一个基础的 Web 地图，并演示如何在地图上展示空间标记和 GeoJSON 数据。

1. 快速接入 Leaflet.js

开发 Leaflet 地图非常简单，我们只需要在 HTML 中引入 Leaflet 的 CSS 和 JavaScript 文件即可：

<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>

2. 初始化地图与加载底图

我们在地图容器中进行初始化，并加载 OpenStreetMap 的免费切片作为底图：

var map = L.map('map').setView([39.9042, 116.4074], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap'
}).addTo(map);

3. 添加标记（Marker）与弹窗（Popup）

在地图上标注特定地点非常直观：

var marker = L.marker([39.9042, 116.4074]).addTo(map);
marker.bindPopup("你好！北京！").openPopup();

4. 在 Leaflet 中加载 GeoJSON 数据

Leaflet 原生支持 GeoJSON 格式。我们可以直接通过 L.geoJSON 方法将空间地理要素绘制到地图上（注意坐标顺序为 [经度, 纬度]）：

L.geoJSON(geojsonFeature).addTo(map);