2 - ol3.11ex 135b - Mapbox vector tiles example 2

「mapbox-vector-tiles.js（2135-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2135-ol3ex.js」

var key = 'pk.eyJ...（省略）';

var map = new ol.Map({
 layers: [

  new ol.layer.VectorTile({
  /** ol.layer.VectorTile
   * Layer for vector tile data that is rendered 
   * client-side. 
   * クライアント側でレンダリングされるベクタタイルデータのレイ
   * ヤ。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

   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 を参照してく
    * ださい。
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

    attributions: [new ol.Attribution({
    /** ol.Attribution
     * An attribution for a layer source.
     * レイヤソースの属性（ol3 API）
     */

     html: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
      '© <a href="http://www.openstreetmap.org/copyright">' +
      'OpenStreetMap contributors</a>'

    })],

    format: new ol.format.MVT(),
    /** ol.format.MVT
     * Feature format for reading data in the Mapbox MVT 
     * format.
     * Mapbox MVT フォーマットでデータを描画するためのフィーチャ
     * フォーマット。
　   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
    /** ol.tilegrid.createXYZ(opt_options)
     * Creates a tile grid with a standard XYZ tiling 
     * scheme.
     * 標準のXYZタイルスキーマを持つタイルグリッドを作成します。
　   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    /** maxZoom
     * Maximum zoom. The default is ol.DEFAULT_MAX_ZOOM. 
     * This determines the number of levels in the grid 
     * set. For example, a maxZoom of 21 means there are 
     * 22 levels in the grid set.
     * 最大ズーム。デフォルトはol.DEFAULT_MAX_ZOOMです。これは、
     * グリッドのセット内のレベルの数を決定します。たとえば、21 
     * のmaxZoom は、グリッドセット内に 22 のレベルがあることを
     * 意味します。
　   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    tilePixelRatio: 16,
    /** tilePixelRatio
     * The pixel ratio used by the tile service. For 
     * example, if the tile service advertizes 256px by 
     * 256px tiles but actually sends 512px by 512px 
     * tiles (for retina/hidpi devices) then 
     * tilePixelRatio should be set to 2. Default is 1.
     * タイルサービスによって使用されるピクセル比。たとえば、タ
     * イルサービスが 256px x 256px タイルを通知する場合、実際
     * には 512px x 512px  タイル（retina / hidpiデバイス用）
     * を送信し、それから、タイル Pixel Ratio は 2 に設定しな
     * ければなりません。デフォルトは 1 です。
　   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    url: 'http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
     '{z}/{x}/{y}.vector.pbf?access_token=' + key
   }),

   style: createMapboxStreetsV6Style()
   /** style
    * Layer style. See ol.style for default style which 
    * will be used if this is not defined.
    * レイヤスタイル。これが定義されていない場合に使用されるデ
    * フォルトのスタイルのための ol.style を参照してください。
　  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */

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

// ol.style.Fill, ol.style.Icon, ol.style.Stroke, 
// ol.style.Style and ol.style.Text are required for 
// createMapboxStreetsV6Style()