OpenLayersでの水平パン専用の地図

通常、2D マップを使用しますが、実際には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から拡張されたカスタムのパンインタラクションを作成します。
デフォルトのインタラクションは、Drag Event、Pointer Up、Pointer Downイベントを処理するための 3 つのメソッドを実装しています。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  
          ];  
     ...
    }

セントロイドの 2 番目の要素には y 座標が格納されているため、y デルタに関する行をコメントアウトし、0 を設定します。

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

これでマップはマウスホイールでズームできるようになり、水平方向のみで動作します。