使用Openlayers制作一个水平滚动地图

We usually use 2d map, actually, there are many avaliable web map library such like openlayers, leaflet, or mapbox-gl-js. I’ll introduce a method to make a horizontal only map in openlayers. To control map horizontal only, we have to hook these interactions: pan, wheel scroll zoom. The default interaction openlayers use above can be found in follow link:

dragPan: DragPan.js
mouseWheelZoom: MouseWheelZoom.js

disable default interaction

The first step, we disable the default interaction of map.

const map = new Map({
  ...
  interactions: defaultInteractions({
    dragPan: false,
    mouseWheelZoom: false,
    doubleClickZoom: false
  })
  ...
}

const map = new Map({
  ...
  interactions: defaultInteractions({
    dragPan: false,
    mouseWheelZoom: false,
    doubleClickZoom: false
  })
  ...
}

After apply this option, the map can’t be controlled anymore, this what we suppose.

hook interaction

drag pan

We first create a custom pan interaction extented from DragPan. The default interaction implement 3 method to handle Drag Event, Pointer Up, Pointer Down event. The Drag Event handler contains the coordinate compute. in other word, we need overide a new handleDragEvent .

class Drag extends DragPan {
  constructor() {
    super();
    this.handleDragEvent = function (mapBrowserEvent) {
      ...
          const delta = [
            this.lastCentroid[0] - centroid[0],
            // centroid[1] - this.lastCentroid[1],
            0
          ];
     ...
    }

class Drag extends DragPan {
  constructor() {
    super();
    this.handleDragEvent = function (mapBrowserEvent) {
      ...
          const delta = [
            this.lastCentroid[0] - centroid[0],
            // centroid[1] - this.lastCentroid[1],
            0
          ];
     ...
    }

The centroid second element storage the y coordinate, thus ,we comment the line about y delta and set zero to it.

const map = new Map({
...
interactions: defaultInteractions({
  dragPan: false,
  mouseWheelZoom: false,
  doubleClickZoom: false
}).extend([new Drag()]),
...
})

const map = new Map({
...
interactions: defaultInteractions({
  dragPan: false,
  mouseWheelZoom: false,
  doubleClickZoom: false
}).extend([new Drag()]),
...
})

Add the custom drag interaction after defaultInteractions funtion, and our map now can be paned use mouse drag.

mouse wheel zoom

According the drag pan section, we can easily found the coordinate compute line of the MouseWheelZoom. They appearing at L187-L189, do a little tweak in handleEvent method:

const coordinate = mapBrowserEvent.coordinate;
const horizontalCoordinate = [coordinate[0], 0]
this.lastAnchor_ = horizontalCoordinate;

const coordinate = mapBrowserEvent.coordinate;
const horizontalCoordinate = [coordinate[0], 0]
this.lastAnchor_ = horizontalCoordinate;

Same as dragPan, we add custom MouseWheelZoom interaction Zoom after default interactions.

const map = new Map({
...
interactions: defaultInteractions({
  dragPan: false,
  mouseWheelZoom: false,
  doubleClickZoom: false
}).extend([new Drag(),new Zoom]),
...
})

const map = new Map({
...
interactions: defaultInteractions({
  dragPan: false,
  mouseWheelZoom: false,
  doubleClickZoom: false
}).extend([new Drag(),new Zoom]),
...
})

Now our map can zoom use mouse wheel, and it only work in horizontal direction.