首页 / OpenLayers / API 文档

PointerInteraction

先看结论

指针交互基类。把按下、拖动、移动、抬起四个阶段拆成钩子函数，是 Drag、Draw、Modify 等交互的共同父类。

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

new ol.interaction.Pointer(options)

构造参数

参数	说明
`handleDownEvent`	按下时调用，签名 `(evt)`，返回 true 才进入拖拽序列
`handleDragEvent`	拖动时调用，签名 `(evt)`
`handleMoveEvent`	移动时调用，签名 `(evt)`
`handleUpEvent`	抬起时调用，签名 `(evt)`，返回 true 表示事件已消费
`stopDown`	判定按下事件是否停止传播的函数，签名 `(evt)`
`active`	是否启用，默认 true

常用方法

方法	返回	说明
`handleEvent(evt)`	boolean	按当前指针状态分派到对应钩子
`getActive()` / `setActive(a)`	boolean / void	读写启用状态
`getPointerCount()`	number	取当前按下的指针数量

事件对象上的常用字段

字段	类型	说明
`coordinate`	Coordinate	地图坐标
`pixel`	Pixel	屏幕像素坐标
`dragging`	boolean	是否处于拖动状态
`originalEvent`	Event	底层浏览器事件

// 记录按下与拖动轨迹，不消费事件
var tracer = new ol.interaction.Pointer({
  handleDownEvent: function (evt) {
    console.log('down', evt.pixel);
    return true;   // 进入拖拽序列
  },
  handleDragEvent: function (evt) {
    console.log('drag', evt.coordinate);
  },
  handleUpEvent: function (evt) {
    console.log('up', evt.coordinate);
    return false;
  }
});

map.addInteraction(tracer);

注意事项

handleDownEvent 返回 false 时不会进入拖拽，后续 handleDragEvent 也不会被调用。
四个钩子都可以省略，未提供的阶段直接跳过，适合只关心某一种手势的场景。
钩子里改变事件坐标或调用 evt.preventDefault() 都会影响后续交互，调试时先确认是否真的需要拦截。
直接构造基类实例并用选项挂钩子是可行的，但钩子里拿不到实例，需要保留外部变量来读写状态。

引用本文

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