2 - ol3.5ex 121b - WMS custom tile grid 512x256 example 2

「wms-custom-tilegrid-512x256.js（2121-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「2121-ol3ex.js」

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

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

var startResolution = ol.extent.getWidth(projExtent) / 256;
/** ol.extent.getWidth(extent)
 * Return: Width.（ol3 API）
 */

var resolutions = new Array(22);
/** 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]）
 */

for (var i = 0, ii = resolutions.length; i < ii; ++i) {

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

}

var 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.getBottomLeft(projExtent),
 /** ol.extent.getTopLeft
  * Return: Bottom left coordinate.
  */

 resolutions: resolutions,
 tileSize: [512, 256]
});

var 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）
  */

  source: new ol.source.MapQuest({layer: 'sat'})
  /** ol.source.MapQuest
   * Layer source for the MapQuest tile server.
   * MapQuest タイルサーバのレイヤソース。（ol3 API
   * 2 - ol3ex 23b - MapQuest example 2 参照）
   */

 }),
 new ol.layer.Tile({
  extent: [-13884991, 2870341, -7455066, 6338219],

  source: new ol.source.TileWMS({
  /** ol.source.TileWMS
   * Layer source for tile data from WMS servers.
   * WMS サーバからのタイルデータのレイヤソース。
   * （ol3 API）
   */

   url: 'http://demo.boundlessgeo.com/geoserver/wms',
   params: {'LAYERS': 'topp:states', 'TILED': true},
   serverType: 'geoserver',
   tileGrid: tileGrid
  })
 })
];
var map = new ol.Map({
 layers: layers,
 target: 'map',
 view: new ol.View({
  center: [-10997148, 4569099],
  zoom: 4
 })
});