diff --git a/examples/wmts-hidpi.html b/examples/wmts-hidpi.html new file mode 100644 index 0000000000..71f31e5648 --- /dev/null +++ b/examples/wmts-hidpi.html @@ -0,0 +1,51 @@ + + + + + + + + + + + WMTS HiDPI example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

WMTS HiDPI example

+

Example of a WMTS based HiDPI layer.

+
+

See the wmts-hidpi.js source to see how this is done.

+
+
hidpi, retina, wmts
+
+ +
+ +
+ + + + + + + diff --git a/examples/wmts-hidpi.js b/examples/wmts-hidpi.js new file mode 100644 index 0000000000..6ef672a9dd --- /dev/null +++ b/examples/wmts-hidpi.js @@ -0,0 +1,74 @@ +goog.require('ol.BrowserFeature'); +goog.require('ol.Map'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.WMTS'); +goog.require('ol.tilegrid.WMTS'); + + +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.BrowserFeature.DEVICE_PIXEL_RATIO > 1; + +var source = new ol.source.WMTS({ + extent: [977844.377599999, 5837774.6617, 1915609.8654, 6295560.8122], + 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: [ + 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: [ + 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({ + source: source + }) + ], + target: 'map', + view: new ol.View2D({ + center: [1823849, 6143760], + zoom: 11 + }) +});