首页 / OpenLayers / API 文档

Interaction

先看结论

交互基类。所有鼠标与触摸操作的父类，负责消费地图事件，决定是否让事件继续向下传递。

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

new ol.interaction.Interaction(options)

构造参数

参数	说明
`active`	是否启用，默认 true

常用成员与方法

成员	返回	说明
`getActive()`	boolean	取启用状态
`setActive(active)`	void	启停交互，关停后不再消费事件
`getMap()`	Map	取所属地图
`handleEvent(evt)`	boolean	事件入口，返回 true 表示已消费
`changed()`	void	属性变更后通知地图重新处理

地图上的交互集合

方法	返回	说明
`map.getInteractions()`	Collection	取当前全部交互
`map.addInteraction(i)`	void	追加交互，追加的排在默认交互之后
`map.removeInteraction(i)`	void	移除交互，实例本身仍可复用

// 关掉默认的双击缩放
map.getInteractions().forEach(function (interaction) {
  if (interaction instanceof ol.interaction.DoubleClickZoom) {
    interaction.setActive(false);
  }
});

// 追加一个只在按住 Shift 时生效的拖拽框选
var dragBox = new ol.interaction.DragBox({
  condition: function (evt) { return evt.originalEvent.shiftKey; }
});
map.addInteraction(dragBox);

dragBox.on('boxend', function () {
  console.log(dragBox.getGeometry().getExtent());
});

注意事项

交互按加入地图的顺序依次处理事件，先返回 true 的会截断后续交互，自定义交互要注意与 Draw、Modify 的先后关系。
setActive(false) 只停用不卸载，重新启用后状态延续，地图也不会重建交互栈。
新增交互默认排在默认交互之后，需要抢占事件时用 map.getInteractions().insertAt(0, i) 插到最前。
自定义交互应继承 ol.interaction.Pointer 或 ol.interaction.Interaction，直接构造基类实例通常不会产生可用的手势。

引用本文

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