【OpenLayers 6】最大/最小ズームを設定する

Contents

1 はじめに
2 最大/最小ズームを設定する方法
3 実装例

はじめに

　マップの使用用途によっては、最大/最小ズームを設定して、ズームレベルを制限したい場合があります。そこで今回は、最大/最小ズームを設定する方法について説明したいと思います。

最大/最小ズームを設定する方法

　マップの view に対して、maxZoom と minZoom をそれぞれ設定します。

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,    //ズームレベル
    minZoom: 5, //最小ズームレベル
    maxZoom: 7  //最大ズームレベル
  })
});

実装例

　全体のソースコードと実行例は以下の通りです。

<!DOCTYPE html>
<!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,    //ズームレベル
      minZoom: 5, //最小ズームレベル
      maxZoom: 7  //最大ズームレベル
    })
  });
}

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

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

　実装例（最小ズームレベルが 5, 最大ズームレベルが 7 になっています）