【OpenLayers】現在の中心座標やズームレベルを表示する方法まとめ

OpenLayers で現在の中心座標やズームレベルを表示する方法をまとめました。
地図の移動が完了したら現在の中心座標とズームレベルを取得し, 画面にそれらを表示することで実現できます。

ライブラリ参照
画面
スクリプト
成果物

ライブラリ参照

OpenLayers の js ライブラリとスタイルシートを参照します。
jQuery, Knockout の js ライブラリも参照します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>

画面

地図を描画する要素を用意します。
Knockout でズームレベルや中心座標を表示します。

<div id="map" class="map"></div>
<div class="map-footer">
  <div>Zoom Level: <span data-bind="text: zoomLevel"></span></div>
  <div>Center: <span data-bind="text: center"></span></div>
</div>

スクリプト

map をグローバル変数とします。
画面に表示するズームレベルや中心座標を ViewModel のプロパティに設定します。
ViewModel を View にバインドします。
map にイベントリスナーを追加します。
地図の移動が完了したら現在の中心座標とズームレベルを取得し, ViewModel のプロパティを更新します。

var map;
$(function () {
  var vm = {
    zoomLevel: ko.observable(''),
    center: ko.observable('')
  };
  ko.applyBindings(vm);

  initializeMap();

  map.on('moveend', e => {
    vm.zoomLevel(map.getView().getZoom());
    vm.center(ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326'));
  });
});

function initializeMap() {
  const baseMap = new ol.layer.Tile({
    source: new ol.source.OSM()
  });
  map = new ol.Map({
    target: 'map',
    layers: [baseMap],
    view: new ol.View({
      center: ol.proj.fromLonLat([130.93, 31.9]),
      zoom: 8
    })
  });
}

成果物

下記ソースコードを html ファイルとして保存し, Webブラウザで表示します。

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css"
    type="text/css">
  <style>
    .map {
      height: 85vh;
      width: 90vw;
      margin: auto;
    }

    .map-footer {
      position: absolute;
      left: 5vw;
      bottom: 5.5vh;
      background-color: rgba(0, 60, 136, 0.7);
      color: #fff;
      padding: 3px;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
  <script type="text/javascript">
    var map;
    $(function () {
      var vm = {
        zoomLevel: ko.observable(''),
        center: ko.observable('')
      };
      ko.applyBindings(vm);

      initializeMap();

      map.on('moveend', e => {
        vm.zoomLevel(map.getView().getZoom());
        vm.center(ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326'));
      });
    });

    function initializeMap() {
      const baseMap = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      map = new ol.Map({
        target: 'map',
        layers: [baseMap],
        view: new ol.View({
          center: ol.proj.fromLonLat([130.93, 31.9]),
          zoom: 8
        })
      });
    }
  </script>
  <title>Show Center And Zoom Level</title>
</head>

<body>
  <h2>Show Center And Zoom Level</h2>

  <div id="map" class="map"></div>
  <div class="map-footer">
    <div>Zoom Level: <span data-bind="text: zoomLevel"></span></div>
    <div>Center: <span data-bind="text: center"></span></div>
  </div>
</body>

</html>