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>
  
  
    <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 MyControl = (function (Control) {
        function MyControl(opt_options) {
          var options = opt_options || {};

          var button = document.createElement('button');
          button.innerHTML = '警';

          var element = document.createElement('div');
          element.className = 'ol-unselectable ol-control';
          element.style.top = '100px';
          element.style.left = '5px';
          element.appendChild(button);

          Control.call(this, {
            element: element,
            target: options.target
          });

          button.addEventListener('click', this.alert.bind(this), false);
        }

        if ( Control ) MyControl.__proto__ = Control;
        MyControl.prototype = Object.create( Control && Control.prototype );
        MyControl.prototype.constructor = MyControl;

        MyControl.prototype.alert= function alert() {
          alert('My Control!')
        };

        return MyControl;
      }(ol.control.Control));

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

上記ソースを実行した結果が以下になります。
「警」と記載されたボタンが地図上に表示されることが確認できます。

「警」ボタンを押下すると、「My Control!」のアラートが表示されます。

解説

ボタン追加の箇所についての解説です。

40～70行目でボタンについての定義を行っています。
以下の定義を行っています。

ボタンに表示する文字（45行目）
適用するCSS（48行目）
表示位置（49, 50行目）
押下された際の処理内容（66行目）

66行目ではアラート表示の処理を行っています。

74～76行目で、上記で定義したボタンを地図に追加しています。
この記述がなければボタンが追加されません。

まとめ

OpenLayersでは「Controls」という地図上にボタンを配置する機能が標準で備わっています。

上記のような短い記述で、業務要件に対応するためのカスタムボタンを配置することができます。
単に地図を表示するだけでなく、地図にまつわる動作を行うためには、Controlsに独自のボタンを追加する必要があります。

次回はもう少し、実践に即したControlsの使用方法をお伝えいたします。

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

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

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

OpenLayersで地図コントロール上に独自のボタンを配置する

目次

実際にやってみた

解説

まとめ

コメント