From 560931e9763cf990cae16083e6707b1ef8b35aec Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Sun, 15 Dec 2019 23:24:07 +0000 Subject: [PATCH 01/10] Set reprojection canvas context options Add example of disabling image smoothing Add test for reprojection context options --- examples/disable-image-smoothing.css | 15 +++ examples/disable-image-smoothing.html | 47 +++++++ examples/disable-image-smoothing.js | 115 ++++++++++++++++++ .../expected.png | Bin 0 -> 2404 bytes .../reproj-tile-disable-smoothing/main.js | 39 ++++++ src/ol/reproj.js | 6 +- src/ol/reproj/Tile.js | 14 ++- src/ol/source/BingMaps.js | 3 + src/ol/source/IIIF.js | 3 + src/ol/source/OSM.js | 5 +- src/ol/source/Stamen.js | 3 + src/ol/source/TileArcGISRest.js | 3 + src/ol/source/TileImage.js | 10 +- src/ol/source/TileJSON.js | 3 + src/ol/source/TileWMS.js | 3 + src/ol/source/WMTS.js | 3 + src/ol/source/XYZ.js | 3 + src/ol/source/Zoomify.js | 3 + 18 files changed, 272 insertions(+), 6 deletions(-) create mode 100644 examples/disable-image-smoothing.css create mode 100644 examples/disable-image-smoothing.html create mode 100644 examples/disable-image-smoothing.js create mode 100644 rendering/cases/reproj-tile-disable-smoothing/expected.png create mode 100644 rendering/cases/reproj-tile-disable-smoothing/main.js diff --git a/examples/disable-image-smoothing.css b/examples/disable-image-smoothing.css new file mode 100644 index 0000000000..db58102d58 --- /dev/null +++ b/examples/disable-image-smoothing.css @@ -0,0 +1,15 @@ +@media (min-width: 800px) { + .wrapper { + display: flex; + } + .half { + padding: 0 10px; + width: 50%; + float: left; + } +} +#opacity { + display: inline-block; + width: 150px; + vertical-align: text-bottom; +} diff --git a/examples/disable-image-smoothing.html b/examples/disable-image-smoothing.html new file mode 100644 index 0000000000..3d67e435fb --- /dev/null +++ b/examples/disable-image-smoothing.html @@ -0,0 +1,47 @@ +--- +layout: example.html +title: Disable Image Smoothing +shortdesc: Example of disabling image smoothing +docs: > + Example of disabling image smoothing when using raster DEM (digital elevation model) data. + The imageSmoothingEnabled (or for Internet Explorer msImageSmoothingEnabled) canvas + context property is set to false at the layer's prerender event. Additionally for a + reprojected source those properties must also be also be specified for the canvas contexts used in + the reprojection via the source's reprojectionContextOptions option. Elevation data is + calculated from the pixel value returned by forEachLayerAtPixel. For comparison a second map + with smoothing enabled returns inaccuate elevations which are very noticeable close to 3107 meters + due to how elevation is calculated from the pixel value. +tags: "disable image smoothing, xyz, maptiler, reprojection" +cloak: + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ +--- +
+
+

Smoothing Disabled

+
+
+ +
+
+ +
+
+
+

Uncorrected Comparison

+
+
+ +
+
+
diff --git a/examples/disable-image-smoothing.js b/examples/disable-image-smoothing.js new file mode 100644 index 0000000000..52ab34265b --- /dev/null +++ b/examples/disable-image-smoothing.js @@ -0,0 +1,115 @@ +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import XYZ from '../src/ol/source/XYZ.js'; + +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = '© MapTiler ' + + '© OpenStreetMap contributors'; + +const disabledLayer = new TileLayer({ + // specify className so forEachLayerAtPixel can distinguish layers + className: 'ol-layer-dem', + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, + maxZoom: 10, + crossOrigin: '', + reprojectionContextOptions: {imageSmoothingEnabled: false, msImageSmoothingEnabled: false} + }) +}); + +const imagery = new TileLayer({ + className: 'ol-layer-imagery', + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + crossOrigin: '' + }) +}); + +const enabledLayer = new TileLayer({ + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, + maxZoom: 10, + crossOrigin: '' + }) +}); + +disabledLayer.on('prerender', function(evt) { + evt.context.imageSmoothingEnabled = false; + evt.context.msImageSmoothingEnabled = false; +}); + +imagery.on('prerender', function(evt) { + // use opaque background to conceal DEM while fully opaque imagery renders + if (imagery.getOpacity() === 1) { + evt.context.fillStyle = 'white'; + evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height); + } +}); + +const control = document.getElementById('opacity'); +const output = document.getElementById('output'); +control.addEventListener('input', function() { + output.innerText = control.value; + imagery.setOpacity(control.value / 100); +}); +output.innerText = control.value; +imagery.setOpacity(control.value / 100); + +const view = new View({ + center: [6.893, 45.8295], + zoom: 16, + projection: 'EPSG:4326' +}); + +const map1 = new Map({ + target: 'map1', + layers: [disabledLayer, imagery], + view: view +}); + +const map2 = new Map({ + target: 'map2', + layers: [enabledLayer], + view: view +}); + +const info1 = document.getElementById('info1'); +const info2 = document.getElementById('info2'); + +const showElevations = function(evt) { + if (evt.dragging) { + return; + } + map1.forEachLayerAtPixel( + evt.pixel, + function(layer, pixel) { + const height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; + info1.innerText = height.toFixed(1); + }, + { + layerFilter: function(layer) { + return layer === disabledLayer; + } + } + ); + map2.forEachLayerAtPixel( + evt.pixel, + function(layer, pixel) { + const height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; + info2.innerText = height.toFixed(1); + }, + { + layerFilter: function(layer) { + return layer === enabledLayer; + } + } + ); +}; + +map1.on('pointermove', showElevations); +map2.on('pointermove', showElevations); diff --git a/rendering/cases/reproj-tile-disable-smoothing/expected.png b/rendering/cases/reproj-tile-disable-smoothing/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..6c51884467687ebd9265be2ea10c1571fb0504ad GIT binary patch literal 2404 zcmdT_ZAepL6h7CvO=nI)L21s3e`ZB4BGB^d7M2ccN(6?OTSTEzIYOL?ZC5jAAs8lU zXgWe%Kg4NTh?#d}VkNbuV5Im-Ii}8S4rfm9y}kR<|9%9`Kksv1-t&Gu?>Xl=4{~G~ z!My!E00@?5rk@AEkcmM62SNVr7uNs+4@uKcUMMTD&GuezQbmm}CS26URxPo^OOzjC z!>joPZ(C$SVKwhyZ)0_19$nOOX6T_w**0f%rW_}=#e+ZAJR3{vk+glpdd0Ju%M|Fh zCDCpA?RPVrF91Yo)xAzXY2anZHLz$f=5&<5#*F)&S2yoFq%q!Kb$w;0F=8(?O)-A{>i1o`86WRQ_< z=7+*fCLSX2K^!_Z-}thVrj;h847=E%Ip>n6sGlwyw5*r{#5zY73Ric=7XJ`SgI(TU zBKB7iY1flfA2p6=YjzLV7CurLMQS0R@Q6b#EC7|0GpY?nUjYFkh0ts0)b}r^A|xEx z)K~AqN^ayb^7MTNMx_#TipF+GO_r-Yt?bG2w?+DB4i#4GLW&WA?*@#QdHMVds_XMg z$ou-9IxfPTVPm2Ip|3kQ*HrR(eekc5n5GEG6c3;vx-E7I>lJ0vvvkh@Rjp+bGs^(g zrOOJ1Vjx~K+a=H+2KWq9aRR0TL1)vX3c=w|Zq%L`Ka<} [resolutions] Supported resolutions as given in IIIF 'scaleFactors' * @property {import("../size.js").Size} size Size of the image [width, height]. * @property {Array} [sizes] Supported scaled image sizes. @@ -274,6 +276,7 @@ class IIIF extends TileImage { crossOrigin: options.crossOrigin, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, state: options.state, tileClass: IiifTileClass, tileGrid: tileGrid, diff --git a/src/ol/source/OSM.js b/src/ol/source/OSM.js index f95f4589a6..d2f52a6d07 100644 --- a/src/ol/source/OSM.js +++ b/src/ol/source/OSM.js @@ -26,8 +26,10 @@ export const ATTRIBUTION = '© ' + * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. * @property {number} [maxZoom=19] Max zoom. * @property {boolean} [opaque=true] Whether the layer is opaque. - * @property {number} [reprojectionErrorThreshold=1.5] Maximum allowed reprojection error (in pixels). + * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is * ```js * function(imageTile, src) { @@ -73,6 +75,7 @@ class OSM extends XYZ { opaque: options.opaque !== undefined ? options.opaque : true, maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileLoadFunction: options.tileLoadFunction, url: url, wrapX: options.wrapX, diff --git a/src/ol/source/Stamen.js b/src/ol/source/Stamen.js index d3f768a426..cc8c2ce594 100644 --- a/src/ol/source/Stamen.js +++ b/src/ol/source/Stamen.js @@ -96,6 +96,8 @@ const ProviderConfig = { * @property {number} [maxZoom] Maximum zoom. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] * Optional function to load a tile given a URL. The default is * ```js @@ -138,6 +140,7 @@ class Stamen extends XYZ { minZoom: options.minZoom != undefined ? options.minZoom : providerConfig.minZoom, opaque: layerConfig.opaque, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileLoadFunction: options.tileLoadFunction, transition: options.transition, url: url, diff --git a/src/ol/source/TileArcGISRest.js b/src/ol/source/TileArcGISRest.js index 5e81b927d6..8576b7d2d0 100644 --- a/src/ol/source/TileArcGISRest.js +++ b/src/ol/source/TileArcGISRest.js @@ -34,6 +34,8 @@ import {appendParams} from '../uri.js'; * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. * The default is * ```js @@ -74,6 +76,7 @@ class TileArcGISRest extends TileImage { crossOrigin: options.crossOrigin, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileGrid: options.tileGrid, tileLoadFunction: options.tileLoadFunction, tileUrlFunction: tileUrlFunction, diff --git a/src/ol/source/TileImage.js b/src/ol/source/TileImage.js index ac4ccf709e..887a23fc3b 100644 --- a/src/ol/source/TileImage.js +++ b/src/ol/source/TileImage.js @@ -25,6 +25,8 @@ import {getForProjection as getTileGridForProjection} from '../tilegrid.js'; * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("./State.js").default} [state] Source state. * @property {typeof import("../ImageTile.js").default} [tileClass] Class used to instantiate image tiles. * Default is {@link module:ol/ImageTile~ImageTile}. @@ -123,6 +125,12 @@ class TileImage extends UrlTile { */ this.reprojectionErrorThreshold_ = options.reprojectionErrorThreshold; + /** + * @private + * @type {object|undefined} + */ + this.reprojectionContextOptions_ = options.reprojectionContextOptions; + /** * @private * @type {boolean} @@ -296,7 +304,7 @@ class TileImage extends UrlTile { function(z, x, y, pixelRatio) { return this.getTileInternal(z, x, y, pixelRatio, sourceProjection); }.bind(this), this.reprojectionErrorThreshold_, - this.renderReprojectionEdges_); + this.renderReprojectionEdges_, this.reprojectionContextOptions_); newTile.key = key; if (tile) { diff --git a/src/ol/source/TileJSON.js b/src/ol/source/TileJSON.js index 6fe4877095..5233766869 100644 --- a/src/ol/source/TileJSON.js +++ b/src/ol/source/TileJSON.js @@ -47,6 +47,8 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js'; * Useful when the server does not support CORS.. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {Config} [tileJSON] TileJSON configuration for this source. * If not provided, `url` must be configured. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is @@ -80,6 +82,7 @@ class TileJSON extends TileImage { crossOrigin: options.crossOrigin, projection: getProjection('EPSG:3857'), reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, state: SourceState.LOADING, tileLoadFunction: options.tileLoadFunction, wrapX: options.wrapX !== undefined ? options.wrapX : true, diff --git a/src/ol/source/TileWMS.js b/src/ol/source/TileWMS.js index 513e7ae132..f7b1ec5467 100644 --- a/src/ol/source/TileWMS.js +++ b/src/ol/source/TileWMS.js @@ -42,6 +42,8 @@ import {appendParams} from '../uri.js'; * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {typeof import("../ImageTile.js").default} [tileClass] Class used to instantiate image tiles. * Default is {@link module:ol/ImageTile~ImageTile}. * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid. Base this on the resolutions, @@ -94,6 +96,7 @@ class TileWMS extends TileImage { opaque: !transparent, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileClass: options.tileClass, tileGrid: options.tileGrid, tileLoadFunction: options.tileLoadFunction, diff --git a/src/ol/source/WMTS.js b/src/ol/source/WMTS.js index 603bc78e80..9de0f9a2e2 100644 --- a/src/ol/source/WMTS.js +++ b/src/ol/source/WMTS.js @@ -23,6 +23,8 @@ import {appendParams} from '../uri.js'; * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("./WMTSRequestEncoding.js").default|string} [requestEncoding='KVP'] Request encoding. * @property {string} layer Layer name as advertised in the WMTS capabilities. * @property {string} style Style name as advertised in the WMTS capabilities. @@ -87,6 +89,7 @@ class WMTS extends TileImage { crossOrigin: options.crossOrigin, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileClass: options.tileClass, tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction, diff --git a/src/ol/source/XYZ.js b/src/ol/source/XYZ.js index 6c550057a5..1195286c37 100644 --- a/src/ol/source/XYZ.js +++ b/src/ol/source/XYZ.js @@ -17,6 +17,8 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js'; * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {number} [maxZoom=18] Optional max zoom level. * @property {number} [minZoom=0] Optional min zoom level. * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid. @@ -90,6 +92,7 @@ class XYZ extends TileImage { opaque: options.opaque, projection: projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction, tilePixelRatio: options.tilePixelRatio, diff --git a/src/ol/source/Zoomify.js b/src/ol/source/Zoomify.js index 5a5bd2efa1..401c788129 100644 --- a/src/ol/source/Zoomify.js +++ b/src/ol/source/Zoomify.js @@ -93,6 +93,8 @@ export class CustomTile extends ImageTile { * @property {number} [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` * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. + * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used + * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {string} [url] URL template or base URL of the Zoomify service. * A base URL is the fixed part * of the URL, excluding the tile group, z, x, and y folder structure, e.g. @@ -255,6 +257,7 @@ class Zoomify extends TileImage { projection: options.projection, tilePixelRatio: tilePixelRatio, reprojectionErrorThreshold: options.reprojectionErrorThreshold, + reprojectionContextOptions: options.reprojectionContextOptions, tileClass: ZoomifyTileClass, tileGrid: tileGrid, tileUrlFunction: tileUrlFunction, From 1cd4d37c45118855cdd27a94973f9f28133acd2e Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 16:25:25 +0100 Subject: [PATCH 02/10] change option name to imageSmoothing --- examples/disable-image-smoothing.js | 2 +- rendering/cases/reproj-tile-disable-smoothing/main.js | 2 +- src/ol/source/BingMaps.js | 5 ++--- src/ol/source/IIIF.js | 5 ++--- src/ol/source/OSM.js | 5 ++--- src/ol/source/Stamen.js | 5 ++--- src/ol/source/TileArcGISRest.js | 5 ++--- src/ol/source/TileImage.js | 9 +++++---- src/ol/source/TileJSON.js | 5 ++--- src/ol/source/TileWMS.js | 5 ++--- src/ol/source/WMTS.js | 5 ++--- src/ol/source/XYZ.js | 5 ++--- src/ol/source/Zoomify.js | 5 ++--- src/ol/source/common.js | 9 +++++++++ 14 files changed, 36 insertions(+), 36 deletions(-) diff --git a/examples/disable-image-smoothing.js b/examples/disable-image-smoothing.js index 52ab34265b..dd8a27ed7b 100644 --- a/examples/disable-image-smoothing.js +++ b/examples/disable-image-smoothing.js @@ -15,7 +15,7 @@ const disabledLayer = new TileLayer({ url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, maxZoom: 10, crossOrigin: '', - reprojectionContextOptions: {imageSmoothingEnabled: false, msImageSmoothingEnabled: false} + imageSmoothing: false }) }); diff --git a/rendering/cases/reproj-tile-disable-smoothing/main.js b/rendering/cases/reproj-tile-disable-smoothing/main.js index 9338a743c9..7bc4598ab9 100644 --- a/rendering/cases/reproj-tile-disable-smoothing/main.js +++ b/rendering/cases/reproj-tile-disable-smoothing/main.js @@ -13,7 +13,7 @@ const source = new XYZ({ transition: 0, minZoom: 5, maxZoom: 5, - reprojectionContextOptions: {imageSmoothingEnabled: false}, + imageSmoothing: false, url: '/data/tiles/osm/{z}/{x}/{y}.png' }); diff --git a/src/ol/source/BingMaps.js b/src/ol/source/BingMaps.js index 270282e7f9..ecc88d4e16 100644 --- a/src/ol/source/BingMaps.js +++ b/src/ol/source/BingMaps.js @@ -55,11 +55,10 @@ const TOS_ATTRIBUTION = '} [resolutions] Supported resolutions as given in IIIF 'scaleFactors' * @property {import("../size.js").Size} size Size of the image [width, height]. * @property {Array} [sizes] Supported scaled image sizes. @@ -277,9 +276,9 @@ class IIIF extends TileImage { attributionsCollapsible: options.attributionsCollapsible, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, state: options.state, tileClass: IiifTileClass, tileGrid: tileGrid, diff --git a/src/ol/source/OSM.js b/src/ol/source/OSM.js index b2d4a8054c..fdcb225d2a 100644 --- a/src/ol/source/OSM.js +++ b/src/ol/source/OSM.js @@ -24,12 +24,11 @@ export const ATTRIBUTION = '© ' + * @property {null|string} [crossOrigin='anonymous'] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {number} [maxZoom=19] Max zoom. * @property {boolean} [opaque=true] Whether the layer is opaque. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is * ```js * function(imageTile, src) { @@ -72,10 +71,10 @@ class OSM extends XYZ { attributions: attributions, cacheSize: options.cacheSize, crossOrigin: crossOrigin, + imageSmoothing: options.imageSmoothing, opaque: options.opaque !== undefined ? options.opaque : true, maxZoom: options.maxZoom !== undefined ? options.maxZoom : 19, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileLoadFunction: options.tileLoadFunction, url: url, wrapX: options.wrapX, diff --git a/src/ol/source/Stamen.js b/src/ol/source/Stamen.js index 2e672a010a..c91711e811 100644 --- a/src/ol/source/Stamen.js +++ b/src/ol/source/Stamen.js @@ -91,13 +91,12 @@ const ProviderConfig = { /** * @typedef {Object} Options * @property {number} [cacheSize] Tile cache size. The default depends on the screen size. Will be ignored if too small. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {string} layer Layer name. * @property {number} [minZoom] Minimum zoom. * @property {number} [maxZoom] Maximum zoom. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] * Optional function to load a tile given a URL. The default is * ```js @@ -136,11 +135,11 @@ class Stamen extends XYZ { attributions: ATTRIBUTIONS, cacheSize: options.cacheSize, crossOrigin: 'anonymous', + imageSmoothing: options.imageSmoothing, maxZoom: options.maxZoom != undefined ? options.maxZoom : providerConfig.maxZoom, minZoom: options.minZoom != undefined ? options.minZoom : providerConfig.minZoom, opaque: layerConfig.opaque, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileLoadFunction: options.tileLoadFunction, transition: options.transition, url: url, diff --git a/src/ol/source/TileArcGISRest.js b/src/ol/source/TileArcGISRest.js index c730e8429b..300572d67c 100644 --- a/src/ol/source/TileArcGISRest.js +++ b/src/ol/source/TileArcGISRest.js @@ -17,6 +17,7 @@ import {appendParams} from '../uri.js'; * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {Object} [params] ArcGIS Rest parameters. This field is optional. Service defaults will be * used for any fields not specified. `FORMAT` is `PNG32` by default. `F` is `IMAGE` by * default. `TRANSPARENT` is `true` by default. `BBOX`, `SIZE`, `BBOXSR`, @@ -34,8 +35,6 @@ import {appendParams} from '../uri.js'; * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. * The default is * ```js @@ -74,9 +73,9 @@ class TileArcGISRest extends TileImage { attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileGrid: options.tileGrid, tileLoadFunction: options.tileLoadFunction, tileUrlFunction: tileUrlFunction, diff --git a/src/ol/source/TileImage.js b/src/ol/source/TileImage.js index 5dfd5c9710..bd78f49302 100644 --- a/src/ol/source/TileImage.js +++ b/src/ol/source/TileImage.js @@ -10,6 +10,7 @@ import EventType from '../events/EventType.js'; import {equivalent, get as getProjection} from '../proj.js'; import ReprojTile from '../reproj/Tile.js'; import UrlTile from './UrlTile.js'; +import {IMAGE_SMOOTHING_DISABLED} from './common.js'; import {getKey, getKeyZXY} from '../tilecoord.js'; import {getForProjection as getTileGridForProjection} from '../tilegrid.js'; @@ -21,12 +22,11 @@ import {getForProjection as getTileGridForProjection} from '../tilegrid.js'; * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {boolean} [opaque=true] Whether the layer is opaque. * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("./State.js").default} [state] Source state. * @property {typeof import("../ImageTile.js").default} [tileClass] Class used to instantiate image tiles. * Default is {@link module:ol/ImageTile~ImageTile}. @@ -129,7 +129,8 @@ class TileImage extends UrlTile { * @private * @type {object|undefined} */ - this.reprojectionContextOptions_ = options.reprojectionContextOptions; + this.contextOptions_ = options.imageSmoothing === false ? + IMAGE_SMOOTHING_DISABLED : undefined; /** * @private @@ -304,7 +305,7 @@ class TileImage extends UrlTile { function(z, x, y, pixelRatio) { return this.getTileInternal(z, x, y, pixelRatio, sourceProjection); }.bind(this), this.reprojectionErrorThreshold_, - this.renderReprojectionEdges_, this.reprojectionContextOptions_); + this.renderReprojectionEdges_, this.contextOptions_); newTile.key = key; if (tile) { diff --git a/src/ol/source/TileJSON.js b/src/ol/source/TileJSON.js index 13fd7118f8..9667c76fda 100644 --- a/src/ol/source/TileJSON.js +++ b/src/ol/source/TileJSON.js @@ -43,12 +43,11 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js'; * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {boolean} [jsonp=false] Use JSONP with callback to load the TileJSON. * Useful when the server does not support CORS.. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {Config} [tileJSON] TileJSON configuration for this source. * If not provided, `url` must be configured. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is @@ -80,9 +79,9 @@ class TileJSON extends TileImage { attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, projection: getProjection('EPSG:3857'), reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, state: SourceState.LOADING, tileLoadFunction: options.tileLoadFunction, wrapX: options.wrapX !== undefined ? options.wrapX : true, diff --git a/src/ol/source/TileWMS.js b/src/ol/source/TileWMS.js index 9e1caab990..d716e78e44 100644 --- a/src/ol/source/TileWMS.js +++ b/src/ol/source/TileWMS.js @@ -24,6 +24,7 @@ import {appendParams} from '../uri.js'; * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {Object} params WMS request parameters. * At least a `LAYERS` param is required. `STYLES` is * `''` by default. `VERSION` is `1.3.0` by default. `WIDTH`, `HEIGHT`, `BBOX` @@ -42,8 +43,6 @@ import {appendParams} from '../uri.js'; * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {typeof import("../ImageTile.js").default} [tileClass] Class used to instantiate image tiles. * Default is {@link module:ol/ImageTile~ImageTile}. * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid. Base this on the resolutions, @@ -93,10 +92,10 @@ class TileWMS extends TileImage { attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, opaque: !transparent, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileClass: options.tileClass, tileGrid: options.tileGrid, tileLoadFunction: options.tileLoadFunction, diff --git a/src/ol/source/WMTS.js b/src/ol/source/WMTS.js index 9c82f822f6..3b3bc861de 100644 --- a/src/ol/source/WMTS.js +++ b/src/ol/source/WMTS.js @@ -19,12 +19,11 @@ import {appendParams} from '../uri.js'; * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {import("../tilegrid/WMTS.js").default} tileGrid Tile grid. * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {import("./WMTSRequestEncoding.js").default|string} [requestEncoding='KVP'] Request encoding. * @property {string} layer Layer name as advertised in the WMTS capabilities. * @property {string} style Style name as advertised in the WMTS capabilities. @@ -87,9 +86,9 @@ class WMTS extends TileImage { attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, projection: options.projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileClass: options.tileClass, tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction, diff --git a/src/ol/source/XYZ.js b/src/ol/source/XYZ.js index 0242b31e9f..df62402006 100644 --- a/src/ol/source/XYZ.js +++ b/src/ol/source/XYZ.js @@ -13,12 +13,11 @@ import {createXYZ, extentFromProjection} from '../tilegrid.js'; * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value if you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {boolean} [opaque=true] Whether the layer is opaque. * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {number} [maxZoom=42] Optional max zoom level. Not used if `tileGrid` is provided. * @property {number} [minZoom=0] Optional min zoom level. Not used if `tileGrid` is provided. * @property {number} [maxResolution] Optional tile grid resolution at level zero. Not used if `tileGrid` is provided. @@ -92,10 +91,10 @@ class XYZ extends TileImage { attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, opaque: options.opaque, projection: projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction, tilePixelRatio: options.tilePixelRatio, diff --git a/src/ol/source/Zoomify.js b/src/ol/source/Zoomify.js index 493d9a5dd7..543dc954fe 100644 --- a/src/ol/source/Zoomify.js +++ b/src/ol/source/Zoomify.js @@ -85,12 +85,11 @@ export class CustomTile extends ImageTile { * @property {null|string} [crossOrigin] The `crossOrigin` attribute for loaded images. Note that * you must provide a `crossOrigin` value you want to access pixel data with the Canvas renderer. * See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image for more detail. + * @property {boolean} [imageSmoothing=true] Enable image smoothing. * @property {import("../proj.js").ProjectionLike} [projection] Projection. * @property {number} [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` * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. - * @property {object} [reprojectionContextOptions] Optional properties to set on the canvas context used - * for reprojection. For example specify `{imageSmoothingEnabled: false}` to disable image smoothing. * @property {string} url URL template or base URL of the Zoomify service. * A base URL is the fixed part * of the URL, excluding the tile group, z, x, and y folder structure, e.g. @@ -248,10 +247,10 @@ class Zoomify extends TileImage { attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, + imageSmoothing: options.imageSmoothing, projection: options.projection, tilePixelRatio: tilePixelRatio, reprojectionErrorThreshold: options.reprojectionErrorThreshold, - reprojectionContextOptions: options.reprojectionContextOptions, tileClass: ZoomifyTileClass, tileGrid: tileGrid, tileUrlFunction: tileUrlFunction, diff --git a/src/ol/source/common.js b/src/ol/source/common.js index ebf0d96808..e78ca95101 100644 --- a/src/ol/source/common.js +++ b/src/ol/source/common.js @@ -7,3 +7,12 @@ * @type {string} */ export const DEFAULT_WMS_VERSION = '1.3.0'; + +/** + * Context options to disable image smoothing. + * @type {Object} + */ +export const IMAGE_SMOOTHING_DISABLED = { + imageSmoothingEnabled: false, + msImageSmoothingEnabled: false +}; From 0ba659b6af1fb99cc4c084cc572e7f5615b6d8ef Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 20:09:58 +0100 Subject: [PATCH 03/10] make context options available to renderer --- src/ol/source/TileImage.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/ol/source/TileImage.js b/src/ol/source/TileImage.js index bd78f49302..c96aa9638a 100644 --- a/src/ol/source/TileImage.js +++ b/src/ol/source/TileImage.js @@ -175,6 +175,13 @@ class TileImage extends UrlTile { } } + /** + * @inheritDoc + */ + getContextOptions() { + return this.contextOptions_; + } + /** * @inheritDoc */ From 5c848ac1b941d68f66850e3cd25d38646b21ddcb Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 20:10:07 +0100 Subject: [PATCH 04/10] make context options available to renderer --- src/ol/source/Tile.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/ol/source/Tile.js b/src/ol/source/Tile.js index 8e5246e816..46a870770e 100644 --- a/src/ol/source/Tile.js +++ b/src/ol/source/Tile.js @@ -167,6 +167,13 @@ class TileSource extends Source { return covered; } + /** + * @return {Object|undefined} Context options. + */ + getContextOptions() { + return undefined; + } + /** * @param {import("../proj/Projection.js").default} projection Projection. * @return {number} Gutter. From b866a447c226190121ce2dc1f5e053aeec3e8e4c Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 22:28:09 +0100 Subject: [PATCH 05/10] assign tile source context options to context --- src/ol/renderer/canvas/TileLayer.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ol/renderer/canvas/TileLayer.js b/src/ol/renderer/canvas/TileLayer.js index 51fb12939f..dea9aea321 100644 --- a/src/ol/renderer/canvas/TileLayer.js +++ b/src/ol/renderer/canvas/TileLayer.js @@ -9,6 +9,7 @@ import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js' import CanvasLayerRenderer from './Layer.js'; import {apply as applyTransform, compose as composeTransform, makeInverse} from '../../transform.js'; import {numberSafeCompareFunction} from '../../array.js'; +import {assign} from '../../obj.js'; /** * @classdesc @@ -270,6 +271,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer { this.clipUnrotated(context, frameState, layerExtent); } + assign(context, tileSource.getContextOptions()); this.preRender(context, frameState); this.renderedTiles.length = 0; From 5ad788194e7172e983333f9fffb89ec443cf5146 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 22:30:08 +0100 Subject: [PATCH 06/10] remove prerender context setting --- rendering/cases/reproj-tile-disable-smoothing/main.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/rendering/cases/reproj-tile-disable-smoothing/main.js b/rendering/cases/reproj-tile-disable-smoothing/main.js index 7bc4598ab9..fb194dfe0c 100644 --- a/rendering/cases/reproj-tile-disable-smoothing/main.js +++ b/rendering/cases/reproj-tile-disable-smoothing/main.js @@ -21,10 +21,6 @@ const layer = new TileLayer({ source: source }); -layer.on('prerender', function(evt) { - evt.context.imageSmoothingEnabled = false; -}); - new Map({ pixelRatio: 1, target: 'map', From f4a3a3bc70b6bb467fcb802de0ca2d668c8be57f Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 22:32:30 +0100 Subject: [PATCH 07/10] remove prerender context setting --- examples/disable-image-smoothing.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/examples/disable-image-smoothing.js b/examples/disable-image-smoothing.js index dd8a27ed7b..5c231e8e49 100644 --- a/examples/disable-image-smoothing.js +++ b/examples/disable-image-smoothing.js @@ -38,11 +38,6 @@ const enabledLayer = new TileLayer({ }) }); -disabledLayer.on('prerender', function(evt) { - evt.context.imageSmoothingEnabled = false; - evt.context.msImageSmoothingEnabled = false; -}); - imagery.on('prerender', function(evt) { // use opaque background to conceal DEM while fully opaque imagery renders if (imagery.getOpacity() === 1) { From dd95d60c2eac3ae17942957111ecfc8b41c426cd Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 23:17:10 +0100 Subject: [PATCH 08/10] test imageSmoothing: false without reprojection --- .../cases/tile-disable-smoothing/main.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 rendering/cases/tile-disable-smoothing/main.js diff --git a/rendering/cases/tile-disable-smoothing/main.js b/rendering/cases/tile-disable-smoothing/main.js new file mode 100644 index 0000000000..805344e9b2 --- /dev/null +++ b/rendering/cases/tile-disable-smoothing/main.js @@ -0,0 +1,33 @@ +import Map from '../../../src/ol/Map.js'; +import View from '../../../src/ol/View.js'; +import XYZ from '../../../src/ol/source/XYZ.js'; +import TileLayer from '../../../src/ol/layer/Tile.js'; +import {createXYZ} from '../../../src/ol/tilegrid.js'; + +const tileGrid = createXYZ(); +const extent = tileGrid.getTileCoordExtent([5, 5, 12]); +const center = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2]; + +const source = new XYZ({ + transition: 0, + minZoom: 5, + maxZoom: 5, + imageSmoothing: false, + url: '/data/tiles/osm/{z}/{x}/{y}.png' +}); + +const layer = new TileLayer({ + source: source +}); + +new Map({ + pixelRatio: 1, + target: 'map', + layers: [layer], + view: new View({ + center: center, + zoom: 10 + }) +}); + +render(); From 74ba208c22960f48e56e0b8803c7f4830b031053 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Thu, 2 Apr 2020 23:18:10 +0100 Subject: [PATCH 09/10] test imageSmoothing: false without reprojection --- .../cases/tile-disable-smoothing/expected.png | Bin 0 -> 2391 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 rendering/cases/tile-disable-smoothing/expected.png diff --git a/rendering/cases/tile-disable-smoothing/expected.png b/rendering/cases/tile-disable-smoothing/expected.png new file mode 100644 index 0000000000000000000000000000000000000000..46f555f607b644cf337bae5928b34ff4c3083082 GIT binary patch literal 2391 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|GzJDvIZqeIkczmsHw?3;W=phQ z{J%hK(y<2&EV@PvjvETTyxg*Bi-3qokgJlGV2_~tN0I8goH_q%ziqE5_BX#C{=NPG zCN{nOd(UqA&%VFzlhN7wimD0E*0;}RxZnr0LqnXSVbkBo77PpxMNJGEx7iOo^lvC@ zV95Ag&iJFA;UyE}glq5p8N?l|9T>L!-OUgK6=Eu2+``P_aC<-Z0oDn60t}gd^@gFM z|AoK5m;chQDF1ACw!ZkE*4cP|c85K{U|TRpf#KA*{==*fm^^?XxTTKahwuVf1%_My zVj1)rN*WnFUY9fOV7SG|wBYT1xFYce?vbGA^Oy4b_m}@~d)_~P=}&)oThGt03mC5K zcbLP^z;Nfdw1~VJFa#MCY8pySfONwz(YBu;fkW&O?#w`XMSS86pvvK>p#I(aLth^M z`0+Y;R(;_&rL*e~gR&^YiuzUqd7zISelWbw0MZO!wRt{+3W65?4Sk@JAYlKY;jN&+ z_SfO_{h6%d>A+C1I{3DLVaxviFQ5J5VtAWxFqg04+jDk@+y85<7;bSgEO=XQC(H1b zh2g?C`}uqgWlX@rYQ8_agEb?tggU>RdBI!;U_N|)nGsaL<^KQtk|9H#p<&zqpCt@i zgc*joG5Y)W`dU|jilX(083X<^J^sm%!9Hw!N2MsUzhCERy<_k1xzFO~?DhBztitqV z7#KcqwMhf>Qrq+Qmw|a}eZmePnNaZ$n3jg3RO9;X;V-ZM-|>4U(36Y`e;Hf0^8$VM nmTBp75dD&&bp-Gius)EN*ymnZX8Bzi=xGK|S3j3^P6 Date: Thu, 2 Apr 2020 23:51:36 +0100 Subject: [PATCH 10/10] update description --- examples/disable-image-smoothing.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/disable-image-smoothing.html b/examples/disable-image-smoothing.html index 3d67e435fb..918aa558b4 100644 --- a/examples/disable-image-smoothing.html +++ b/examples/disable-image-smoothing.html @@ -4,10 +4,8 @@ title: Disable Image Smoothing shortdesc: Example of disabling image smoothing docs: > Example of disabling image smoothing when using raster DEM (digital elevation model) data. - The imageSmoothingEnabled (or for Internet Explorer msImageSmoothingEnabled) canvas - context property is set to false at the layer's prerender event. Additionally for a - reprojected source those properties must also be also be specified for the canvas contexts used in - the reprojection via the source's reprojectionContextOptions option. Elevation data is + The imageSmoothing: false setting is used to disable canvas image smoothing during + reprojection and rendering. Elevation data is calculated from the pixel value returned by forEachLayerAtPixel. For comparison a second map with smoothing enabled returns inaccuate elevations which are very noticeable close to 3107 meters due to how elevation is calculated from the pixel value.