01.认识 MapLibre GL

JuliusDeng
10 阅读5分钟

MapLibre 学习指南：文章导航

在线预览地址：env-00jy66xyyn4y-static.normal.cloudstatic.cn/maplibre-ba…

base 代码仓库地址：

如果这个系列对你有帮助，欢迎给仓库点一个 Star,代码仓库可以拉取到完整的学习代码，在docs目录下有规划良好的.md学习文档，希望可以帮助到你（请给个免费的start哦）。你的支持是我持续更新和完善 MapLibre 学习内容的动力，也能帮助更多正在学习 WebGIS / MapLibre 的前端同学找到这份资料。[个人微信: 1576554007 欢迎一起学习交流]

第一阶段：入门基础（第 1-4 节）

节次标题核心内容文档路径
01认识 MapLibre GL JSMapLibre 简介与生态、与 Mapbox 的关系、开源许可、应用场景、与其他地图库（Leaflet/OpenLayers/Cesium）对比src/docs/stage1/01.认识MapLibre.md
02环境搭建与第一张地图Vue3+Vite 项目创建、安装 MapLibre GL JS、创建第一张地图（Map 构造函数参数详解）、地图容器与响应式尺寸src/docs/stage1/02.环境搭建与第一张地图.md
03地图基础操作缩放/平移/旋转/倾斜、flyTo/easeTo/jumpTo 动画方法、fitBounds 自适应范围、地图事件监听（click/move/zoom/load）src/docs/stage1/03.地图基础操作.md
04地图控件NavigationControl、ScaleControl、GeolocateControl、FullscreenControl、AttributionControl、自定义控件（IControl 接口）src/docs/stage1/04.地图控件.md

01. 认识 MapLibre GL JS

什么是 MapLibre GL JS？

MapLibre GL JS 是一个开源的 JavaScript 地图渲染库，基于 WebGL 技术，能在浏览器中高效渲染矢量瓦片地图。它从 Mapbox GL JS v1.13 分叉而来，由社区维护，采用 BSD-3-Clause 许可证，完全免费、无商业限制。

诞生背景

2020年12月，Mapbox 将其 GL JS 库从开源的 BSD 许可切换为专有许可（v2.0+），要求使用者必须持有 Mapbox 访问令牌。这一变化促使社区从 v1.13 分叉出 MapLibre GL JS，继续以开源方式发展。

核心特性

1. WebGL 矢量渲染

  • 使用 GPU 加速渲染矢量瓦片，地图平滑流畅
  • 支持无级缩放，任意级别都清晰锐利（不像栅格瓦片会模糊）
  • 渲染性能远优于传统 DOM/Canvas 方案

2. 强大的样式系统

  • 完整的 MapLibre Style Specification
  • 支持数据驱动样式（根据属性值动态着色、设置大小等）
  • 表达式系统（["get"], ["case"], ["interpolate"] 等）

3. 丰富的图层类型

图层类型说明典型用途
fill多边形填充行政区域、地块
line线段道路、轨迹、边界
symbol文本和图标地名标注、POI 图标
circle圆点散点分布图
heatmap热力图密度分析
fill-extrusion3D 拉伸建筑物 3D
raster栅格卫星影像、底图
hillshade山体阴影地形效果

4. 3D 能力

  • 3D 地形：通过 raster-dem 数据源 + setTerrain 开启真实地形
  • 3D 建筑：fill-extrusion 图层实现建筑物拉伸
  • Globe 模式：v5 新增地球视图模式
  • 天空效果：Sky Layer 渲染逼真的天空

5. 完全开源

  • 许可证：BSD-3-Clause
  • 无需 API Key（可使用免费瓦片源）
  • 无调用限制、无水印
  • 社区活跃，GitHub 7000+ Stars

与其他地图库对比

MapLibre vs Leaflet

对比维度MapLibre GL JSLeaflet
渲染技术WebGLDOM/Canvas
矢量瓦片✅ 原生支持❌ 需插件
性能（大数据）⭐⭐⭐⭐⭐⭐⭐
包体积~250KB~42KB
学习曲线中等低
3D 支持✅❌
适合场景复杂数据可视化简单地图展示

结论：如果只是放几个标记点、简单展示，Leaflet 足够。如果需要矢量瓦片、数据驱动样式、大数据量渲染，选 MapLibre。

MapLibre vs OpenLayers

对比维度MapLibre GL JSOpenLayers
矢量瓦片✅ 原生✅ 原生
OGC 标准 (WMS/WFS)⚠️ 有限✅ 完整
多坐标系❌ 仅 3857✅ 任意
绘制工具⚠️ 需插件✅ 原生
样式表达式✅ 强大⚠️ 不同语法
API 设计现代、简洁传统、复杂

结论：传统 GIS 项目（WMS/WFS/多坐标系）选 OpenLayers。Web 端数据可视化、追求美观和性能选 MapLibre。

MapLibre vs Cesium

对比维度MapLibre GL JSCesium
核心定位2D/2.5D 地图3D 地球
包体积~250KB~1MB+
3D 地形✅ 基础✅ 专业级
BIM/CIM❌✅ 3D Tiles
性能要求中等高
移动端✅ 优秀❌ 较差

结论：需要 3D 地球、数字孪生、航空航天选 Cesium。2D 地图 + 轻量 3D 选 MapLibre。两者可组合使用。

生态系统

核心库

  • maplibre-gl-js：浏览器端地图渲染
  • maplibre-native：移动端原生 SDK（iOS/Android）
  • maplibre-rs：Rust 实现的渲染引擎

常用配套工具

  • Martin：Rust 编写的矢量瓦片服务器（支持 PostGIS）
  • Tippecanoe：GeoJSON → 矢量瓦片转换工具
  • Turf.js：空间分析计算库（距离、面积、缓冲区等）
  • maplibre-gl-draw：地图绘制工具插件
  • PMTiles：单文件瓦片格式（无需瓦片服务器）

免费瓦片源

瓦片源类型说明
OpenStreetMap栅格https://tile.openstreetmap.org/{z}/{x}/{y}.png
ESRI World Imagery栅格 (卫星)https://server.arcgisonline.com/...
CARTO栅格 (多主题)亮色/暗色/标签等多种风格
MapTiler矢量免费套餐有调用限制
Protomaps矢量 (PMTiles)开源自托管方案

典型应用场景

  1. 专题地图 — 分级设色图、热力图、区域数据可视化
  2. 实时追踪 — 车辆/物流/外卖骑手位置追踪
  3. 智慧城市 — 城市管理、设施巡检、管网可视化
  4. 农业监测 — 土壤检测、农田管理、作物分布
  5. 数据看板 — 地理数据仪表板、区域统计
  6. 数字孪生 — 园区/建筑 3D 轻量化展示

学习建议

  1. 先掌握基础 API（Map 构造函数、图层、数据源）
  2. 理解 Style Specification（这是 MapLibre 的核心）
  3. 练习表达式系统（数据驱动样式是面试加分项）
  4. 通过实战项目巩固（本课程第八阶段）
  5. 阅读官方示例，动手复现

参考链接

📌 下一节：02. 环境搭建与第一张地图

avatar
文章
阅读
粉丝