本课程通过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课: 查看本地GeoJSONFile 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 JSMapbox 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 JSimportmapboxglfrommapbox-gl;newmapboxgl.Map({container:map});// MapLibre GL JSimportmaplibreglfrommaplibre-gl;newmaplibregl.Map({container:map});✔ 现在该用哪个想免费、商用、可控 → 选 MapLibre GL JS强烈推荐必须深度使用 Mapbox 官方服务 → 只能用 Mapbox GL JS目前绝大多数开源项目、商业网站都已经迁移到MapLibre GL JS。4. 最精简总结MapLibre GL JS 是从 Mapbox GL JS 分叉出来的开源继任者API 几乎完全兼容代码可以无缝切换MapLibre 免费开源无限制新版 Mapbox 闭源收费现在前端地图开发首选 MapLibre GL JS总结血缘MapLibre GL JS 是 Mapbox GL JS 的开源社区分支现状二者独立发展MapLibre 完全免费开源使用API 高度兼容学习成本一样优先用 MapLibre