MapLibre GL JS v6.0.0 不是一次可以直接替换依赖的常规升级。官方发布说明将发行方式、浏览器图形能力、TypeScript 编译目标、样式校验与事件模型同时列为破坏性变化。对仍有 CDN 脚本、旧构建链或长期运行的 WebGIS,正确的顺序是先验证进入页面的模块、可用的 WebGL2、地图样式和异常路径,再让业务图层迁入新版本。

本文依据 MapLibre GL JS v6.0.0 的官方 GitHub Release 整理迁移验收方法,所有版本事实均以该一手发布说明为准。

可核查事实

  • MapLibre GL JS v6.0.0 于 2026 年 7 月 22 日发布,发布说明说明它汇集了 v6 的各个预发布变更。
  • v6 改为仅提供 ESM 分发 maplibre-gl.mjs,不再发布 maplibre-gl.jsmaplibre-gl-csp.js 两个 UMD 包。
  • 旧的 <script src="…/maplibre-gl.js"> 接入需要改为 <script type="module">;默认导入也需要改为命名导入或 import * as maplibregl
  • ESM 构建会以真实 URL 加载 worker,CSP 不再需要为该 worker 配置 worker-src blob:
  • v6 移除了 WebGL1,运行时要求 WebGL2;官方将此与线透明度、Terrain3D 改进及多项缺陷修复相关联。
  • TypeScript 编译目标更新到 ES2022,以减少转译、缩小包体并依赖较新的 JavaScript 特性。
  • styleimagemissing 变成仅通知事件;按需提供缺失图片应改用可异步的 Map.setMissingStyleImageResolver
  • 样式规范升级到 v25,遇到旧表达式时改为抛出 warning 级别错误,而不是静默失败。

这些变化并不等于每个项目都必须重写地图。它们说明旧项目的失败位置会前移:从“页面加载后偶发空白”变成模块没有加载、设备没有 WebGL2、样式被指出具体问题,或依赖了已取消的内部行为。

核心机制

ESM-only 改变的是地图运行的装配方式。旧 UMD 页面通常把脚本放在普通 script 标签中,依赖全局变量和 CSP 专用 bundle;v6 把主包、worker 和模块解析交给 ESM 语义。迁移时必须验证 HTML 标签、打包器产物、CDN MIME 类型、跨域 worker URL 与 CSP 一起成立。只把 npm 版本号升级成功,不能证明线上浏览器拿到的是新地图模块。

WebGL2 的要求则是能力边界。地图应用应在创建地图前记录浏览器、GPU 与 WebGL2 可用性;能力缺失时给出明确业务提示或进入简化页面,不要把初始化异常伪装成数据为空。官方说明提到的线透明度和 Terrain3D 改进,是选择升级的性能与表现收益,不能替代目标设备的实际测试。

样式和事件变化属于行为合同。旧表达式不再应靠静默失败蒙混过去,缺失图标也不该继续依赖 styleimagemissing 回调去补图。把样式 warning、图片 resolver 请求和地图 error 事件纳入日志,才能区分数据问题、样式问题和客户端能力问题。

GIS 场景

以一个道路、行政区、点位符号、栅格底图和地形共存的业务地图为样本。先用生产的 style JSON 与同一份矢量瓦片、DEM、sprite 和图标清单,在目标浏览器打开 v5 基线和 v6 候选。页面入口分别覆盖 npm 构建、CDN 模块以及嵌入式业务页面;设备样本至少覆盖桌面 Chrome、Safari 和受管终端。

灾害态势、车辆调度或地形浏览等场景更不能只检查首屏。持续平移缩放、切换底图、断网重连、快速筛选和缺失图标触发时,才会经过 worker、样式校验和 resolver 路径。记录失败时的 URL、CSP、WebGL2 信息、样式位置和 source/layer ID,才能让发布后的故障可以复现。

技术路径

先建立一个 v6 兼容入口:CDN 页面用 module script,应用包使用命名导入或 namespace import,并在构建产物中检查没有引用已移除的 UMD 文件。第二步在启动前探测 WebGL2,向监控写入浏览器、GPU、驱动可见信息和回退结果。第三步以 v25 样式规范跑固定 style JSON,把每条 warning 归属到图层、属性与负责人。

接着把缺失图片处理迁到 Map.setMissingStyleImageResolver,让 resolver 的异步获取、超时、缓存和失败占位都有可观测结果。最后测试交互和数据事件:地图移动、缩放、旋转、加载、数据错误以及快速更新 GeoJSON 都要有预期事件记录。任何一项不通过就保留 v5 生产路径,不能靠关闭错误日志获得“迁移成功”。

风险边界

官方发布说明描述的是上游 API 和运行时变更,不能保证第三方控件、自定义 layer、私有 CDN、企业浏览器策略和 GPU 驱动都兼容。WebGL2 可用也不代表每个地形、透明线或高密度符号场景都有相同性能;ES2022 也可能要求旧构建工具增加转译。迁移验收必须针对项目自己的浏览器矩阵、样式、瓦片和安全策略重复执行。

检查清单

  1. 搜索产物与页面,确认不再引用 maplibre-gl.jsmaplibre-gl-csp.js 或默认导入写法。
  2. 在 CDN 和打包入口分别验证 module script、worker URL、MIME 类型与 CSP。
  3. 对每个目标终端记录 WebGL2 探测、浏览器与 GPU 信息,并验证无能力时的业务提示。
  4. 用固定 style JSON 收集 v25 warning,关联到具体 layer、属性和修复提交。
  5. 对缺失图标验证异步 resolver 的成功、超时、占位和重试行为。
  6. 以道路、符号、栅格、DEM 和地形样本连续平移缩放,比较视觉、交互与错误事件。
  7. 固化包版本、样式版本、瓦片快照、浏览器版本和回退开关,发布后保留可复现证据。

结论

MapLibre GL JS 6 的重点不只是新功能,而是把 WebGIS 的模块加载、GPU 能力和样式行为重新划出清晰边界。先将这些边界写成可运行的验收合同,再迁入业务地图,升级才会带来可控的渲染与维护收益。

参考来源

  1. MapLibre GL JS v6.0.0 release:https://github.com/maplibre/maplibre-gl-js/releases/tag/v6.0.0