MapLibre GL JS 从入门到精通 - 130+实战案例

原创已于 2026-06-03 16:28:37 修改 · 525 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #mapbox #MapLibre GL JS

于 2026-05-27 08:39:23 首次发布

MapLibre GL JS教程专栏收录该内容

56 篇文章

订阅专栏

本课程通过130+个实战案例，系统讲解地图开发的核心技术。适合前端开发者、GIS工程师学习使用。

标签: #MapLibre #WebGL #地图开发 #GIS #JavaScript #前端

📚 课程简介

本课程是MapLibre GL JS的系统性实战教程，包含130+个完整案例，涵盖从基础到高级的所有核心功能。

适合人群

🎯 前端开发者：想学习地图可视化开发
🎯 GIS工程师：想用Web技术展示地理数据
🎯 学生/初学者：对地图开发感兴趣
🎯 产品经理：了解地图技术能力边界

学习收获

✅ 掌握MapLibre GL JS核心API
✅ 能够独立开发地图应用
✅ 理解WebGL地图渲染原理
✅ 获得130+可复用代码示例

—程目录

模块1：入门基础

零基础学会显示地图和基本操作

第1课: 显示地图

第2课: 显示非交互式地图

第3课: 显示MLT地图

第4课: 查看全屏地图

第5课: 显示卫星地图

第6课: 设置俯仰角和方位角

第7课: 禁用地图旋转

第8课: 禁用滚动缩放

第9课: 显示地图导航控件

第10课: 更改Attribution默认位置

第11课: 获取鼠标指针坐标

第12课: 检查WebGL支持

第13课: 哈希路由

第14课: 定位用户位置

第15课: 更改地图语言

模块2：数据图层基础

掌握GeoJSON、矢量/栅格瓦片等数据源

第16课: 添加GeoJSON多边形

第17课: 添加GeoJSON线

第18课: 从一个GeoJSON源添加多个几何体

第19课: 实时更新要素

第20课: 更新GeoJSON多边形

第21课: 绘制GeoJSON点

第22课: 查看本地GeoJSON

第23课: 查看本地GeoJSON（File System Access API））

第24课: 添加矢量瓦片源

第25课: 添加栅格瓦片源

第26课: 添加WMS源

第27课: 添加COG栅格源

第28课: PMTiles源和协议

第29课: 添加Canvas源

第30课: 添加视频

第31课: 添加实时数据

第32课: 显示跨越180度经线的线

第33课: 渲染世界副本

第34课: 使用addProtocol转换要素属性

第35课: 显示带地形高程的混合卫星地图

模块3：样式与可视化

掌握地图样式、符号化、表达式

第36课: 在标签下方添加新图层

第37课: 用按钮改变图层颜色

第38课: 根据缩放级别改变建筑颜色

第39课: 为多边形添加图案

第40课: 添加可拉伸图像

第41课: 向地图添加图标

第42课: 添加生成的图标

第43课: 使用备用图像

第44课: 生成并添加缺失图标

第45课: 显示远程SVG符号

第46课: 用Markers添加自定义图标

第47课: 添加动画图标

第48课: 用数据驱动属性样式化线

第49课: 用表达式创建渐变线

第50课: 用表达式创建虚线渐变线

第51课: 动画化线条

第52课: 显示和样式化富文本标签

第53课: 用Web字体样式化标签

第54课: 用本地字体样式化标签

第55课: 改变标签大小写

第56课: 变量标签放置

第57课: 带偏移的变量标签放置

第58课: 用全局状态过滤图层符号

第59课: 通过文本输入过滤符号

第60课: 通过切换列表过滤符号

模块4：交互与动画

掌握用户交互、相机动画、弹窗

第61课: 添加默认标记

第62课: 创建可拖动标记

第63课: 动画化标记

第64课: 将弹窗附加到标记

第65课: 显示弹窗

第66课: 点击显示弹窗

第67课: 悬停显示弹窗

第68课: 点击符号时居中地图

第69课: 获取鼠标下的要素

第70课: 创建悬停效果

第71课: 点击显示多边形信息

第72课: 用boxZoomEnd回调选择要素

第73课: 飞到位置

第74课: 缓慢飞到位置

第75课: 基于滚动位置飞到位置

第76课: 跳转到一系列位置

第77课: 围绕点动画化相机

第78课: 自定义相机动画

第79课: 适应边界框

第80课: 适应LineString边界

模块5：高级可视化

3D、地形、热力图、聚类、自定义图层

第81课: 3D地形

第82课: 天空、雾、地形

第83课: 3D显示建筑

第84课: 为3D室内映射挤出多边形

第85课: 添加等高线

第86课: 添加山体阴影层

第87课: 添加多方向山体阴影层

第88课: 添加颜色浮雕层

第89课: 创建热力图层

第90课: 在地形上创建热力图层

第91课: 可视化人口密度

第92课: 创建和样式化聚类

第93课: 显示带自定义属性的HTML聚类

第94课: 地球与矢量地图

第95课: 地球与大气层

第96课: 地球与填充挤出层

第97课: 地球上缩放与行星大小关系

第98课: 在地球上添加简单自定义图层

第99课: 在地球上添加带瓦片的自定义图层

第100课: 添加自定义样式层

第101课: 用three.js添加3D模型

第102课: 在地形上用three.js添加3D模型

第103课: 在地球上用three.js添加3D模型

第104课: 用three.js添加带阴影的3D模型

第105课: 用three.js添加3D瓦片

模块6：高级应用与集成

绘图工具、测量、第三方库集成、性能优化

第106课: 用mapbox-gl-draw绘制多边形

第107课: 用terra-draw绘制几何体

第108课: 绘制圆形

第109课: 测量距离

第110课: 创建时间滑块

第111课: 沿路径动画化点

第112课: 动画化点

第113课: 动画化一系列图像

第114课: 动画化符号跟随鼠标

第115课: 创建可拖动点

第116课: 游戏式控制导航地图

第117课: 切换交互

第118课: 协作手势

第119课: 限制地图平移区域

第120课: 自定义地图变换约束

第121课: LOD控制

第122课: 用padding偏移消失点

第123课: 设置地面以上的中心点

第124课: 同步多个地图运动

第125课: 显示地图性能指标

第126课: 用REST API创建deck.gl图层

第127课: 切换deck.gl图层

第128课: 用babylon.js添加3D模型

第129课: Nominatim地理编码

第130课: 区域切换

第131课: 添加RTL脚本支持

第132课: 图层内过滤

第133课: 使用本地图例字符

MapLibre GL JS 和 Mapbox 的关系：核心一句话总结

MapLibre GL JS 是 Mapbox GL JS 的开源社区分叉版（Fork），二者同源、API 高度兼容，但现在是两个完全独立的项目，由不同团队维护。

1. 历史渊源：本来是一家人

Mapbox GL JS 最初是 Mapbox 公司开发的开源 Web 地图引擎（用 BSD 开源协议），是行业最主流的前端地图库。
2020 年，Mapbox 公司决定停止开源，将新版本改为专有商业许可（不能免费商用、不能修改源码）。
社区开发者为了保留完全开源、免费商用的版本，基于 Mapbox GL JS v1.13.0（最后一个开源版）创建了 MapLibre GL JS。

所以：
✅ MapLibre = 开源社区守护的 Mapbox GL JS 免费后代
✅ 它们底层代码、渲染引擎、API 设计几乎完全一样

2. 现在的关系：同源但独立

维度	MapLibre GL JS	Mapbox GL JS (新版)
开源协议	完全开源（MIT），免费商用无限制	专有商业许可，非免费
维护方	全球开源社区（非盈利）	Mapbox 公司
API 兼容性	与 Mapbox GL JS v1/v2 高度兼容	闭源，功能闭源迭代
使用成本	0 成本，可随意修改源码	必须用 Mapbox 服务，按量计费
功能	持续更新，支持最新浏览器、3D、瓦片地图	功能更超前，但绑定 Mapbox 生态

简单说：
你可以把 MapLibre 当成“完全免费、不受公司控制”的 Mapbox GL JS。

3. 关键实用结论

✔ 代码能不能通用？

99% 通用！
如果你原来写 Mapbox GL JS，几乎不用改代码就能直接换成 MapLibre GL JS。

示例（几乎一模一样）：

// Mapbox GL JS
import mapboxgl from 'mapbox-gl';
new mapboxgl.Map({ container: 'map' });

// MapLibre GL JS
import maplibregl from 'maplibre-gl';
new maplibregl.Map({ container: 'map' });