將鍵盤事件添加到 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