OpenLayers – How to Get Specific Interaction from the Map in OpenLayers 5

basemapinteractionopenlayers

I am developing a map with OpenLayers v5.2.0, and I am having problems for the interaction change.

Currently, I have a function that adds all the controls to the map (selection, draw, etc). Which when it changes to a specific interaction eliminates the other interactions of the map.

The main problem is that I need several maps in the project, but each map has specific interactions. So, I need to separate the assignment of interactions separately, so that I can generate a map with the selection and drawing of circles (for example).

How can I distinguish the interactions of the map when doing map.getInteractions ()? To know which interaction to deactivate and which does not.

`addControlButtons : (map, vectorSource) ->
draw = undefined
snap = undefined
select = undefined
modify = undefined
window.app = {}
app = window.app

#SELECT
app.SelectControl = (button) ->
  changeSelectInteraction = ->
    addSelectInteraction()

  button.addEventListener 'click', changeSelectInteraction, false
  button.addEventListener 'touchstart', changeSelectInteraction, false

  element = OpenLayers.createElementDiv('select-control', button)
  ol.control.Control.call this, element: element
  return

ol.inherits app.SelectControl, ol.control.Control
selectControl = new app.SelectControl(OpenLayers.createControlButton('S', 'Selección'))
selectControl.setMap(map)

#DRAWPOINT
app.DrawPointControl = (button) ->
  changeDrawPointInteraction = ->
    addDrawInteraction("Point")

  button.addEventListener 'click', changeDrawPointInteraction, false
  button.addEventListener 'touchstart', changeDrawPointInteraction, false

  element = OpenLayers.createElementDiv('draw-point-control', button)
  ol.control.Control.call this, element: element

ol.inherits app.DrawPointControl, ol.control.Control
drawPointControl = new app.DrawPointControl(OpenLayers.createControlButton('P', 'Dibujar Punto'))
drawPointControl.setMap(map)

#DRAWPOLYGON
app.DrawPolygonControl = (button) ->
  changeDrawPolygonInteraction = ->
    addDrawInteraction("Polygon")

  button.addEventListener 'click', changeDrawPolygonInteraction, false
  button.addEventListener 'touchstart', changeDrawPolygonInteraction, false

  element = OpenLayers.createElementDiv('draw-polygon-control', button)

  ol.control.Control.call this, element: element

ol.inherits app.DrawPolygonControl, ol.control.Control
drawPolygonControl = new app.DrawPolygonControl(OpenLayers.createControlButton('D', 'Dibujar Polígono'))
drawPolygonControl.setMap(map)

addDrawInteraction = (drawType) ->
  map.removeInteraction select
  removeDrawInteractions()
  modify = new ol.interaction.Modify (source: vectorSource)
  map.addInteraction modify

  draw = new ol.interaction.Draw(
    source: vectorSource
    type: drawType)
  map.addInteraction draw

  snap = new ol.interaction.Snap (source: vectorSource)
  map.addInteraction snap

  draw.on 'drawstart', (e) ->
    vectorSource.clear()

removeDrawInteractions = ->
  map.removeInteraction draw
  map.removeInteraction snap
  map.removeInteraction modify
  vectorSource.clear()

addSelectInteraction = ->
  removeDrawInteractions()
  select = new ol.interaction.Select
  map.addInteraction select`

This is my function.

Best Answer

You can do instanceof checks when you loop over the collection of interactions.

map.getInteractions().forEach((interaction) => {
  if (interaction instanceof ol.interaction.Select) {
    interaction.setActive(false);
  }
});
Related Question