在 animation 正在运行时阻止 OpenLayers map 上的交互

Question

I'm working on a web application that uses OpenLayers map. On this component, I get the properties from its parent, which are used to draw some icons on specified coordinates on the map, and since this takes a bit of a time, to cover that time, I'm using this animation:

map.getView().animate({ center: transform(latitude, longitude], 'EPSG:4326', 'EPSG:3857'), duration: 1000 })

I'm trying to find a solution to prevent any type of mouse interaction on the map, while this animation is in action (not finished).

Answer 1

To deactivate the interactions call a function like disableInteraction() :

const disableInteraction = () => {
  map.getInteractions().forEach(i => {
    i.setActive(false)
  })
}

You can call enableInteractions() when the animation stops (or whenever you need), to reactivate the interactions:

const enableInteractions = () => {
  map.getInteractions().forEach(i => {
    i.setActive(true)
  })
}