经纬志
首页 / Leaflet / 使用示例

多底图切换

三套公开瓦片之间切换,中心点、缩放级别和上层要素保持不变,版权信息随底图自动更换。

Leaflet 1.9.4 · 更新 2026-10-27
源码与运行效果
运行效果

说明

三套底图都来自公开服务,不需要 Key:OpenStreetMap 街道图、CARTO 浅色与深色。 切换时先 removeLayer 再 addLayer, 旧图层的瓦片请求与版权文字会一起清掉,不会出现两套版权叠在一起的情况。

底图最大级别适用场景
OpenStreetMap19要素最全,街道名与兴趣点密集
CARTO 浅色20作为数据图层背景,颜色干扰小
CARTO 深色20夜间模式、发光效果、飞线动画

CARTO 的地址里带 {r} 占位符,高清屏会自动请求 @2x 图, 所以 subdomains: 'abcd' 要与 {s} 同时提供。 换成国内底图时,注意天地图用 CGCS2000、高德腾讯用 GCJ-02,坐标偏移处理在数据侧完成。

切换按钮只改底图,不调用 setView。移除与添加图层都不会影响视图状态, 这是 Leaflet 与「重建地图」相比最省事的地方。