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

拖拽旋转缩放

按住修饰键拖拽,一次手势同时完成旋转与缩放,适合快速摆正倾斜的航拍底图方向。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

ol.interaction.DragRotateAndZoom 的 condition 决定何时生效,示例使用 ol.events.condition.shiftKeyOnly。同时在默认交互里关闭 altShiftDragRotate 与 pinchRotate,避免两套旋转手势互相干扰。 旋转角通过 view.getRotation() 读取,单位为弧度。

操作结果
按住 Shift 横向拖拽地图旋转,顶部角度数值同步变化
按住 Shift 纵向拖拽地图缩放
点击「角度归零」旋转角平滑回到 0

旋转后仍按屏幕方向渲染瓦片,底图会露出空白角,可用超出范围的重复填充或放大缓冲范围缓解。