首页 / OpenLayers / 使用示例
拖拽旋转缩放
按住修饰键拖拽,一次手势同时完成旋转与缩放,适合快速摆正倾斜的航拍底图方向。
源码与运行效果
说明
ol.interaction.DragRotateAndZoom 的 condition 决定何时生效,示例使用
ol.events.condition.shiftKeyOnly。同时在默认交互里关闭
altShiftDragRotate 与 pinchRotate,避免两套旋转手势互相干扰。
旋转角通过 view.getRotation() 读取,单位为弧度。
| 操作 | 结果 |
|---|---|
| 按住 Shift 横向拖拽 | 地图旋转,顶部角度数值同步变化 |
| 按住 Shift 纵向拖拽 | 地图缩放 |
| 点击「角度归零」 | 旋转角平滑回到 0 |
旋转后仍按屏幕方向渲染瓦片,底图会露出空白角,可用超出范围的重复填充或放大缓冲范围缓解。