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

图层显隐

一个数据源挂三个图层,勾选框分别控制面、线与标注。 显隐只改布局属性,数据与图层都留在内存里,切回来立即出现。

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

说明

三个图层共用 zones 源,用 filter 区分几何类型: 面与线读 Polygon,标注读 Point。 这样同一份数据能拆成不同视觉层次,增删图层不影响源。

visibility 只有 'visible' 与 'none' 两个值。 切到 none 时图层不参与绘制,也不参与碰撞检测, 但数据与索引仍在,恢复时没有重新请求。

做法调用代价与适用
布局显隐setLayoutProperty(…, 'visibility', 'none')最省,可随时切回
删除图层removeLayer(id)释放资源,重建要重编译
绘制透明度setPaintProperty(…, '…-opacity', 0)仍参与绘制,不适合隐藏
过滤条件setFilter(id, ['==', …])数据量大时需重建索引

「全部切换」按钮按当前是否有勾选项决定目标状态,避免逐个读取后 出现一半开一半关的中间态。

标注图层隐藏后,它的文字不再参与避让,其他图层的标注会重新排布。 这是布局重算,不是单纯的视觉开关。