2 - ol4.5ex 175b - Vector Tile Info vector-tile-info 2

「vector-tile-info.js（2175-ol4ex.js）」は、マップを表示するための JavaScript ファイルです。

「2175-ol4ex.js」

var map = new ol.Map({
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 }),

 layers: [new ol.layer.VectorTile({
 /** ol.layer.VectorTile
  * Layer for vector tile data that is rendered client-side. 
  * クライアント側にレンダリングされるベクタタイルデータのレイ 
  * ヤ。
  * （ol4 API）
  */

  source: new ol.source.VectorTile({
  /** ol.source.VectorTile
   * Class for layer sources providing vector data divided 
   * into a tile grid, to be used with ol.layer.VectorTile. 
   * Although this source receives tiles with vector 
   * features from the server, it is not meant for feature 
   * editing. Features are optimized for rendering, their 
   * geometries are clipped at or near tile boundaries and 
   * simplified for a view resolution. See ol.source.Vector 
   * for vector sources that are suitable for feature 
   * editing.
   * ol.layer.VectorTile で使用するタイルとグリッドに分割され
   * たベクタデータを提供するレイヤソースのクラス。このソース
   * はベクタフィーチャを持つタイルをサーバから受信しますが、
   * フィーチャの編集を意味したものではありません。フィーチャ
   * はレンダリングのために最適化され、そのジオメトリはタイル
   * の境界線、または、その近くでクリップされ、ビュー解像度の
   * ために単純化されます。フィーチャ編集に適したベクトルソー
   * スについては、ol.source.Vector を参照してください。
   * （ol4 API）
   */

   format: new ol.format.MVT(),
   /** format:
    * Feature format for tiles. Used and required by the 
    * default tileLoadFunction.
    * タイルのためのフィーチャフォーマット。デフォルトの 
    * tileLoadFunction によって使用され、必須とされます。
    * （ol4 API）
    */

   /** ol.format.MVT
    * Feature format for reading data in the Mapbox MVT 
    * format.
    * Mapbox MVT フォーマットの描画データのためのフィーチャ
    * フォーマット。（ol4 API）
    */

   url: 'https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf'
   /** 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} のプレースホル
    * ダーが必要です。 urlsオプションでそれぞれ個別に定義する
    * 代わりに、例えばサブドメイン {a-f}.domain.com の、
    * {？-？} テンプレートパターンを使用することができます。
    * （ol4 API）
    */

  })
 })]
});

map.on('pointermove', showInfo);
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。
 * （ol4 API）
 */

var info = document.getElementById('info');
/** document.getElementById()
 * Returns a reference to the element by its ID; the ID 
 * is a string which can be used to uniquely identify 
 * the element, found in the HTML id attribute.
 * ID によってエレメントに参照を返します。ID は、HTML id 
 * 属性に見られるエレメントを一意に識別するために使用される
 * 文字列です。
 * （MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/Document/getElementById]）
 */

function showInfo(event) {

 var features = map.getFeaturesAtPixel(event.pixel);
 /** getFeaturesAtPixel(pixel, opt_options)
  * Get all features that intersect a pixel on the 
  * viewport.
  * viewport（ビューポート）上のピクセルと交差するすべての
  * フィーチャを取得します。（ol4 API）
  */

 if (!features) {

  info.innerText = '';
  /** Node.innerText
   * Node.innerText is a property that represents the 
   * "rendered" text content of a node and its descendants. 
   * As a getter, it approximates the text the user would 
   * get if they highlighted the contents of the element 
   * with the cursor and then copied to the clipboard. 
   * This feature was originally introduced by Internet 
   * Explorer, and was formally specified in the HTML 
   * standard in 2016 after being adopted by all major 
   * browser vendors.
   * Node.innerTextは、ノードと子孫の「描画された」テキス
   * トコンテンツを表すプロパティです。getter と、カーソル
   * でエレメントのコンテンツを強調表示し、それからクリッ
   * プボードにコピーした場合取得するテキストを近似しま
   * す。この機能は、元々、Internet Explorer によって導
   * 入され、主要なブラウザベンダーによって採用された後、
   * 2016年に HTML標準に正式に制定されました。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * API/Node/innerText]）
   */

  /** getter
   * The get syntax binds an oject property to a function 
   * that will be called when that property is looked up.
   * get 構文は、オブジェクトプロパティを、そのプロパティが
   * 検索されたときに呼び出される関数にバインドします。
   * （MDN[https://developer.mozilla.org/en-US/docs/Web/
   * JavaScript/Reference/Functions/get]）
   */

  info.style.opacity = 0;
  return;
 }

 var properties = features[0].getProperties();
 /** getProperties()
  * Get an object of all property names and values.
  * オブジェクトの全ての属性名と値を取得します。（ol4 API）
  */

 info.innerText = JSON.stringify(properties, null, 2);
 /** JSON.stringify()
  * The JSON.stringify() method converts a JavaScript 
  * value to a JSON string, optionally replacing values 
  * if a replacer function is specified, or optionally 
  * including only the specified properties if a replacer 
  * array is specified.
  * JSON.stringify（）メソッドは、JavaScript 値を JSON 
  * 文字列に変換します。replacer 関数が指定されている場合は、
  * オプションで値を置換するか、または、replacer 配列が指定さ
  * れている場合は、指定のプロパティのみをオプションで含みま
  * す。
  * （MDN[https://developer.mozilla.org/en-US/docs/Web/
  * JavaScript/Reference/Global_Objects/JSON/stringify]）
  */

 info.style.opacity = 1;
}