首页 / OpenLayers / API 文档

DoubleClickZoom

先看结论

双击缩放交互。双击地图以指针位置为中心放大，默认放大一个层级并带过渡动画。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-29 · 引用本文

new ol.interaction.DoubleClickZoom(options)

构造参数

参数	默认	说明
`duration`	250	缩放动画时长，毫秒；设为 0 立即跳变
`delta`	1	每次双击改变的缩放层级，负数表示缩小

方法

方法	说明
`setDuration(duration)`	运行时修改动画时长
`setActive(active)`	继承自 `ol.interaction.Interaction`，停用后双击不再缩放
`getActive()`	当前是否激活

示例：双击改为两级

var dblZoom = new ol.interaction.DoubleClickZoom({
  duration: 180,
  delta: 2
});

map.addInteraction(dblZoom);

// 与业务的双击拾取冲突时先停用
map.on('dblclick', function (event) {
  var feature = map.forEachFeatureAtPixel(event.pixel, function (f) {
    return f;
  });
  if (feature) {
    console.log('双击命中', feature.get('name'));
  }
});

与 dblclick 事件竞争

DoubleClickZoom 在双击时立即执行缩放，业务代码里的 map.on('dblclick') 也会同时收到事件。如果需要「双击进入详情」，先 setActive(false)，或者判断命中了要素后再把缩放撤销（体验较差）。更稳妥的做法是改为单击选中、双击缩放，职责分开。

移动端的双击

触摸屏上的双击同样触发该交互。双指手势由 PinchZoom 负责，两者不冲突。若页面上有其他依赖双击的组件（例如富文本编辑区），可以把缩放交互绑定在特定容器上，而不是整个地图。

delta 为负值会退化为双击缩小。此时用户很难主动放大，需要配一个明确的放大按钮。地图上同时保留滚轮缩放，交互会更自然。

引用本文

经纬志（2026）。《DoubleClickZoom》。https://www.jingweizhi.com/openlayers/api/double-click-zoom.html（访问日期 2026-11-03）。