Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/video/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 如何在Openlayers 4中的ol.control上添加单击事件侦听器?_Angular_Openlayers - Fatal编程技术网

Angular 如何在Openlayers 4中的ol.control上添加单击事件侦听器?

Angular 如何在Openlayers 4中的ol.control上添加单击事件侦听器?,angular,openlayers,Angular,Openlayers,我正在尝试记录UI交互,因此我希望从我的ol.controls(ol.control.Zoom,ol.control.Rotate,ol.control.attribute)获取单击/选项卡事件 但是怎么做呢?我在中找不到任何东西,当时我也没有找到,但我可能也没有抓住要点。 您可能会忘记使用OpenLayers API,而使用纯JavaScript // Check zoom +/- buttons event document.querySelector('.ol-zoom').addEven

我正在尝试记录UI交互,因此我希望从我的
ol.controls
ol.control.Zoom
ol.control.Rotate
ol.control.attribute
)获取单击/选项卡事件


但是怎么做呢?我在

中找不到任何东西,当时我也没有找到,但我可能也没有抓住要点。 您可能会忘记使用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

thx中检查它们,以便指出这一点。我已经考虑过使用纯JS。我只是想确定
ol.controls