时间戳

首页 > 解决方案 > 触摸和拖动地图时，Openlayers 无法垂直滚动页面

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

问题描述

我正在使用带有Angular的Openlayers，并在屏幕上嵌入了一个简单的地图。我禁用了这样的交互：

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

但我无法让它工作。任何人都可以帮助解决这个问题？
谢谢

标签： angularscrollopenlayers

解决方案

有几种方法可以实现这一点。我的首选方法是配置地图

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

推荐阅读