【OpenLayers 6】マップタイルを切り替える

はじめに

 マップタイルには、Google Maps のような有料の物だけでなく、OpenStreetMap や国が公開しているデータなど様々なオープンデータも存在します。今回は OpenLayers 6 で、それらのマップタイルを切り替える方法について説明します。

マップタイルを設定する方法

 まず、マップタイルを設定する方法について説明します。例えば、国土地理院が提供する地理院タイルを使用する場合、以下のようにタイルレイヤーを設定します。

layers: [
  new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>",  //クレジット
      url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png" //タイルサーバーのURL
    })
  })
]

 このタイルレイヤーを用いて地図を表示するには、以下のようなソースコードになります。

<!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.XYZ({
          attributions: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>",
          url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([142.14, 43.65]),  //初期の中心位置 [経度, 緯度]
      zoom: 6 //ズームレベル
    })
  });
}

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

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

 以下実装例です。

複数のタイルを切り替える方法

 次に、複数のマップタイルを切り替える方法について説明します。古いバージョンの OpenLayers だと LayerSwitcher というのがあり、比較的簡単に実装できたのですが、現在のバージョン(ver 6.9.0)にはないので、外部のプルダウンメニューからマップタイルを切り替えていきます。

 まず、removeLayer() で現在設定しているタイルレイヤーを削除します。

map.removeLayer(MapTile[currentTile]);

 次に、addLayer() で設定したいタイルレイヤーをマップに貼りなおします。

map.addLayer(MapTile[currentTile]);

 以上のようにして、プルダウンメニューからマップタイルを切り替えられるようにしてみました。このとき全体のソースコードは次のようになります。

<!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>
<!-- プルダウンメニュー -->
<select id="TileSelect" name="Tile_Select" onChange="TileSet()">
  <option value="0" selected>OpenStreetMap</option>
  <option value="1">Humanitarian map style</option>
  <option value="2">OpenTopoMap</option>
</select>

<!-- 以下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>

//グローバル変数
var MapTile = [
  OSMtile = new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors",
      url: "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
    })
  }),
  HOTtile = new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: "© <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors, Tiles: © <a href='http://map.hotosm.org/' target='_blank'>HOT</a>",
      url: "http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
    })
  }),
  OTMtile = new ol.layer.Tile({
    source: new ol.source.XYZ({
      attributions: "© <a href='<a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors, <a href='http://viewfinderpanoramas.org/' target='_blank'>SRTM</a> | map style: © <a href='https://opentopomap.org/' target='_blank'>OpenTopoMap</a>",
      url: "http://a.tile.opentopomap.org/{z}/{x}/{y}.png"
    })
  })
];
var currentTile = 0;
var map;

function init_map() {
  map = new ol.Map({
    target: 'mapcontainer',
    layers: [MapTile[currentTile]],
    view: new ol.View({
      center: ol.proj.fromLonLat([142.14, 43.65]),  //初期の中心位置 [経度, 緯度]
      zoom: 6 //ズームレベル
    })
  });
}

function TileSet() {
  map.removeLayer(MapTile[currentTile]);
  currentTile = document.getElementById("TileSelect").value;
  map.addLayer(MapTile[currentTile]);
}

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

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

 以下実装例です。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です