OpenLayers地图创建完成后如何添加Select和Translate交互功能

OpenLayers 地图实例自带addInteraction原生方法，支持在地图初始化完成后任意时机追加交互，无需在地图构造阶段提前配置。

实现步骤 #

1. 正常初始化地图，仅保留默认交互即可

map = new ol.Map({
  interactions: ol.interaction.defaults(),
  target: 'map',
  layers: layersCollections,
  view: view,
});

2. 在需要启用选择+平移功能的时机（比如按钮点击、业务事件触发时），实例化对应交互后调用addInteraction添加即可

// 实例化交互，关联逻辑和初始化时配置的规则一致
const select = new ol.interaction.Select({});
const translate = new ol.interaction.Translate({
  features: select.getFeatures(),
});

// 注意先添加选择交互，再添加平移交互
map.addInteraction(select);
map.addInteraction(translate);

额外说明 #

• 如果需要临时停用交互，不需要销毁实例，直接调用交互实例的setActive(false)方法即可，恢复时设为true就能再次生效
• 如果需要彻底移除交互，可以把select、translate实例存储到外层作用域，后续调用map.removeInteraction(select)、map.removeInteraction(translate)即可完成清理
• 必须保证先添加Select交互再添加Translate交互，避免平移交互无法正常获取到选中的要素集合

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