【OpenLayers 6】マップを固定する方法

Contents

1 はじめに
2 マップを固定する方法
3 実装例

はじめに

　マップを画像のようにサイトへと埋め込みたい場合、スクロールやズームが動作してしまうとかえって扱いづらくなってしまうことがあります。そこで今回は OpenLayers を使った埋め込みマップについて、完全に固定する方法について説明したいと思います。

マップを固定する方法

　スクロールやズームなど、マップのイベントに関するデフォルト設定を変更するには、ol.interaction.defaults() を使用します。固定するには、altShiftDragRotate, doubleClickZoom, keyboard, mouseWheelZoom, shiftDragZoom, dragPan, pinchRotate, pinchZoom を全て false に設定します。

var map = new ol.Map({
  ...
  interactions: ol.interaction.defaults({ 
    altShiftDragRotate: false,
    doubleClickZoom:  false,
    keyboard: false,
    mouseWheelZoom: false,
    shiftDragZoom: false,
    dragPan: false,
    pinchRotate: false,
    pinchZoom: false
  })
  ...
)};

　同時にデフォルトで左上にあるズームコントロールも非表示にしておきます。

var map = new ol.Map({
  ...
  controls : ol.control.defaults({
    attribution : false,
    zoom : 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,
      doubleClickZoom:  false,
      keyboard: false,
      mouseWheelZoom: false,
      shiftDragZoom: false,
      dragPan: false,
      pinchRotate: false,
      pinchZoom: false
    }),
    controls : ol.control.defaults({
      attribution : false,
      zoom : false,
    })
  });
}

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

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

　実装例（マップが固定されて動かせなくなっています）