diff --git a/examples/xyz-retina.html b/examples/xyz-retina.html new file mode 100644 index 0000000000..43631196d9 --- /dev/null +++ b/examples/xyz-retina.html @@ -0,0 +1,52 @@ + + + + + + + + + + + XYZ Retina tiles example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

XYZ with Retina tiles example

+

Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ.

+
+

The ol.source.XYZ must contain tilePixelRatio parameter. The tiles were prepared from a GeoTIFF file with MapTiler.

+

See the xyz-retina.js source for details on how this is done.

+
+
retina, hidpi, xyz, maptiler, @2x, devicePixelRatio
+
+ +
+ +
+ + + + + + + diff --git a/examples/xyz-retina.js b/examples/xyz-retina.js new file mode 100644 index 0000000000..b185ede90a --- /dev/null +++ b/examples/xyz-retina.js @@ -0,0 +1,41 @@ +goog.require('ol.Attribution'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Tile'); +goog.require('ol.proj'); +goog.require('ol.source.OSM'); +goog.require('ol.source.XYZ'); + + +var attribution = new ol.Attribution({ + html: 'Tiles rendered with © USGS' +}); + +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() + }), + new ol.layer.Tile({ + source: new ol.source.XYZ({ + url: 'http://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png', + tilePixelRatio: 2, // THIS IS IMPORTANT + maxExtent: ol.proj.transformExtent( + mapExtent, 'EPSG:4326', 'EPSG:3857'), + 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 + }) +}); diff --git a/externs/olx.js b/externs/olx.js index 3c20d4f547..7d22541a41 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -4357,6 +4357,7 @@ olx.source.WMTSOptions.prototype.urls; * maxZoom: (number|undefined), * minZoom: (number|undefined), * tileLoadFunction: (ol.TileLoadFunctionType|undefined), + * tilePixelRatio: (number|undefined), * tileUrlFunction: (ol.TileUrlFunctionType|undefined), * url: (string|undefined), * urls: (Array.|undefined), @@ -4422,6 +4423,16 @@ olx.source.XYZOptions.prototype.minZoom; olx.source.XYZOptions.prototype.tileLoadFunction; +/** + * 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`. + * @type {number|undefined} + */ +olx.source.XYZOptions.prototype.tilePixelRatio; + + /** * Optional function to get tile URL given a tile coordinate and the projection. * Required if url or urls are not provided. diff --git a/src/ol/source/xyzsource.js b/src/ol/source/xyzsource.js index 2a618f197f..faca7ae717 100644 --- a/src/ol/source/xyzsource.js +++ b/src/ol/source/xyzsource.js @@ -35,6 +35,7 @@ ol.source.XYZ = function(options) { projection: projection, tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction, + tilePixelRatio: options.tilePixelRatio, tileUrlFunction: ol.TileUrlFunction.nullTileUrlFunction });