首页 / OpenLayers / 使用示例
`r`n 图层卷帘对比
用一条分割线控制两套配色各显示一半,拖动滑块即可对比。
`r`n
源码与运行效果
说明
卷帘同样是画布裁剪:上层用反色影像,在 prerender 里把裁剪矩形
限制在分割线左侧,分割线位置由滑块百分比换算成像素。
分割线本身用一个绝对定位的竖条绘制,跟随滑块移动; 拖动时只改裁剪宽度,源数据与视图都不变化。
| 操作 | 结果 |
|---|---|
| 拖动分割滑块 | 左半部分显示反色影像,右半部分显示原图 |
| 滑块拉到最左 | 反色层完全隐藏,只剩原图 |
| 平移地图 | 分割线固定在屏幕位置,两半内容同步移动 |
卷帘比较要求两层使用同一视图与同一底图,否则同一地物在两侧位置不一致,对比会失去意义。