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

问题

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
});

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

回答1:

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
  }),
  // ...
});

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

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

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.

来源：https://stackoverflow.com/questions/56353094/openlayers-unable-to-vertically-scroll-page-when-touch-and-dragging-the-map

标签

angular

scroll

OpenLayers