用途:在网页或 React 应用中嵌入交互式地图,展示瓦片底图、标记、弹窗、圆形/多边形等矢量要素以及 GeoJSON 区域数据。
主要能力:栅格瓦片图层、标记与弹窗、矢量图形、GeoJSON、地图事件;标记聚合等功能通过插件实现。React 中通过 react-leaflet 以组件形式封装同一套对象。当前稳定版为 1.9.4(2023 年 5 月),npm install leaflet 即安装该版本;2.0 仍为 alpha,仅支持 ESM 并移除了全局 L 与工厂函数,除非用户明确要求 2.0,否则使用 1.9.4。
使用方式:npm install leaflet;TypeScript 需另装 @types/leaflet。React 19 用 react-leaflet 与 react-leaflet-cluster,React 18 需降版本以避免 ERESOLVE。地图容器必须设置显式高度并引入 leaflet.css,否则地图不可见或瓦片散乱。无构建步骤时可用固定版本 CDN 文件。坐标统一为 [纬度, 经度],GeoJSON 使用 [经度, 纬度],由 L.geoJSON 自动转换。
适用场景:联系页办公室标记、点击落点上报、GeoJSON 配送区域与边界、大量标记聚合等。
限制:tile.openstreetmap.org 无需密钥但为捐赠服务、无 SLA,必须保留可见署名,大量或商业流量可能被无预警拦截;OpenStreetMap 政策禁止批量下载与离线瓦片;map.locate() 仅限 HTTPS 与 localhost,需处理 locationerror;bindPopup 传入字符串会解析 HTML,用户数据需转义;Next.js 中因 Leaflet 依赖 window,需由客户端组件配合 dynamic(..., { ssr: false }) 加载;矢量瓦片、旋转、3D 地形或海量动态点应改用 WebGL 库。地图初始化后 center、zoom 等 props 不再生效,需在子组件中用 useMap() 调整视图。