OpenLayersで地図を回転させない方法

概要

OpenLayersで地図を表示する際に、通常の状態では地図が回転してしまいます。

回転の方法は、スマホやタブレットであればピンチで回転、パソコンであれば、「Shift+Alt+ドラッグ」で回転できます。

今回は、この回転をさせない方法を書きます。

環境

• OpenLayers 3.18

方法

最初はcotrollsでできそうな気がしてその辺りの情報を調べながらプログラムを書いても、うまくいきませんでした。

そこで別のものを使うのではないかと思って調べてみると、ol.interactionsというものが出てきました。

実際に使うのは、ol.interaction.defaults()という関数です。この関数に、地図上で操作できることの可否を決めるハッシュを渡すことができるので、これを使って回転させないようにします。

new ol.Map({
  interactions:
    ol.interaction.defaults({
      altShiftDragRotate: false,
      pinchRotate: false
    }),
  layers: 
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
});

altShiftDragRotateが、キーボードを使った回転を指定するもので、pinchRoateがスマホやタブレットのピンチの回転を指定するものです。

どちらとも、falseを指定しているので回転させられないようになります。

他にも、下記のようなものがありました。

• pinchZoom
  • ピンチによるズーム
• doubleClickZoom
  • ダブルクリックによるズーム

まとめ

最初は、OpenLayersで地図を回転させられることを知って驚きましたが、利用者に回転させられると困ることがあるかもしれないので、今回のことを調べました。

調べても、あまり出てこなかったので参考になればいいと思っています。