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

图层切换

京广、京沪、陇海三条线路分别放在独立图层。 复选框只改布局属性,不重建图层,切换没有闪烁。

MapLibre GL JS 4.x · 更新 2026-10-27
源码与运行效果
运行效果

说明

每条线路一个 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 分组,比维护几十个图层更省状态,也更容易管理。