首页 / MapLibre / 使用示例
图层切换
京广、京沪、陇海三条线路分别放在独立图层。 复选框只改布局属性,不重建图层,切换没有闪烁。
源码与运行效果
说明
每条线路一个 source、一个 layer,图层 id 与复选框的
data-layer 一致。切换时只调用
setLayoutProperty,把 visibility
在 visible 与 none 之间切换。
map.setLayoutProperty(id, 'visibility', checked ? 'visible' : 'none');
| 做法 | 代价 | 适用 |
|---|---|---|
| 改 visibility | 几乎为零,状态保留 | 图层已存在,只切换显示 |
| addLayer / removeLayer | 重建源与图层 | 图层内容整体更换 |
| 改 filter | 重新筛选要素 | 同一图层按属性分批显示 |
复选框在 load 之前点击时图层还不存在,示例里先用
map.getLayer(id) 判断,避免出现「点了没反应」的报错。
图层添加顺序决定叠压关系。三条线在交叉处会互相覆盖, 把最需要强调的线路放到最后添加,交叉处就压在上面。
大量图层做可见性切换时,把同类的合并成一个图层并用
filter 分组,比维护几十个图层更省状态,也更容易管理。