Как добавить прослушиватель событий клика на ol.control в Openlayers 4?

Question

Я пытаюсь регистрировать взаимодействия с пользовательским интерфейсом, и поэтому я хотел бы получать события щелчка / вкладки от моих ol.controls (ol.control.Zoom, ol.control.Rotate, ol.control.Attribution).

Но как? Я не могу найти ничего в документах

Answer 1

Я тоже не нашел тогда, но, возможно, тоже упустил момент.Вы можете забыть об использовании OpenLayers API, в частности, и использовать чистый JavaScript.

// Check zoom +/- buttons event
document.querySelector('.ol-zoom').addEventListener('click', evt => {
  if (evt.target.classList.contains('ol-zoom-in')) {
    console.log('Zoom in');
  } else if (evt.target.classList.contains('ol-zoom-out')) {
    console.log('Zoom out');
  }
});

// Check if rotate button clicked (normally visible only if map rotated)
document.querySelector('.ol-rotate').addEventListener('click', evt => {
  console.log('Rotate');
});

// Check if attribution button opened or closed
document.querySelector('.ol-attribution').addEventListener('click', evt => {
  if (evt.currentTarget.classList.contains('ol-collapsed')) {
    console.log('Collapsed');
  } else {
    console.log('Opened');
  }
});

Если вы хотите наблюдать события от OpenLayers, не заботясь о том, где произошел щелчок (потому что событие масштабирования может быть создано колесом мышидвойным щелчком по карте или нажатием +/- кнопки увеличения) вы можете прослушать ol.View события

map.getView().on('change:rotation', evt => {
  console.log('Rotation event', evt);
})

map.getView().on('change:resolution', evt => {
  console.log('Resolution event', evt);
})

PS: есть другие события, которые вы можете прослушать в представлении, ноЯ даю вам проверить их в API