在openlayers中的水平平移地图

通常我们使用 2D 地图，实际上有很多可用的 Web 地图库，比如openlayers，leaflet，或者mapbox-gl-js。我将介绍一种在 openlayers 中创建仅水平平移地图的方法。

要控制地图仅能水平平移，我们需要钩住以下交互：pan，wheel scroll zoom。

openlayers 使用的默认交互可以在以下链接中找到：

dragPan: DragPan.js
mouseWheelZoom: MouseWheelZoom.js

禁用默认交互#

第一步，我们禁用地图的默认交互。

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

应用此选项后，地图将无法被控制，这是我们想要的效果。

钩住交互#

拖动平移#

我们首先创建一个自定义的平移交互，继承自DragPan。

默认的交互实现了 3 个方法来处理Drag Event，Pointer Up，Pointer Down事件。Drag Event处理程序包含了坐标计算。换句话说，我们需要重写一个新的handleDragEvent方法。

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

中心点的第二个元素存储了 y 坐标，因此我们注释掉关于 y 增量的那一行，并将其设置为零。

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

在defaultInteractions函数之后添加自定义的拖动交互，现在我们的地图可以使用鼠标拖动进行平移。

鼠标滚轮缩放#

根据拖动平移部分，我们可以很容易地找到MouseWheelZoom的坐标计算行。

它们出现在L187-L189，在handleEvent方法中进行一点调整：

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

与dragPan相同，我们在默认交互之后添加自定义的MouseWheelZoom交互Zoom。

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

现在我们的地图可以使用鼠标滚轮进行缩放，且仅在水平方向有效。