经纬志
首页 / MapLibre / 教程

社区精选资源

先看结论

MapLibre 是 Mapbox GL JS 的开源分支,资料常与 Mapbox 混在一起,版本与 API 前缀容易看串。 这一页只收 MapLibre 自己的入口:官方仓库、示例、样式规范、演示底图与自建瓦片工具, 每条附一句说明和它解决的问题。读完这一页不会更懂渲染原理,但能少走"照着 Mapbox 旧文写 MapLibre"的弯路。

最后验证 2026-11-03 · MapLibre GL JS 4.x · 更新 2026-10-29 · 引用本文

先看哪一类

当前的处境直接去哪为什么
没有底图,想先跑起来demotiles官方演示瓦片,免费、无需 token
样式写了但图层不显示样式规范逐字段说明,能直接定位非法字段
中文标签变成方框font-maker、glyphs 配置字体切片缺失,需要自己生成 PBF
要自建瓦片服务Martin、OpenMapTiles从数据到 MVT 的完整链路
手上的代码用的是 mapboxgl迁移指南前缀、选项与已移除能力的对照表

官方仓库与文档

  • maplibre.org:项目官网,汇总 GL JS、Native、样式规范与工具链入口。解决的问题:先分清各子项目边界,避免把 Native 的文档套到 JS 上。
  • MapLibre GL JS 文档:安装、初始化与各功能的说明。解决的问题:确认 4.x 的引入方式与最小示例。
  • 官方示例:按功能分类的可运行示例,覆盖图层、交互、动画与三维地形。解决的问题:需要"能改参数"的完整代码时先在这里找。
  • API 参考:Map、Source、Layer 与事件的完整接口。解决的问题:查方法签名与事件对象字段。
  • maplibre/maplibre-gl-js:源码与 issue。解决的问题:文档没写清的行为,直接读实现或搜讨论。
  • Releases:版本发布记录。解决的问题:确认某特性从哪个小版本开始可用。
  • CHANGELOG:逐版本变更与移除项。解决的问题:4.x 升级时定位被改名的选项。
  • 仓库 src 目录:按模块拆分的渲染与交互实现。解决的问题:写自定义图层或排查渲染顺序时对照源码。
  • maplibre-gl(npm):发行包,含 dist/maplibre-gl.css 与 ESM 入口。解决的问题:确认版本号与样式文件路径。
  • MapLibre Tile 规范:新一代矢量瓦片格式(MLT)的规范正文。解决的问题:了解瓦片格式的演进方向与压缩、解码上的收益。

样式规范与示例数据

  • 样式规范:逐字段定义 sources、layers、expressions 与 sprite/glyphs。解决的问题:写样式时确认字段是否合法,定位"图层不显示"的原因。
  • maplibre-style-spec 仓库:规范的源文件与校验工具。解决的问题:需要离线查规范或做自动化校验时使用。
  • demotiles 样式文件:官方示例样式 JSON,可直接作为起点。解决的问题:没有设计稿时,用一个结构完整的样式跑通流程。
  • demotiles 演示站:官方免费瓦片服务,无需 token。解决的问题:测试交互与样式时不必先申请任何账号。
  • maplibre/demotiles:演示瓦片与样式的生成脚本。解决的问题:想自建同类演示服务时参考其构建方式。
  • 示例:显示地图:最小初始化代码。解决的问题:确认 4.x 的 new maplibregl.Map() 配置项。
  • 官方插件页:社区插件的收录清单与用法入口。解决的问题:需要绘制、方向、三维等扩展能力时,先看有没有现成插件。
  • Font Maker:在线生成 glyphs PBF 字体切片。解决的问题:中文或特殊字符标签显示为方框、glyphs 路径 404。
  • Maputnik 样式编辑器:可视化编辑 MapLibre 样式并导出 JSON。解决的问题:手写样式容易漏字段,用它对照预览更快。

开源项目与工具

  • Martin:Rust 写的瓦片服务器,支持 PostGIS、MBTiles 与 PMTiles。解决的问题:需要自建矢量瓦片服务时的服务端选型。
  • OpenMapTiles:可自托管的矢量瓦片 schema 与工具链。解决的问题:不想依赖商业底图供应商,又要有完整的道路与 POI 数据。
  • openmaptiles 仓库:数据导入与切片脚本。解决的问题:从 OSM 数据生成 MVT 的完整流程。
  • maplibre-native:iOS、Android 与桌面的原生实现。解决的问题:移动端原生应用接入同一套样式规范。
  • Native 开发文档:原生端的能力、构建与接入说明。解决的问题:确认某项能力在原生端是否等价支持。
  • maplibre-rs:Rust 实现的跨平台实验项目。解决的问题:关注非浏览器环境的渲染方案时作参考。
  • maplibre-react-native:React Native 绑定。解决的问题:RN 项目里替换掉需要 token 的旧地图组件。
  • maplibre-gl-directions:路径规划插件。解决的问题:需要起终点选择与路线绘制,又不想自己写交互。
  • awesome-maplibre:社区资源清单。解决的问题:一次性浏览 MapLibre 生态里的库、工具与示例。

社区问答

  • Stack Overflow · maplibre 标签:英文问答。解决的问题:初始化、样式与集成类的具体报错。
  • GIS StackExchange · maplibre-gl 标签:偏 GIS 业务问题。解决的问题:坐标系、瓦片服务与数据源配置的疑问。
  • GitHub Issues:bug 与行为讨论。解决的问题:确认异常是已知缺陷还是用法有误。
  • r/gis:GIS 综合社区。解决的问题:MapLibre 与 Mapbox、Leaflet 的选型对比讨论。

注意事项

  • glyphs 与 sprite 是独立资源,路径错了只影响文字与图标,底图仍然正常,容易被误判成样式没问题。
  • 样式根节点的 version 必须为 8,其它数值会被直接拒绝加载。
  • 自建瓦片服务要同时处理 CORS 与 maxzoom,否则缩放到底层会白屏而不是报错。

怎么判断一篇教程是否过时

三条线索:版本号是否写明 4.x(1.x 与 4.x 的选项差异不小); 日期是否近两年;API 是否已废弃——最直接的信号是全文用 mapboxgl 命名空间、要求填 accessToken,或引用 mapbox:// 之外的专有协议。 这类文章即便能跑,也是在讲 Mapbox,不是 MapLibre。

版本与发布时间以 npm 为准:

npm view maplibre-gl version
npm view maplibre-gl time.modified
npm view maplibre-gl dist-tags

再对照 CHANGELOG 的 Breaking Changes,确认文中用到的选项没有被移除。 样式相关的判断则看规范版本:version 必须为 8, 出现其他数值的 style.json 基本是更早的规范或别的产品。

最快的验证。把文章里的样式 JSON 贴进 demotiles 演示站加载。 能出图说明样式结构合法;只出底图不出业务图层,通常是 source 名与 layer.source 对不上,或图层顺序被盖住。

引用本文

经纬志(2026)。《社区精选资源》。https://www.jingweizhi.com/maplibre/tutorial/community-picks.html(访问日期 2026-11-03)。