十年了，Leaflet 2.0 终于发布！

对很多前端 WebGIS 工程师来说，入行接触的第一个开源地图库往往就是 Leaflet。自 2016 年 9 月 Leaflet 1.0 发布以来整整过去了十年。这十年里，前端生态早已从 AMD、全局变量走向了 ESM、TypeScript 与现代构建工具。最近，Leaflet 官方发布了 2.0.0-beta.1 版本，迎来了历史上最大规模的一次现代化重构。小编今天就带大家梳理一下，看看这个十年老库更新了什么以及有哪些影响。

现代化底层架构

Leaflet 2.0 最核心的改动是全面抛弃旧有的原型继承体系，底层全部基于标准 ES6 Class 重写，老用户熟悉的 Class.extend() 正式退场。新版本完全采用原生 ESM 规范，实现了完整 Tree-shaking 能力。对于只需加载底图与瓦片的最简地图，打包压缩体积从过去的 38KB 直接降到了 25.6KB。此外，官方抛弃了 IE 兼容，底层事件监听全面切换到了现代标准的 PointerEvents，代码更加干净。

TypeScript 严格类型

过去在 TypeScript 中使用 Leaflet，大家只能依赖社区维护的 @types/leaflet，版本更新时容易出现类型脱节甚至声明冲突。2.0 版本官方从源码构建并分发配套的 TypeScript 类型定义，开发者不再需要额外配置第三方声明包。API 命名也完成了一轮扁平化调整，例如 Control.Zoom 改为 ZoomControl，TileLayer.WMS 改为 WMSTileLayer，Icon.Default 改为 DefaultIcon。每个类和事件均具备严谨的类型推导，插件开发者也可以更自然地通过模块扩充为原生类增加属性与方法。

内置 SVG 图标

在1.x版本，前端构建的时候配置静态资源路径只要稍有偏差，页面上的 Marker 就会显示不出来，这是困扰无数新手的历史遗留问题。Leaflet 2.0 终于终结了这个痛点。官方取消了独立分发的 PNG 图片资源，将默认标记图标升级为内联矢量 SVG，实现了真正意义上的开箱即用。开发者可以直接使用任意 CSS 颜色对默认图标着色（例如 new DefaultIcon({color: 'crimson'})），新版本还新增了 rotation 参数与 setRotation() 方法，原生支持标记角度旋转，无需引入第三方插件。

渲染加速与问题修复

在渲染层面，新版本引入了亚像素精度渲染机制，解决了特定缩放比例下相邻切片与多边形之间偶然浮现的细微黑线与虚缝，困扰社区多年的瓦片接缝问题终于得到解决。

在执行性能上，新版本的对象创建耗时降低了约 50%，默认图标渲染速度提升了 25% 至 45%，多边形矢量裁剪速度提升了 10% 到 55%，并且修复了拖拽大图层时可能触发全局重排渲染的卡顿缺陷，平移与缩放体验更加顺滑。

非兼容性变更

不过，底层架构的大幅重写，也带来了一系列需要谨慎面对的非兼容性变更。

一是模块导出机制变化，2.0 移除了默认导出，不再支持直接编写 import L from 'leaflet'，必须通过具名导入 import { TileLayer, Marker } from 'leaflet' 或命名空间导入 import * as L from 'leaflet'。

二是全局变量的解耦，默认构建产物不再向全局作用域挂载 window.L，若依赖该特性，需显式引入独立的 leaflet-global.js 兼容包。

三是庞大的历史插件生态，过去十年积累的大量社区插件深度绑定了 Class.extend()。在主流插件完成 2.0 适配之前，存量大型复杂系统贸然升级风险较高，生产环境建议继续保持在 1.x 稳定版本。

总结

在三维孪生与 GPU 渲染风靡业界的当下，轻量级二维地图依然在政企看板、业务大屏和移动端具备不可替代的轻快优势。Leaflet 2.0 彻底甩掉了历史包袱，在保留轻巧特性的同时拥抱现代前端规范，为这个经典老库注入了全新生命力。

不过，如今都已经是 AI 时代了，大家连前端代码都很少手搓了，Leaflet 这次大版本重构是不是有一点晚，还有意义吗？

参考

1. Leaflet 2.0.0-beta.1 发布日志：https://github.com/Leaflet/Leaflet/releases/tag/v2.0.0-beta.1
2. Leaflet 2.0 官方迁移指南：https://github.com/Leaflet/Leaflet/blob/main/MIGRATION.md
3. Leaflet 官方 GitHub 仓库：https://github.com/Leaflet/Leaflet