説明に次のようにあります。
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 を通してアクセスされるタイルデータに対して使用されます。
XYZ source は、ズームデータとタイルグリッド x/y 座標を含む URL を通してアクセスされるタイルデータに対して使用されます。
この例では、「Thunderforest（https://www.thunderforest.com/）」のサービスを使います。使い方（API の取得、価格等）についてはホームページを参照してください。
次の内容で index.js を作成します。
user@deb9-vmw:~/new-project$ vim index.js
次に index.html を作成します。
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） */
}) });
user@deb9-vmw:~/new-project$ vim index.html
npm start を実行します。<!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>
user@deb9-vmw:~/new-project$ npm start
Webブラウザのアドレス欄に
http://localhost:1234
と入力して Enter キーを押します。
