使用するレイヤは、「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
})
});
