Leaflet学习文档-初识

初识Leaflet

---

---

前言

Leaflet 是一个轻量级、开源的 JavaScript 库，专门用于在网页中创建交互式地图应用。它以简洁的 API 和高度可扩展性著称，适合快速构建 Web GIS（地理信息系统）应用。

---

一、Leaflet是什么？

Leaflet 是一个轻量级、开源的 JavaScript 库，专门用于在网页中创建交互式地图应用。它以简洁的 API 和高度可扩展性著称，适合快速构建 Web GIS（地理信息系统）应用。

1. 轻量高效

仅约 42KB 的压缩代码，加载速度快，适合移动端和性能敏感场景。
无外部依赖，直接通过 HTML script标签或 npm 安装即可使用。

2. 跨平台兼容

支持所有主流浏览器（包括移动端），适配触屏交互（如缩放、拖拽）。

3. 丰富的图层支持

集成多种地图瓦片服务（OpenStreetMap、Mapbox、Google Maps 等）

4. 插件生态

社区提供数百个插件，扩展功能如热力图、聚类标记、地图绘制、3D 效果等（插件代码质量无统一规范）

二、使用步骤

1.引入库

代码如下（示例）：

<!-- 引入 CSS 和 JS -->
<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. 设置地图容器

代码如下（示例）：

<div id="map" style="width: 800px; height: 600px;"></div>

提示：地图容器用于放置地图信息的盒子，一般使用div进行设置，其中必须要有id属性，后续需要根据id来进行设置

---

3. 创建地图

代码如下（示例）

// 初始化地图实例，设置中心坐标和缩放级别
const map = L.map('ma