2 - ol3.4ex 107b - WMTS HiDPI example 2

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

使用するレイヤは、「basemap.at」が提供しています。

basemap.at
（http://www.basemap.at/index_en.html）

には、

You need an up-to-date basemap of Austria derived from administrative data? You are at the right place! basemap.at is a high-performance web basemap published under an OpenGovernmentData (OGD) license. It is based upon data provided by the nine Austrian provinces and their partners.

あなたは、管理データから入手されるオーストリアの最新のベースマップが必要ですか？あなたは正しい場所にいます！ basemap.at は OpenGovernmentData（OGD）のライセンスで公開されている高性能の Web ベースマップです。これは、9つのオーストリアの州とそのパートナーによって提供されたデータに基づいています。

とあります。 「HIGH-DPI」には、

● double the resolution of the STANDARD layer
● perfect for high-resolution displays of smartphones and tablets and for prints

● スタンダードレイヤの２倍の解像度
● スマートフォンやタブレット、印刷の高解像度ディスプレイに最適

とあります。

「2107-ol3ex.js」

var template =
 '{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg';
var urls = [
 'http://maps1.wien.gv.at/basemap/' + template,
 'http://maps2.wien.gv.at/basemap/' + template,
 'http://maps3.wien.gv.at/basemap/' + template,
 'http://maps4.wien.gv.at/basemap/' + template,
 'http://maps.wien.gv.at/basemap/' + template
];

// HiDPI support:
// * Use 'bmaphidpi' layer (pixel ratio 2) for device pixel ratio > 1
// * Use 'geolandbasemap' layer (pixel ratio 1) for device pixel ratio == 1

var hiDPI = ol.has.DEVICE_PIXEL_RATIO > 1;
/** ol.has.DEVICE_PIXEL_RATIO
 * The ratio between physical pixels and 
 * device-independent pixels (dips) on the device 
 * (window.devicePixelRatio).
 * デバイス（window.devicePixelRatio）上の物理的な画素とデバイス
 * に依存しないピクセル（ディップ）との比率。（ol3 API）
 */

var source = new ol.source.WMTS({
 projection: 'EPSG:3857',

 layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap',
 /** 条件演算子 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]）
  */

 tilePixelRatio: hiDPI ? 2 : 1,
 /** 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 のチェックを外すと表示]）
  */

 style: 'normal',
 matrixSet: 'google3857', // Matrix set.
 urls: urls,

 requestEncoding: 'REST',
 /** requestEncoding
  * Request encoding. Default is KVP.（ol3 API）
  */

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

  origin: [-20037508.3428, 20037508.3428],

  resolutions: [
  /** resolutions
   * Resolutions. The array index of each resolution needs 
   * to match the zoom level. This means that even if a 
   * minZoom is configured, the resolutions array will have 
   * a length of maxZoom + 1.
   * 解像度。各解像度の配列インデックスは、ズームレベルに一致す
   * る必要があります。これは minZoom が設定されている場合でも、
   * 解像度アレイは、maxZoom+1 の長さを有することを意味します。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

   559082264.029 * 0.28E-3,
   279541132.015 * 0.28E-3,
   139770566.007 * 0.28E-3,
   69885283.0036 * 0.28E-3,
   34942641.5018 * 0.28E-3,
   17471320.7509 * 0.28E-3,
   8735660.37545 * 0.28E-3,
   4367830.18773 * 0.28E-3,
   2183915.09386 * 0.28E-3,
   1091957.54693 * 0.28E-3,
   545978.773466 * 0.28E-3,
   272989.386733 * 0.28E-3,
   136494.693366 * 0.28E-3,
   68247.3466832 * 0.28E-3,
   34123.6733416 * 0.28E-3,
   17061.8366708 * 0.28E-3,
   8530.91833540 * 0.28E-3,
   4265.45916770 * 0.28E-3,
   2132.72958385 * 0.28E-3,
   1066.36479193 * 0.28E-3
  ],

  matrixIds: [
  /** matrixIds
   * matrix IDs. The length of this array needs to match 
   * the length of the resolutions array.
   * 行列のID。この配列の長さは、解像度配列の数と一致する必要
   * があります。
   * （ol3 API[説明は Stable Only のチェックを外すと表示]）
   */

   0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19

  ]
 })
});

var map = new ol.Map({
 layers: [
  new ol.layer.Tile({
   extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
   source: source
  })
 ],
 target: 'map',
 view: new ol.View({
  center: [1823849, 6143760],
  zoom: 11
 })
});