经纬志
首页 / Leaflet / 教程

社区精选资源

先看结论

Leaflet 核心很薄,能力大多来自插件,所以"找资源"实际上是在找可靠的插件与官方示例。 这一页按类别整理官方仓库、教程、插件、底图源与问答入口,每条只保留名称、一句说明和它能解决的问题。 插件生态更新节奏差异很大,先看官方插件列表里的维护状态,再决定要不要深入。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-29 · 引用本文

先看哪一类

当前的处境直接去哪为什么
第一张地图还没跑起来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)。