オープンレイヤーの水平方向のパンのみの地図

私たちは通常 2D マップを使用しますが、実際にはopenlayers、leafletやmapbox-gl-jsなど、多くの利用可能なウェブマップライブラリがあります。オープンレイヤーで水平専用マップを作成する方法を紹介します。
マップを水平専用で制御するには、これらのインタラクションをフックする必要があります: pan、wheel scroll zoom。
オープンレイヤーが使用するデフォルトのインタラクションは、以下のリンクで見つけることができます:

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 デルタに関する行をコメントアウトし、ゼロに設定します。

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;

ドラッグパンと同様に、デフォルトのインタラクションの後にカスタムMouseWheelZoomインタラクションZoomを追加します。

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

これで、マップはマウスホイールを使用してズームでき、水平方向のみで機能します。