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

图层裁剪式卷帘

滑块改写图层的渲染范围,切分线左侧出专题图,右侧露出底图。

OpenLayers 10.3.1 · 对应官方 webgl-layer-swipe.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

卷帘的本质是把图层渲染范围切成两半。示例通过 layer.setExtent 只保留切分线左侧,右侧自动露出底图。

官方示例用 WebGL 图层的裁剪能力,这里用范围裁剪实现同样的对比效果;滑块改变切分位置,范围随比例重算。

操作结果
拖动滑块专题图宽度随比例变化
拖到 0专题图完全隐藏
拖到 100专题图全幅覆盖

setExtent 裁剪的是渲染范围,数据本身不受影响,随时可以恢复全幅。