2 - ol3.12ex 141b - OSM Vector Tiles 2

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

「2141-ol3ex.js」

var format = new ol.format.TopoJSON();
/** ol.format.TopoJSON 
 * Feature format for reading and writing data 
 * in the TopoJSON format.
 * TopoJSON フォーマットでデータを読み書きするためのフィー
 * チャのフォーマット。（ol3 API）
 */

var tileGrid = ol.tilegrid.createXYZ({ maxZoom: 19 });
/** 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 のチェックを外すと表示]）
  */

var roadStyleCache = {};
var roadColor = {
 'major_road': '#776',
 'minor_road': '#ccb',
 'highway': '#f39'
};
var landuseStyleCache = {};

var buildingStyle = new ol.style.Style({
/** ol.style.Style 
 * Container for vector feature rendering styles. Any 
 * changes made to the style or its children through 
 * set*() methods will not take effect until the feature 
 * or layer that uses the style is re-rendered.
 * ベクタフィーチャがスタイルを描画するためのコンテナ。
 * スタイルや set*() メソッドを通じてその子に加えられた変
 * 更は、スタイルを使用するフィーチャまたはレイヤが再レン
 * ダリングされるまで有効になりません。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 fill: new ol.style.Fill({
 /** ol.style.Fill 
  * Set fill style for vector features.
  * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
  */

  color: '#666',
  opacity: 0.4
 }),

 stroke: new ol.style.Stroke({
 /** ol.style.Stroke 
  * Set stroke style for vector features. 
  * Note that the defaults given are the Canvas defaults, 
  * which will be used if option is not defined. 
  * The get functions return whatever was entered in the 
  * options;  they will not return the default.
  * ベクタフィーチャのためのストロークスタイルの設定。
  * デフォルトは、オプションが定義されていない場合に使用され
  * る Canvas のデフォルトを与えられることに注意してください。
  * GET 関数は、オプションで入力されたものはすべて返します。
  * それらはデフォルトを返しません。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

  color: '#444',
  /** color:
   * Color. See ol.color for possible formats. Default 
   * null; if null, the Canvas/renderer default black 
   * will be used.
   * 色。可能なフォーマットについては ol.color を参照してくださ
   * い。デフォルトは null; null の場合、Canvas/renderer デ
   * フォルトの黒が使用されます。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

  width: 1
 })
});

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 のチェックを外すと表示]）
    */

    format: format,
    /** format:
     * Feature format for tiles. Used and required by the 
     * default tileLoadFunction.
     * タイルのフィーチャフォーマット。デフォルトの 
     * tileLoadFunction によって使用され必要とされます。
     * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    tileGrid: tileGrid,
    url: 'http://{a-c}.tile.openstreetmap.us/' +
     'vectiles-water-areas/{z}/{x}/{y}.topojson'
   }),
   style: new ol.style.Style({
    fill: new ol.style.Fill({
     color: '#9db9e8'
    })
   })
  }),
  new ol.layer.VectorTile({
   source: new ol.source.VectorTile({
    format: format,
    tileGrid: tileGrid,
    url: 'http://{a-c}.tile.openstreetmap.us/' +
     'vectiles-highroad/{z}/{x}/{y}.topojson'
   }),

   style: function(feature, resolution) {
   /** style:
    * Layer style. See ol.style for default style which 
    * will be used if this is not defined.
    * レイヤースタイル。これが定義されていない場合に使用される
    * デフォルトスタイルの ol.style を参照してください。
    * （ol3 API）
    */

    var kind = feature.get('kind');
    /** get(key)
     * Gets a value.Gets a value.（ol3 API）
     */

    var railway = feature.get('railway');
    var sort_key = feature.get('sort_key');
    var styleKey = kind + '/' + railway + '/' + sort_key;
    var style = roadStyleCache[styleKey];
    if (!style) {
     var color, width;
     if (railway) {
      color = '#7de';
      width = 1;
     } else {
      color = roadColor[kind];

      width = kind == 'highway' ? 1.5 : 1;
      /** 条件演算子 condition ? expr1 : expr2 
       * condition: true か false かを評価する条件文です。
       * expr1, expr2: 各々の値の場合に実行する式です。
       * condition が true の場合、演算子は expr1 の値を
       * 選択します。そうでない場合は expr2 の値を選択します。
       * （MDN[https://developer.mozilla.org/ja/docs/Web/
       * JavaScript/Guide/Expressions_and_Operators]）
       */

     }
     style = new ol.style.Style({
      stroke: new ol.style.Stroke({
       color: color,
       width: width
      }),
      zIndex: sort_key
     });
     roadStyleCache[styleKey] = style;
    }
    return style;
   }
  }),
  new ol.layer.VectorTile({
   source: new ol.source.VectorTile({
    format: format,
    tileGrid: tileGrid,
    url: 'http://{a-c}.tile.openstreetmap.us/' +
     'vectiles-buildings/{z}/{x}/{y}.topojson'
   }),
   style: function(f, resolution) {
    return (resolution < 10) ? buildingStyle : null;
   }
  }),
  new ol.layer.VectorTile({
   source: new ol.source.VectorTile({
    format: format,
    tileGrid: tileGrid,
    url: 'http://{a-c}.tile.openstreetmap.us/' +
     'vectiles-land-usages/{z}/{x}/{y}.topojson'
   }),

   visible: false,
   /** visible:
    * Visibility. Default is true (visible).
    * （ol3 API）
    */

   style: function(feature, resolution) {
    var kind = feature.get('kind');
    var styleKey = kind;
    var style = landuseStyleCache[styleKey];
    if (!style) {
     var color, width;
     color = {
      'parking': '#ddd',
      'industrial': '#aaa',
      'urban area': '#aaa',
      'park': '#76C759',
      'school': '#DA10E7',
      'garden': '#76C759',
      'pitch': '#D58F8D',
      'scrub': '#3E7D28',
      'residential': '#4C9ED9'
     }[kind];
     width = kind == 'highway' ? 1.5 : 1;
     style = new ol.style.Style({
      stroke: new ol.style.Stroke({
       color: color,
       width: width
      }),
      fill: new ol.style.Fill({
       color: color,
       opacity: 0.5
      })
     });
     landuseStyleCache[styleKey] = style;
    }
    return style;
   }
  })
 ],
 target: 'map',
 view: new ol.View({

  center: ol.proj.fromLonLat([-74.0064, 40.7142]),
  /** ol.proj.fromLonLat(coordinate, opt_projection)
   * Transforms a coordinate from longitude/latitude to a 
   * different projection.
   * 緯度/経度座標から異なる投影に変換します。（ol3 API）
   */

  maxZoom: 19,
  zoom: 15
 })
});