`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

双击拖拽缩放

双击后不松手直接上下拖动,一个手势完成连续缩放。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

默认 ol.interaction.DoubleClickZoom 只做一次放大,无法连续调节。 示例先移除这个交互,再在 dblclick 时记录起始缩放与像素, 随后在 pointerdrag 中按垂直位移换算缩放值。

整个手势期间只读起点像素,松手即结束,因此不会出现「越拖越快」的累积误差。

操作结果
双击后向上拖连续放大,拖动距离越大级别越高
双击后向下拖连续缩小
普通双击不再触发默认的一次性放大

手势类交互要在 pointerup 里复位状态;只靠 dblclick 标记,拖到窗口外松手会留下悬挂状态。

`r`n
`r`n