触摸并拖动地图时，Openlayers 无法垂直滚动页面

Question

我正在使用 Openlayers 和 Angular，并在屏幕上嵌入了一个简单的地图.我像这样禁用了 interactions：

this.map = new Map({
  target: 'map',
  interactions: [],
  layers: [this.layer],
  view: this.view
});

这可以防止地图在被触摸和拖动时平移，这正是我所需要的。但是，我希望能够通过按下并拖动地图来垂直向下滚动浏览器页面，以便用户能够看到地图下方的内容。目前，只能通过触摸并拖动地图外的区域来滚动页面。

有 github 个与此相关的问题：
https://github.com/openlayers/openlayers/issues/6767
https://github.com/openlayers/openlayers/issues/8458

但我无法让它工作。有人可以帮忙吗？
谢谢

Answer 1

有几种方法可以实现这一点。我的首选方法是使用

配置地图

import Map from 'ol/Map';
import {defaults as defaultInteractions} from 'ol/interaction';

new Map({
  target: 'map',
  interactions: defaultInteractions({
    onFocusOnly: true
  }),
  // ...
});

标记中地图的目标元素需要具有 tabindex 属性，例如

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

您可以在此处查看实际效果：https://openlayers.org/en/latest/examples/interaction-options.html。这个想法是只要地图没有焦点，你就可以平移和滚动页面。只有当它有焦点时（例如在地图上单击后），平移和滚动手势才会修改地图视图。

触摸并拖动地图时，Openlayers 无法垂直滚动页面

Openlayers unable to vertically scroll page when touch and dragging the map

scroll

openlayers

angular