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

拖拽旋转并缩放

一个自定义交互同时承担旋转与缩放:横向拖动改变分辨率,纵向拖动改变地图角度。

OpenLayers 10.3.1 · 对应官方 drag-rotate-and-zoom.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

继承 ol.interaction.Pointer 只需要实现三个回调:handleDownEvent 记录起始像素、分辨率与旋转角;handleDragEvent 按位移计算新的分辨率与角度;handleUpEvent 返回 false,表示交互不吞掉后续的浏览器事件。

位移到缩放的映射用 2 的指数:scale = 2^(dx/220),向右拖动放大;纵向位移除以 260 得到弧度。默认交互里的 dragPan 与 altShiftDragRotate 已关闭,避免同一次按下被两个交互争抢。

操作结果
横向拖动分辨率按指数缩放,向右放大
纵向拖动地图顺时针或逆时针旋转
点击复位视角动画回到初始中心、角度与级别

直接继承 Pointer 的交互不要再开启默认 DragPan,否则两个交互会同时响应同一次按下事件。