将键盘事件添加到 Openlayers 地图

Question

我无法将自定义键盘事件添加到 Openlayers，也不知道为什么。这可能是与 Openlayers 中包含的现有键盘事件相关的错误？

我尝试了以下方法但没有结果：

this.map.getViewport().addEventListener('keydown', (e) => {
  console.log(e);
}, true)


document.getElementById('map').addEventListener('keydown', (e) => {
  console.log(e);
})

监听对相同元素的点击效果很好：

this.map.getViewport().addEventListener('click', (e) => {
  console.log(e);
}, true)

document.getElementById('map').addEventListener('click', (e) => {
  console.log(e);
})

有什么解决办法吗？

Answer 1

Mike 提到的这个问题是由于焦点问题而发生的。
几个月前我遇到了这个问题，所以我搜索了我的旧项目并找到了这个：

<div id="map" tabindex="0"></div>

为元素分配制表符索引后，您可以使用 javascript focus()。为了使用它（在分配标签索引之后）使用这个：

document.getElementById('map').focus();

我认为这会有所帮助。
另外，我几个月前发现的一个答案是 here。您可以找到有关对焦的更多信息。

Answer 2

如前所述，地图需要焦点。您可以使用ol-ext的FocusMap交互，在点击地图时聚焦地图。

见https://github.com/Viglino/ol-ext/blob/master/src/interaction/FocusMap.js

这个例子用它来处理ctrl+c/ctrl+v 在地图上。 https://viglino.github.io/ol-ext/examples/interaction/map.interaction.copypaste.html

Answer 3

我们 angular 应用程序中最可靠的解决方案是添加自定义 Interaction，但您仍然需要在地图上设置 tabindex="0" ;)

<div class="map" tabindex="0" id="map"></div>

这是一个例子：

import { Interaction } from "ol/interaction";
import { MapBrowserEvent } from "ol";

class KeyboardEventInteraction extends Interaction {
  constructor() {
    super();
  }
  handleEvent(mapBrowserEvent: MapBrowserEvent<KeyboardEvent>) {
    let stopEvent = false;
    if (mapBrowserEvent.type === "keydown") {
      const keyEvent = mapBrowserEvent.originalEvent;
      if (keyEvent.code?.toLowerCase() === "escape") {
        // do whatever you want with your escape key
        stopEvent = true;
      }
      // add other keys
      if (stopEvent) {
        keyEvent.preventDefault();
      }
    }
    return !stopEvent;
  }
}

您需要将此处理程序添加到您的地图中：

new Map({
  //... your map settings
  interactions: [
    //... your interactions
    new KeyboardEventInteraction(),
  ],
});

将键盘事件添加到 Openlayers 地图

Add keyboard-event to Openlayers map

javascript

openlayers