`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

图层卷帘对比

用一条分割线控制两套配色各显示一半,拖动滑块即可对比。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

卷帘同样是画布裁剪:上层用反色影像,在 prerender 里把裁剪矩形 限制在分割线左侧,分割线位置由滑块百分比换算成像素。

分割线本身用一个绝对定位的竖条绘制,跟随滑块移动; 拖动时只改裁剪宽度,源数据与视图都不变化。

操作结果
拖动分割滑块左半部分显示反色影像,右半部分显示原图
滑块拉到最左反色层完全隐藏,只剩原图
平移地图分割线固定在屏幕位置,两半内容同步移动

卷帘比较要求两层使用同一视图与同一底图,否则同一地物在两侧位置不一致,对比会失去意义。

`r`n
`r`n