Update wmts-hidpi

wmts-hidpi/examples/wmts-hidpi.js

@@ -1,16 +1,27 @@
-var template = '{TileMatrix}/{TileRow}/{TileCol}.jpeg';
+var template =
+    '{Layer}/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg';
 var urls = [
-  'http://maps1.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
-  'http://maps2.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
-  'http://maps3.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
-  'http://maps4.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template,
-  'http://maps.wien.gv.at/basemap/bmaphidpi/normal/google3857/' + template
+  '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
 ];
 
-var source = new ol.source.TileImage({
+// 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.BrowserFeature.DEVICE_PIXEL_RATIO > 1;
+
+var source = new ol.source.WMTS({
   extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122],
-  pixelRatios: [2],
-  requestEncoding: 'REST',
+  pixelRatio: hiDPI ? 2 : 1,
+  projection: 'EPSG:3857',
+  layer: hiDPI ? 'bmaphidpi' : 'geolandbasemap',
+  style: 'normal',
+  matrixSet: 'google3857',
+  urls: urls,
+  requestEncoding: /** @type {ol.source.WMTSRequestEncoding} */ ('REST'),
   tileGrid: new ol.tilegrid.WMTS({
     origin: [-20037508.3428, 20037508.3428],
     resolutions: [
@@ -37,19 +48,8 @@ var source = new ol.source.TileImage({
     ],
     matrixIds: [
       0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
-    ],
-    tileSize: 256
-  }),
-  tileUrlFunction: function(tileCoord, pixelRatio, projection) {
-    if (tileCoord) {
-      var zxy = tileCoord.getZXY();
-      var index = ((zxy[1] << zxy[0]) + zxy[2]) % urls.length;
-      return urls[index < 0 ? index + urls.length : index]
-          .replace('{TileMatrix}', zxy[0])
-          .replace('{TileRow}', -zxy[2] - 1)
-          .replace('{TileCol}', zxy[1]);
-    }
-  }
+    ]
+  })
 });
 
 var map = new ol.Map({
@@ -58,7 +58,6 @@ var map = new ol.Map({
       source: source
     })
   ],
-  renderer: exampleNS.getRendererFromQueryString(['canvas', 'dom']),
   target: 'map',
   view: new ol.View2D({
     center: [1823849, 6143760],