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

图层切换

三套底图用单选按钮互斥切换,站点标注作为独立图层单独开关。 底图全部预加载在图层数组里,切换只改可见性,不销毁重建。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

三个底图在创建地图时一次性放进 layers, 只让第一个可见。单选按钮变化时遍历底图映射,把选中的设为可见、其余隐藏。 none 对应空对象,表示三套底图都关掉,只剩背景色。

选项数据源用途
标准 OSMol.source.OSM日常浏览,要素最全
Humanitarianol.source.XYZ配色简洁,适合叠加专题图
无底图—只看矢量层,检查数据本身

标注图层设了 zIndex: 5,切换底图不会影响它。 把底图切换与叠加层开关分开,是图层控制面板最常见的设计: 底图单选、专题多选。

隐藏的瓦片图层不会继续请求新瓦片,但已缓存的瓦片仍占内存。 底图数量很多时,用 setSource() 更换数据源更省内存, 代价是切换时会重新加载一次。