2 - ol3.1ex 49b - XYZ Esri EPSG:4326 tileSize 512 example 2

「xyz-esri-4326-512.js（249-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「249-ol3ex.js」

var attribution = new ol.Attribution({
/** ol.Attribution
 * An attribution for a layer source.
 * レイヤソースに対する attribution。（ol3 API）
 */

 html: 'Copyright:© 2013 ESRI, i-cubed, GeoEye'
});

var projection = ol.proj.get('EPSG:4326');
/** ol.proj.get
 * Fetches a Projection object for the code specified.
 * 指定されたコードのプロジェクション·オブジェクトを取得
 * （0l3 API）
 */

var projectionExtent = projection.getExtent();
/** getExtent()
 * Get the validity extent for this projection.
 * この投影の有効範囲を取得。（ol3 API）
 */

// The tile size supported by the ArcGIS tile service.
// タイルサイズは、ArcGIS タイルサービスでサポートされます。

var tileSize = 512;
/**
 * Calculate the resolutions supported by the ArcGIS tile 
 * service.
 * There are 16 resolutions, with a factor of 2 between 
 * successive esolutions. The max resolution is such that 
 * the world (360°) fits into two (512x512 px) tiles.
 * ArcGIS のタイルサービスによってサポートされている解像度を計算
 * します。
 * 解像度が2倍間隔の16の解像度があります。最大解像度は、世界地図
 * （360°）が 512×512 ピクセルの2個のタイルに収まるものです。
 * （訳注：ESRI_Imagery_World_2D (MapServer)[http://
 * services.arcgisonline.com/ArcGIS/rest/services/
 * ESRI_Imagery_World_2D/MapServer]も参照してください。）
 */

var maxResolution = ol.extent.getWidth(projectionExtent) / (tileSize * 2);
/** ol.extent.getWidth(extent)
 * Return: Width（ol3 API）
 */

var resolutions = new Array(16);
/** Array(arraylength)
 * JavaScript は配列を扱うことができます。配列とは順序を持つ複数
 * のデータの集合であり、JavaScript のグローバルオブジェクトであ 
 * る Array は、高位の、（C言語等で云うところの）「リスト」の様
 * な、配列のコンストラクタです。
 * arraylength
 * Array コンストラクタに渡される唯一の引数（arrayLength）に 0 
 * から 4,294,967,295( 232-1 ) までの整数値を指定する場合は、そ
 * の値を要素数とする配列が作成されます。その際に範囲外の値を指
 * 定した場合には、例外: RangeError がスローされます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/
 * JavaScript/Reference/Global_Objects/Array]）
 */

var z;
for (z = 0; z < 16; ++z) {

 resolutions[z] = maxResolution / Math.pow(2, z);
 /** Math.pow(base, exponent)
  * base を exponent 乗した値、つまり、base^exponent の値を返
  * します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/eference/Global_Objects/Math/pow]）
  */

}

var urlTemplate = 'http://services.arcgisonline.com/arcgis/rest/services/' +
 'ESRI_Imagery_World_2D/MapServer/tile/{z}/{y}/{x}';

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

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

   /** ol.source.XYZ and ol.tilegrid.XYZ have no resolutions 
   * config 
   * ol.source.XYZ と ol.tilegrid.XYZ は　解像度の設定があり
   * ません。
   */

   source: new ol.source.TileImage({
   /** ol.source.TileImage 
    * Base class for sources providing images divided into 
    * a tile grid.
    * タイルグリッドに分割された画像を提供するソースの基本クラス。
    * （ol3 API）
    */

    attributions: [attribution],
    tileUrlFunction: function(tileCoord, pixelRatio, projection) {
     var z = tileCoord[0];
     var x = tileCoord[1];
     var y = -tileCoord[2] - 1;
     // wrap the world on the X axis
     // X 軸に世界地図を巻きます。
     var n = Math.pow(2, z + 1); // 2 tiles at z=0
     x = x % n;

     if (x * n < 0) {
     /**
      * x and n differ in sign so add n to wrap the result
      * to the correct sign
      * x と n の符号が異なるので、正しい符号に結果をまとめる 
      * ために n を追加
      */ 
      x = x + n;
     }

     return urlTemplate.replace('{z}', z.toString())
  /** replace(regexp|substr, newSubStr|function[, flags])
  * 正規表現と文字列との間のマッチを見つけ、マッチした部分文
  * 字列を新しい部分文字列に置き換えます。
  * regexp: RegExp オブジェクトです。そのマッチは 第二引数の
  * 戻り値によって置き換えられます。
  * substr: newSubStr によって置き換えられる 文字列 (String) 。
  * newSubStr: 第一引数で受け取った部分文字列を置き換える文字列 。
  * function: （ 第一引数で受け取った部分文字列と置き換える
  * ための）新しい部分文字列を生成するために実行される関数。
  * flags: (SpiderMonkey 拡張) 正規表現のフラグの任意の組み
  * 合わせを含む文字列です。 
  */

     /** Number.prototype.toString( [ radix ] )
      * 指定された Number オブジェクトを表す 文字列を返します。
      * radix: 数値を表すために使われる基数を指定する、2 から 36 
      * までの整数。省略したときは 10。
      * MDN（[https://developer.mozilla.org/ja/docs/Web/
      * JavaScript/Reference/Global_Objects/Number/toString]）
      */

      .replace('{y}', y.toString())
      .replace('{x}', x.toString());
    },
    projection: projection,

    tileGrid: new ol.tilegrid.TileGrid({
    /** ol.tilegrid.TileGrid
     * Base class for setting the grid pattern for sources 
     * accessing tiled-image servers.
     * タイル画像サーバにアクセスするソースのグリッドパターンを
     * 設定するための基本クラス。（ol3 API）
     */

    origin: ol.extent.getTopLeft(projectionExtent),
    /** ol.extent.getTopLeft
     * Return: Top left coordinate.
     */

    resolutions: resolutions,
    tileSize: 512
   })
  })
 })
 ],
 view: new ol.View({
  center: [0, 0],
  projection: projection,
  zoom: 2,
  minZoom: 2
 })
});