ol5.3ex 10 - XYZ

「XYZ (xyz.html) 」を参考に地図を表示してみます。

説明に次のようにあります。

The XYZ source is used for tile data that is accessed through URLs that include a zoom level and tile grid x/y coordinates.

XYZ source は、ズームデータとタイルグリッド x/y 座標を含む URL を通してアクセスされるタイルデータに対して使用されます。

この例では、「Thunderforest（https://www.thunderforest.com/）」のサービスを使います。使い方（API の取得、価格等）についてはホームページを参照してください。

次の内容で index.js を作成します。

user@deb9-vmw:~/new-project$ vim index.js

import 'ol/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';

var map = new Map({

 target: 'map',
 /** 
  *  target [Map(options)]
  * The container for the map, either the element itself 
  * or the id of the element. If not specified at 
  * construction time, module:ol/Map~Map#setTarget must 
  * be called for the map to be rendered.
  * map のコンテナ、（HTML）エレメント自身、または、エレメント
  * の id。構築時に指定されていない場合、描画される map のた
  * めに module：ol/Map~Map#setTarget が呼び出されなけれ
  * ばなりません。
  * （ol5 API）
  */

 layers: [
 /** 
  * layers [Map(options)]
  * Layers. If this is not defined, a map with no layers 
  * will be rendered. Note that layers are rendered in 
  * the order supplied, so if you want, for example, a 
  * vector layer to appear on top of a tile layer, it 
  * must come after the tile layer.
  * レイヤ（layers）。これが定義されていない場合、レイヤのない
  * マップが描画されます。レイヤは提供された順番に描画されるの
  * で、例えば、ベクタレイヤがタイルレイヤの上に表示するよう望む
  * なら、タイルレイヤの後に来なければならないことに注意してくだ
  * さい。（ol5 API）
  */

  new TileLayer({
  /** 
   *  ol/layer/Tile~TileLayer 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング（事前描画）を提供するレイヤソースのため
   * の、特定の解像度でのズームレベルによって編成されているグ
   * リッドのタイルイメージ。（ol5 API）
   */

   source: new XYZ({
   /** 
    *  source [TileLayer(options)]
    * Source for this layer.
    * レイヤのソース。（ol5 API）
    */

   /** ol.source.XYZ
    * Layer source for tile data with URLs in a set XYZ 
    * format that are defined in a URL template. By 
    * default, this follows the widely-used Google grid 
    * where x 0 and y 0 are in the top left. Grids like 
    * TMS where x 0 and y 0 are in the bottom left can 
    * be used by using the {-y} placeholder in the URL 
    * template, so long as the source does not have a 
    * custom tile grid. In this case,  
    * module:ol.source.TileImage can be used with a 
    * tileUrlFunction such as:
    *
    * tileUrlFunction: function(coordinate) { 
    *  return 'http://mapserver.com/' 
    *  + coordinate[0] + '/' 
    *  + coordinate[1] + '/' 
    *  + coordinate[2] + '.png'; }
    * 
    * URL テンプレートで定義されているセット XYZ 形式の URL 
    * を持つタイルデータのレイヤソース。デフォルトでは、これは、
    * x0 と y0 が左上にある広く使用されている Google のグリッド
    * に従います。x0 と y0 が左下にある TMS のようなグリッドは、
    * ソースがカスタムタイルグリッドを持っていない限り、URL　テ
    * ンプレートに {-y} プレースホルダを使用して使用することが
    * できます。この場合、ol.source.TileImage は 
    * tileUrlFunction で次のように使用できます。
    * （ol5 API）
    */

    url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
    '?apikey=Your API key from http://www.thunderforest.com/docs/apikeys/ here'

    /** url
     * URL template. Must include {x}, {y} or {-y}, and 
     * {z} placeholders. A {?-?} template pattern, for 
     * example subdomain{a-f}.domain.com, may be used 
     * instead of defining each one separately in the 
     * urls option.
     * URLテンプレート。 {x}、{y} または {-y}、と {z} プレー
     * スホルダを含める必要があります。例えば 
     * subdomain{a-f}.domain.com の {?-?} テンプレートパ
     * ターンは、urls オプションでそれぞれを個別に定義する代
     * わりに、使用することができます。
     *（ol5 API）
     */

   })
  })
 ],

 view: new View({
 /** 
  *  view [Map(options)]
  * The map's view. No layer sources will be fetched 
  * unless this is specified at construction time or 
  * through module:ol/Map~Map#setView.
  * map（マップ）の view（ビュー）。これが構築時に指定されて
  * いないか、module：ol/Map~Map#setView を介さなければ、
  * 取得されるレイヤソースはありません。
  * （ol5 API）
  */

  center: [-472202, 7530279],
  /**
   *  center[new View(opt_options)]
   * The initial center for the view. The coordinate system 
   * for the center is specified with the projection option. 
   * Layer sources will not be fetched if this is not set, 
   * but the center can be set later with #setCenter.
   * view（ビュー）の初期 center（中心）値。 center の座標系
   * は、projection（投影法）オプションで指定されます。これが
   * 設定されなければレイヤソースは取得されませんが、center は 
   * #setCenter で後で設定できます。
   * （ol5 API）
   */

  zoom: 12
  /**
   *  zoom[new View(opt_options)]
   * Only used if resolution is not defined. Zoom level  
   * usedto calculate the initial resolution for the view. 
   * The initial resolution is determined using the 
   * #constrainResolution method.
   * resolution（解像度）が定義されていない場合のみ使用されま
   * す。view の初期 resolution（解像度）を計算するために使用
   * される zoom（ズーム）レベル。初期 resolution は、
   * #constrainResolution メソッドを使用して決定されます。
   * （ol5 API）
   */

 })
});

次に index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.html

<!doctype html>
<html>
 <head>
  <title>XYZ</title>

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

 </head>
 <body>
  <div id="map" class="map"></div>
  <script src="./index.js"></script>
 </body>
</html>

npm start を実行します。

user@deb9-vmw:~/new-project$ npm start

Webブラウザのアドレス欄に

http://localhost:1234

と入力して Enter キーを押します。

ol5-ex010-01.png