【OpenLayers 6】マップを回転させない方法

Contents

1 はじめに
2 マップを回転させない方法
3 実装例

はじめに

　OpenLayers はデフォルトで、スマホやタブレットであればピンチで回転、パソコンであれば、Shift+Alt+ドラッグで回転できます。しかし、回転できてしまうと操作性が落ちてしまう場合もあるので、今回はマップを回転させない方法について説明したいと思います。

マップを回転させない方法

　マップの回転に関するデフォルト設定を変更するには、ol.interaction.defaults() を使用します。この関数の、 altShiftDragRotate と pinchRotate を false に設定します。

//マップの表示
var map = new ol.Map({
  target: 'mapcontainer',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([142.14, 43.65]),
    zoom: 6
  }),
  interactions: ol.interaction.defaults({
    altShiftDragRotate: false,
    pinchRotate: false
  })
});

実装例

　全体のソースコードと実装例は以下のようになります。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下OpenLayersのJavaScriptとCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<script>

function init_map() {

  //マップの表示
  var map = new ol.Map({
    target: 'mapcontainer',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([142.14, 43.65]),
      zoom: 6
    }),
    interactions: ol.interaction.defaults({
      altShiftDragRotate: false,
      pinchRotate: false
    })
  });
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

　実装例（マップの回転が出来なくなっています）