2 - ol3.4ex 108b - XYZ with Retina tiles example 2

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

「2108-ol3ex.js」

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

 html: 'Tiles © USGS, rendered with ' +
  '<a href="http://www.maptiler.com/">MapTiler</a>'
});

var mapMinZoom = 1;
var mapMaxZoom = 15;

var mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];

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

   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  }),
  new ol.layer.Tile({

   extent: ol.proj.transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
   /** ol.proj.transformExtent(extent, source, destination)
    * Transforms an extent from source projection to 
    * destination projection. This returns a new extent
    *  (and does not modify the original).
    * ソース投影から変換先投影へ範囲を変換します。これは、新しい
    * 範囲を返します（オリジナルを変更しません）。（ol3 API）
    */

   source: new ol.source.XYZ({
   /** ol.source.XYZ
    * Layer source for tile data with URLs in a set XYZ 
    * format.
    * セットXYZ形式のURLを持つタイルデータのレイヤソース。
    * （ol3 API）
    */

    attributions: [attribution],

    url: 'http://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png',

    tilePixelRatio: 2, // THIS IS IMPORTANT
    /** 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 images (for 
     * retina/hidpi devices) then tilePixelRatio should be 
     * set to 2. Default is 1.
     * タイルサービスによって使用される画素比率。例えば、タイ
     * ルサービスが 256px x 256px によるタイルを告知し、実際
     * に（retina/hidpiデバイス用）512px x 512pxで画像を送信
     * した場合、その後 tilePixelRatio を 2 に設定する必要が
     * あります。デフォルトは 1 です。
     * （ol3 API[説明は Stable Only のチェックを外すと表示]）
     */

    minZoom: mapMinZoom,
    maxZoom: mapMaxZoom
   })
  })
 ],
 view: new ol.View({
  projection: 'EPSG:3857',
  center: ol.proj.transform([-112.18688965, 36.057944835],
   'EPSG:4326', 'EPSG:3857'),
  zoom: 12
 })
});

この地図の完成イメージは、

http://tileserver.maptiler.com/grandcanyon@2x/ol3.html

を参照してください。