Question

我正在将 Openlayers 与 Angular 结合使用，并在屏幕上嵌入了一个简单的地图。我已禁用互动，如：

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。这个想法是，只要地图没有焦点，就可以平移和滚动页面。仅当它具有焦点时（例如，单击地图后），平移和滚动手势才会修改地图视图。

Openlayer在触摸和拖动地图时无法垂直滚动页面

1 个答案: