【OpenLayers】地図を表示する方法まとめ

OpenLayers で地図を表示する方法をまとめました。
OpenLayers のライブラリを参照し, DOM 構築完了後に ol.Map インスタンスを生成します。

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

ライブラリ参照

OpenLayers の 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>

画面

地図を描画する要素を用意します。

<div id="map"></div>

スクリプト

ベースマップとして OpenStreetMap を用意します。
ol.Map インスタンスを作成します。
target に画面で用意した要素の id を指定します。
layers に地図に表示したいレイヤを追加します。
- 今回はベースマップを追加します。
view で中心座標やズームレベルを設定します。
DOM 構築完了後に地図初期化処理を実行します。
今回は jQuery にしました。

$(function(){
  initializeMap();
});

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

成果物

下記ソースコードを 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;
    }
  </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 type="text/javascript">
    $(function(){
      initializeMap();
    });

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

<body>
  <h2>Map</h2>
  <div id="map" class="map"></div>
</body>

</html>