Openlayers在触摸和拖动地图时无法垂直滚动页面 [英] Openlayers unable to vertically scroll page when touch and dragging the map

问题描述

我正在将 Openlayers 与 Angular 一起使用，并且已在屏幕上嵌入了一个简单的地图.我已禁用互动，如下所示:

I am using Openlayers with Angular, and have embedded a simple map on the screen. I have disabled interactions like so:

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

但是我无法使它正常工作.任何人都可以帮忙吗?
谢谢

This prevents the map from panning when it is touched & dragged, which is what I need. However, I would like to be able to vertically scroll the browser page down by pressing & dragging the map so the user is able to see content below the map. At the moment, it is only possible to scroll the page by touching & dragging an area outside of the map.

There are github issues relating to this:
https://github.com/openlayers/openlayers/issues/6767
https://github.com/openlayers/openlayers/issues/8458

But I could not get it to work. Anyone able to help with this?
Thanks

推荐答案

有几种方法可以实现此目的.我的首选方式是使用

There are several ways to achieve this. My preferred way is to configure the map with

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

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

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

The target element for the map in the markup needs to have a tabindex attribute, e.g.

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

您可以在这里看到实际效果: https://openlayers.org /en/latest/examples/interaction-options.html .这个想法是，只要地图没有焦点，您就可以平移和滚动页面.仅当它具有焦点时(例如，单击地图后)，平移和滚动手势才会修改地图视图.

You can see that in action here: https://openlayers.org/en/latest/examples/interaction-options.html. The idea is that as long as the map does not have the focus, you can pan and scroll the page. Only when it has the focus (e.g. after a click on the map), pan and scroll gestures will modify the map view.

这篇关于Openlayers在触摸和拖动地图时无法垂直滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！