OpenLayersでミニマップを表示する方法

実際にやってみた

実物を見ていただいたほうが説明が早いと思うので、結論から。

以下は実際に動作します。

右上にミニマップが表示されています。

ソースコード

  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA=" crossorigin="anonymous"></script>
    <style>
        div.ol-custom-overviewmap,
      div.ol-custom-overviewmap.ol-uncollapsible {
        bottom: auto;
        left: auto;
        right: 0;
        top: 0;
      }

      div.ol-custom-overviewmap:not(.ol-collapsed)  {
        border: 1px solid black;
      }

      div.ol-custom-overviewmap div.ol-overviewmap-map {
        border: none;
        width: 100;
      }

      div.ol-custom-overviewmap div.ol-overviewmap-box {
        border: 2px solid red;
      }

      div.ol-custom-overviewmap:not(.ol-collapsed) button{
        bottom: auto;
        left: auto;
        right: 1px;
        top: 1px;
      }

      div.ol-rotate {
        top: 170px;
        right: 0;
      }
    </style>  

  
    <div id="map" style="height:300px"></div>
    <script>
      // 表示位置
      var tottori = ol.proj.fromLonLat([134.227352, 35.539909]);
      var view = new ol.View({
        center: tottori,
        zoom: 13
      });
      
      // マーカーの配置
      var marker = new ol.Feature(new ol.geom.Point(tottori));
      var markerStyle =  new ol.style.Style({
        image: new ol.style.Icon ({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            opacity: 0.95,
            src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        }),
        stroke: new ol.style.Stroke({
          width: 3,
          color: [255, 0, 0, 1]
        }),
        fill: new ol.style.Fill({
          color: [0, 0, 255, 0.6]
        })
      });
      marker.setStyle(markerStyle);

      var source = new ol.source.OSM();
      var overviewMapControl = new ol.control.OverviewMap({
        layers: [
            new ol.layer.Tile({
              source: source
            })
        ],
        collapsed: false,
        className: 'ol-overviewmap ol-custom-overviewmap',
      });

      // 地図の初期化
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            preload: 4,
            source: source
          }), 
          new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [marker]
            })
          })
        ],
        loadTilesWhileAnimating: true,
        view: view,
        controls: ol.control.defaults().extend([
          overviewMapControl
        ])
      });
      
    </script>

解説

ミニマップは「ol.control.OverviewMap」をMapのControlsに追加することで表示できます。

Controlsというのは、地図上のボタン等の制御部品を指します。

Mapオブジェクトにはデフォルトで、「+」（拡大）「-」（縮小）「i」（情報表示）のControlsが存在します。

72～81行目がOverviewMapを定義している箇所です。
以下のオプションを設定します。

layers……OverviewMap内に表示する画像を指定します。
　　　　　今回はMapと同じOSMを指定しています。
collapsed……falseにすると、開いた状態になります。
className……OverviewMapに指定するCSSのクラスを指定します。

定義したOverviewMapはMapのcontrolsに追加することで、表示されるようになります。
99行目で行っています。

まとめ

今回は地図上にミニマップを追加する方法についてお伝えしました。

これにより、現在地図上のどの部分が表示されているかを把握することができます。

是非導入してみてください。

OpenLayersについての別記事もぜひご覧ください！

①図形を描画する（マーカー、線、円、多角形）
②テキストを書き込む（矩形）
③フリーハンドで書き込む
 ④矢印で強調する
 ⑤固定画像を配置する
 ⑥図形を選択する
 ⑦図形を移動させる
 ⑧固定画像の移動
 ⑨図形を変形させる
 ⑩長方形を変形させる
 ⑪図形を複数選択する
 ⑫図形をJSON形式で保存＆読込
 ⑬図形を削除する
 ⑭線のスタイルを設定する
 ⑮図形の色を設定する

 【入門】地図を表示させる方法
 ボタンを配置する方法
 ミニマップを表示する方法

OpenLayersでミニマップを表示する方法

目次

実際にやってみた

ソースコード

解説

まとめ

コメント