用途:本技能用于把现有 Mapbox GL JS 应用迁移到 MapLibre GL JS。两者同源(MapLibre 于 2020 年 12 月从 Mapbox GL JS v1.13 分叉),API 大体相同,主要差异是包名、命名空间、访问令牌和瓦片源。
主要能力与用法:
- 安装:npm install maplibre-gl;卸载 mapbox-gl。
- 导入与 CSS:由 import mapboxgl from 'mapbox-gl' 改为 import * as maplibregl from 'maplibre-gl',CSS 路径改为 maplibre-gl/dist/maplibre-gl.css。v6 仅提供 ES 模块,默认导出与 UMD 包已移除,CDN 用法需按当前发布说明调整。
- 命名空间:把代码中的 mapboxgl 全部替换为 maplibregl,CSS 类前缀 mapboxgl-ctrl 改为 maplibregl-ctrl。
- 移除 mapboxgl.accessToken;瓦片或地理编码密钥按各服务单独配置。
- 替换样式 URL:mapbox://styles/... 在 MapLibre 不可用,需指向非 Mapbox 瓦片源(如 OpenFreeMap 的 https://tiles.openfreemap.org/styles/liberty)。Mapbox Studio 自定义样式需导出 JSON,并替换源 URL、id、source、source-layer 以匹配新瓦片源的图层结构。可用 @maplibre/maplibre-style-spec 校验,Maputnik 调试,gl-style-validate style.json 检查。
- 插件与 API:优先选用 MapLibre 原生或开源替代;地理编码可用 Nominatim、Photon、Pelias、MapTiler Geocoding,路线可用 OSRM、OpenRouteService、Valhalla,注意其使用政策,生产环境需自托管或使用托管服务。
- 兼容性:地图方法、事件、Marker、Popup、控件、图层与 GeoJSON 表达式基本不变。Mapbox v2 独有 API 不会出现在 MapLibre:setFog 应改用 setSky/getSky(注意属性名如 sky-color、horizon-color、fog-color 等,sky 规范标为实验性);FreeCameraOptions 无对应类,需用 calculateCameraOptionsFromCameraLngLatAltRotation 或 calculateCameraOptionsFromTo 得到 CameraOptions 再传给 jumpTo/easeTo/flyTo。
限制与取舍:失去 Mapbox Studio 集成、Mapbox 托管瓦片与样式、Search/Directions/Geocoding API 及官方支持。迁移后需测试地图加载、控件与依赖 API 的功能。资料给出的版本与规范细节属快照,若与 MapLibre 当前官方文档冲突,以官方来源为准。