banner
陈不易

陈不易

没有技术想聊生活
twitter
medium
tg_channel

在openlayers中的水平平移地图

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

要控制地图仅能水平平移,我们需要钩住以下交互:panwheel scroll zoom

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

禁用默认交互#

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

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

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

钩住交互#

拖动平移#

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

默认的交互实现了 3 个方法来处理Drag EventPointer UpPointer 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]),
...
})

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

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。