OpenLayers中Modify编辑与Translate拖拽交互冲突如何解决？

ol.interaction.Modify和ol.interaction.Translate默认都会响应选中要素上的鼠标拖拽事件，同时启用时会发生事件抢占，因此默认状态下只会有一个交互生效。以下是两种可行的实现方案：

方案1：自动区分触发场景（无额外操作） #

通过给Modify交互添加触发条件，仅当鼠标点击到要素的编辑顶点/边时才触发节点编辑，点击要素主体区域时自动走拖拽逻辑，操作符合直觉，无需手动切换模式，代码示例如下：

// 先初始化Translate交互，优先级低于后续添加的Modify
var translateInteraction = new ol.interaction.Translate({
  features: selectInteraction.getFeatures(),
});
map.addInteraction(translateInteraction);

var modifyInteraction = new ol.interaction.Modify({
  features: selectInteraction.getFeatures(),
  deleteCondition: function(event) {
    return ol.events.condition.shiftKeyOnly(event) &&
      ol.events.condition.singleClick(event);
  },
  // 新增触发条件：仅当点击到Modify的编辑手柄时才启用本交互
  condition: function(event) {
    return ol.events.condition.primaryAction(event) && 
      modifyInteraction.getOverlay().getSource().hasFeatureAtCoordinate(event.coordinate);
  }
});
map.addInteraction(modifyInteraction);

方案2：手动切换交互模式 #

如果希望逻辑更清晰、避免误操作，可以添加两个功能按钮，分别控制两种交互的启用/禁用状态，同一时间仅激活一种交互：

<button id="modifyBtn">节点编辑</button>
<button id="translateBtn">要素拖拽</button>

// 初始化时默认禁用其中一个交互
var modifyInteraction = new ol.interaction.Modify({
  features: selectInteraction.getFeatures(),
  deleteCondition: function(event) {
    return ol.events.condition.shiftKeyOnly(event) &&
      ol.events.condition.singleClick(event);
  }
});
modifyInteraction.setActive(false);
map.addInteraction(modifyInteraction);

var translateInteraction = new ol.interaction.Translate({
  features: selectInteraction.getFeatures(),
});
translateInteraction.setActive(true);
map.addInteraction(translateInteraction);

// 按钮切换逻辑
document.getElementById('modifyBtn').addEventListener('click', function() {
  modifyInteraction.setActive(true);
  translateInteraction.setActive(false);
});
document.getElementById('translateBtn').addEventListener('click', function() {
  modifyInteraction.setActive(false);
  translateInteraction.setActive(true);
});

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