首页 / OpenLayers / 使用示例
拖拽旋转并缩放
一个自定义交互同时承担旋转与缩放:横向拖动改变分辨率,纵向拖动改变地图角度。
源码与运行效果
说明
继承 ol.interaction.Pointer 只需要实现三个回调:handleDownEvent 记录起始像素、分辨率与旋转角;handleDragEvent 按位移计算新的分辨率与角度;handleUpEvent 返回 false,表示交互不吞掉后续的浏览器事件。
位移到缩放的映射用 2 的指数:scale = 2^(dx/220),向右拖动放大;纵向位移除以 260 得到弧度。默认交互里的 dragPan 与 altShiftDragRotate 已关闭,避免同一次按下被两个交互争抢。
| 操作 | 结果 |
|---|---|
| 横向拖动 | 分辨率按指数缩放,向右放大 |
| 纵向拖动 | 地图顺时针或逆时针旋转 |
| 点击复位视角 | 动画回到初始中心、角度与级别 |
直接继承 Pointer 的交互不要再开启默认 DragPan,否则两个交互会同时响应同一次按下事件。