首页 / Leaflet / 教程
社区精选资源
先看结论
Leaflet 核心很薄,能力大多来自插件,所以"找资源"实际上是在找可靠的插件与官方示例。 这一页按类别整理官方仓库、教程、插件、底图源与问答入口,每条只保留名称、一句说明和它能解决的问题。 插件生态更新节奏差异很大,先看官方插件列表里的维护状态,再决定要不要深入。
先看哪一类
| 当前的处境 | 直接去哪 | 为什么 |
|---|---|---|
| 第一张地图还没跑起来 | Quick Start、官方教程页 | 官方示例都是完整 HTML,复制即可运行 |
| 需要某个功能,不知道有没有插件 | 官方插件列表 | 按类别分组,标注了维护状态与兼容版本 |
| 要换底图或加图层控制 | leaflet-providers | 常见底图源的 URL 与署名信息已整理好 |
| 上万点位渲染卡顿 | markercluster、VectorGrid | 聚合或矢量瓦片,比堆 Marker 更稳 |
| 要绘制编辑要素 | Leaflet-Geoman | 维护活跃,覆盖绘制、编辑与吸附 |
官方仓库与文档
- leafletjs.com:官网首页,给出版本、下载与文档入口。解决的问题:确认 1.9.4 的 CDN 地址与引入顺序。
- API 参考:按类组织的一页式文档,含所有选项、事件与方法。解决的问题:查参数默认值与事件名,避免凭记忆写配置。
- 官方教程与示例:从快速开始到图层、交互、移动端的完整列表。解决的问题:按主题找可运行的示例,而不是只看文字说明。
- 官方插件列表:按类别收录插件,标注维护状态与适用版本。解决的问题:判断一个插件是否还值得用,先看这份官方清单。
- Leaflet/Leaflet:核心源码仓库。解决的问题:想改默认行为或写自定义图层时,直接读实现。
- Releases:版本发布记录。解决的问题:确认 1.9.x 各补丁修了什么,升级时心里有数。
- CHANGELOG:逐版本变更与弃用项。解决的问题:从 1.7 之前升级上来时,定位被移除的接口。
- leaflet(npm):发行包,含
dist/leaflet.css与 ESM 入口。解决的问题:确认版本号与样式文件路径。 - 下载页:官方 CDN、包管理器与源码包入口。解决的问题:拿到带完整性校验的官方地址,避免用第三方镜像。
- 仓库 src 目录:按 layer、control、geometry 拆分的源码结构。解决的问题:定位某个行为的实现位置,写自定义控件时对照。
官方教程:按需挑
- Quick Start:最小可运行地图,含瓦片图层与标记。解决的问题:先跑通一个能拖拽缩放的地图,再谈其他能力。
- GeoJSON 教程:加载 GeoJSON 并按属性设置样式。解决的问题:业务数据上图时,搞清楚
pointToLayer与style的写法。 - 移动端教程:触摸交互、响应式尺寸与高分屏处理。解决的问题:手机上地图拖不动、点击偏移或模糊。
- 分级设色教程:按数值区间给面要素上色并配图例。解决的问题:做统计地图时,颜色分级与图例怎么组织。
插件与开源项目
- Leaflet.markercluster:点聚合插件,缩放时自动合并与展开。解决的问题:上万标记直接渲染会卡死,需要聚合与蜘蛛化展开。
- Leaflet.draw:绘制与编辑工具条。解决的问题:需要基础的画点线面能力,且能接受它的更新节奏较慢。
- Leaflet-Geoman:维护活跃的绘制编辑插件,支持吸附、切割与拖拽顶点。解决的问题:新项目做编辑器时,替代停更较早的 Leaflet.draw。
- Leaflet.heat:基于 canvas 的热力图图层。解决的问题:表达点位密度,又不想引入 WebGL 方案。
- Leaflet.VectorGrid:让 Leaflet 直接渲染 MVT 矢量瓦片。解决的问题:服务端只有矢量瓦片,但项目仍以 Leaflet 为主。
- Leaflet.fullscreen:全屏控件。解决的问题:需要一个与地图容器配合正确的全屏切换,而不是自己处理 resize。
- leaflet-sidebar-v2:可切换的侧栏面板。解决的问题:图层列表、图例与详情面板挤占地图时的布局方案。
- leaflet-providers:常用底图源集合,含 URL 模板与署名要求。解决的问题:换底图时不必逐个找瓦片地址,也避免漏掉署名。
- leaflet-omnivore:把 KML、GPX、CSV、TopoJSON 转成 GeoJSON 图层。解决的问题:上游给的是非 GeoJSON 格式,需要先统一再上图。
- leaflet-ajax:异步加载 GeoJSON 的图层封装。解决的问题:数据接口返回 GeoJSON,需要按需加载与刷新。
- Leaflet.Editable:轻量级编辑扩展,API 简单。解决的问题:只需要拖拽顶点与新建线面,不想引入完整工具条。
- Leaflet.awesome-markers:用图标字体渲染标记。解决的问题:需要按类别显示不同图标,又不想为每种图标准备图片。
- awesome-leaflet:社区维护的 Leaflet 资源清单。解决的问题:想一次性浏览插件、教程与工具的分布。
数据与工具
- geojson.io:在线查看、编辑与导出 GeoJSON。解决的问题:快速核对数据落点与结构,排除数据本身的错误。
- v1.9.4 发布页:该版本的具体修复与产物。解决的问题:确认项目锁定的版本与实际行为一致。
- GitHub Issues:bug 与用法讨论。解决的问题:确认某个异常是核心缺陷还是插件冲突。
社区问答
- Stack Overflow · leaflet 标签:英文问答存量最大。解决的问题:报错、插件冲突与基础用法。
- GIS StackExchange · leaflet 标签:偏 GIS 业务问题。解决的问题:坐标系、瓦片服务、数据格式这类概念性疑问。
- markercluster 的 issue 区:聚合插件的已知限制与浏览器兼容记录。解决的问题:聚合数字错位、展开异常时先看是否已有结论。
- r/gis:GIS 综合社区。解决的问题:插件选型与轻量方案对比的经验交流。
注意事项
- 插件脚本必须放在 Leaflet 之后加载,顺序错了只会得到一个
is not a function报错。 - 聚合与热力图都需要额外引入各自的 CSS,漏掉时数字或色带会错位。
- 底图署名不能省略,
leaflet-providers给出的 attribution 字段要原样保留。
怎么判断一篇教程是否过时
三条线索:版本号是否写明 1.9.x 或至少 1.x(0.7 时代的写法差别很大);
日期是否近两年;API 与依赖是否已废弃——例如仍要求先引 jQuery、用 L.mapbox 这类已下线的扩展、
或依赖 leaflet-src.js 之外的旧构建路径。
核心版本变化不大,真正容易过期的是插件。先查核心版本:
npm view leaflet version
npm view leaflet time.modified
npm view leaflet.markercluster version
再看官方插件列表里该插件的"最后更新"与适用版本。一个两年没提交、README 里还写着 "Leaflet 0.7" 的插件, 即便功能诱人,也应该先评估替换成本。
跑一遍最快。把文章里的代码放进官方 Quick Start 的页面里替换对应部分。
地图能出、插件能加载,才算与 1.9.4 兼容;报 L.xxx is not a function
通常是插件没加载成功或加载顺序错了,而不是文章本身过时。
经纬志(2026)。《社区精选资源》。https://www.jingweizhi.com/leaflet/tutorial/community-picks.html(访问日期 2026-11-03)。