首页 / OpenLayers / 使用示例
图层裁剪式卷帘
滑块改写图层的渲染范围,切分线左侧出专题图,右侧露出底图。
源码与运行效果
说明
卷帘的本质是把图层渲染范围切成两半。示例通过 layer.setExtent 只保留切分线左侧,右侧自动露出底图。
官方示例用 WebGL 图层的裁剪能力,这里用范围裁剪实现同样的对比效果;滑块改变切分位置,范围随比例重算。
| 操作 | 结果 |
|---|---|
| 拖动滑块 | 专题图宽度随比例变化 |
| 拖到 0 | 专题图完全隐藏 |
| 拖到 100 | 专题图全幅覆盖 |
setExtent 裁剪的是渲染范围,数据本身不受影响,随时可以恢复全幅。