OpenLayers 7中Draw与DragBox交互切换时鼠标事件异常问题

需求：通过按钮切换功能，支持用户在地图上拖拽或点击绘制单个矩形框（分别对应DragBox和Draw交互）。
问题：使用Draw绘制矩形后，再启用DragBox时，Draw遗留的mouseup事件会导致DragBox从该遗留点而非当前mousedown点开始绘制，右下角的白点就是Draw遗留的mouseup位置。

• 对未使用的交互设置setActive(false)而非直接移除
• 调整交互的移除/添加顺序
• 尝试捕获并删除Draw遗留的mouseup点
• 监听addfeature事件，但未成功检测到遗留点

1. 销毁重建Draw交互（最彻底） #

切换到DragBox功能时，直接销毁Draw实例，避免残留状态和事件：

// 切换至DragBox的逻辑
if (drawInteraction) {
  map.removeInteraction(drawInteraction);
  drawInteraction = null; // 释放引用，彻底清除
}
dragBoxInteraction.setActive(true);

需要回到Draw功能时，重新初始化：

// 重新创建Draw交互
drawInteraction = new Draw({
  type: 'Rectangle',
  // 你的其他配置项
});
map.addInteraction(drawInteraction);
drawInteraction.setActive(true);

2. 强制终止Draw绘制流程 #

如果不想销毁实例，调用Draw的abortDrawing()方法，强制清除临时状态和事件：

// 切换交互前执行
if (drawInteraction && drawInteraction.getActive()) {
  drawInteraction.abortDrawing();
  drawInteraction.setActive(false);
}

3. 手动解绑残留事件（兜底方案） #

若上述方法仍有残留，手动解绑Draw绑定的鼠标事件：

// 解绑Draw的drawend事件（替换为你的实际事件处理器）
if (drawInteraction) {
  drawInteraction.un('drawend', yourDrawEndHandler);
  // 或直接清除地图视口上的mouseup事件绑定
  map.getViewport().removeEventListener('mouseup', drawMouseUpHandler);
}

Draw交互在绘制过程中会绑定一系列鼠标事件，即使设置setActive(false)，部分临时状态（比如最后一次mouseup的坐标）可能仍被内部保留。通过销毁实例或调用abortDrawing()，可以彻底清除这些临时状态和事件绑定，避免干扰后续的DragBox交互。

内容的提问来源于stack exchange，提问作者ma8