OpenLayers v5.1.3 による地図表示例 #JavaScript

OpenLayers Examples と GIS OpenLayers3 Raster Layer の例を参考に、OepnLayers パッケージのダウンロードなしで、各種地図を OepnLayers v5.1.3 で表示するように調整。

動作確認環境： MacbookPro (2015early), google chrome (68.0.3440.106,64bit)

OSM (OpenStreetMap)

osm-tiles.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <title>OpenLayers 5.1.3 example OSM+debug</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var osmSource = new ol.source.OSM();
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: osmSource
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: ol.proj.fromLonLat([139.63, 35.51]),
          zoom: 10
        })
      });
    </script>
  </body>
</html>

Stamen Tile Server (watercolor)

stamen-water-tiles.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <title>OpenLayers 5.1.3 example STAMEN+debug</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var stamenSource = new ol.source.Stamen({layer: 'watercolor'});
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: stamenSource
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: ol.proj.fromLonLat([139.63, 35.51]),
          zoom: 10
        })
      });
    </script>
  </body>
</html>

Stamen Tile Server (toner)

stamen-toner-tiles.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <title>OpenLayers 5.1.3 example STAMEN+debug</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var stamenSource = new ol.source.Stamen({layer: 'toner'});
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: stamenSource
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: ol.proj.fromLonLat([139.63, 35.51]),
          zoom: 10
        })
      });
    </script>
  </body>
</html>

地理院タイル (白地図)

利用規約は国土地理院コンテンツ利用規約を参照
地理院タイル一覧 https://maps.gsi.go.jp/development/ichiran.html

gsi-tiles.html

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <title>OpenLayers 5.1.3 example GSI+debug</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var gsi_raster = new ol.layer.Tile({
        source: new ol.source.XYZ({
          attribution: [
            new ol.control.Attribution({
              html: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院白地図</a>"
            })
          ],
          url: "https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png",
          projection: "EPSG:3857"
        })
      });

      var map = new ol.Map({
        layers: [
          gsi_raster
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
          center: ol.proj.fromLonLat([139.63, 35.51]),
          zoom: 10
        })
      });
    </script>
  </body>
</html>