Set reprojection canvas context options

Add example of disabling image smoothing

Add test for reprojection context options

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;
+}

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 <b>imageSmoothingEnabled</b> (or for Internet Explorer <b>msImageSmoothingEnabled</b>) canvas
+  context property is set to false at the layer's <b>prerender</b> 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 <b>reprojectionContextOptions</b> option. Elevation data is
+  calculated from the pixel value returned by <b>forEachLayerAtPixel<b>. 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/
+---
+<div class="wrapper">
+  <div class="half">
+    <h4>Smoothing Disabled</h4>
+    <div id="map1" class="map"></div>
+    <div>
+      <label>
+        Elevation
+        <span id="info1">0.0</span> meters
+      </label>
+    </div>
+    <div>
+      <label>
+        Imagery opacity
+        <input id="opacity" type="range" min="0" max="100" value="80" />
+        <span id="output"></span> %
+      </label>
+    </div>
+  </div>
+  <div class="half">
+    <h4>Uncorrected Comparison</h4>
+    <div id="map2" class="map"></div>
+    <div>
+      <label>
+        Elevation
+        <span id="info2">0.0</span> meters
+      </label>
+    </div>
+  </div>
+</div>

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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+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);

rendering/cases/reproj-tile-disable-smoothing/main.js

@@ -0,0 +1,39 @@
+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 {toLonLat} from '../../../src/ol/proj.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,
+  reprojectionContextOptions: {imageSmoothingEnabled: false},
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+const layer = new TileLayer({
+  source: source
+});
+
+layer.on('prerender', function(evt) {
+  evt.context.imageSmoothingEnabled = false;
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: toLonLat(center),
+    zoom: 10
+  })
+});
+
+render();

src/ol/reproj.js

@@ -5,6 +5,7 @@ import {createCanvasContext2D} from './dom.js';
 import {containsCoordinate, createEmpty, extend, getHeight, getTopLeft, getWidth} from './extent.js';
 import {solveLinearSystem} from './math.js';
 import {getPointResolution, transform} from './proj.js';
+import {assign} from './obj.js';
 
 
 /**
@@ -88,14 +89,16 @@ function enlargeClipPoint(centroidX, centroidY, x, y) {
  * Array of sources.
  * @param {number} gutter Gutter of the sources.
  * @param {boolean=} opt_renderEdges Render reprojection edges.
+ * @param {object=} opt_contextOptions Properties to set on the canvas context.
  * @return {HTMLCanvasElement} Canvas with reprojected data.
  */
 export function render(width, height, pixelRatio,
   sourceResolution, sourceExtent, targetResolution, targetExtent,
-  triangulation, sources, gutter, opt_renderEdges) {
+  triangulation, sources, gutter, opt_renderEdges, opt_contextOptions) {
 
   const context = createCanvasContext2D(Math.round(pixelRatio * width),
     Math.round(pixelRatio * height));
+  assign(context, opt_contextOptions);
 
   if (sources.length === 0) {
     return context.canvas;
@@ -113,6 +116,7 @@ export function render(width, height, pixelRatio,
   const stitchContext = createCanvasContext2D(
     Math.round(pixelRatio * canvasWidthInUnits / sourceResolution),
     Math.round(pixelRatio * canvasHeightInUnits / sourceResolution));
+  assign(stitchContext, opt_contextOptions);
 
   const stitchScale = pixelRatio / sourceResolution;
 

src/ol/reproj/Tile.js

@@ -38,6 +38,7 @@ class ReprojTile extends Tile {
    *     Function returning source tiles (z, x, y, pixelRatio).
    * @param {number=} opt_errorThreshold Acceptable reprojection error (in px).
    * @param {boolean=} opt_renderEdges Render reprojection edges.
+   * @param {object=} opt_contextOptions Properties to set on the canvas context.
  */
   constructor(
     sourceProj,
@@ -50,7 +51,8 @@ class ReprojTile extends Tile {
     gutter,
     getTileFunction,
     opt_errorThreshold,
-    opt_renderEdges
+    opt_renderEdges,
+    opt_contextOptions
   ) {
     super(tileCoord, TileState.IDLE);
 
@@ -60,6 +62,12 @@ class ReprojTile extends Tile {
      */
     this.renderEdges_ = opt_renderEdges !== undefined ? opt_renderEdges : false;
 
+    /**
+     * @private
+     * @type {object}
+     */
+    this.contextOptions_ = opt_contextOptions;
+
     /**
      * @private
      * @type {number}
@@ -251,7 +259,7 @@ class ReprojTile extends Tile {
       this.canvas_ = renderReprojected(width, height, this.pixelRatio_,
         sourceResolution, this.sourceTileGrid_.getExtent(),
         targetResolution, targetExtent, this.triangulation_, sources,
-        this.gutter_, this.renderEdges_);
+        this.gutter_, this.renderEdges_, this.contextOptions_);
 
       this.state = TileState.LOADED;
     }

src/ol/source/BingMaps.js

@@ -58,6 +58,8 @@ const TOS_ATTRIBUTION = '<a class="ol-attribution-bing-tos" ' +
  * @property {number} [maxZoom=21] Max zoom. Default is what's advertized by the BingMaps service.
  * @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) {
@@ -131,6 +133,7 @@ class BingMaps extends TileImage {
       opaque: true,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
+      reprojectionContextOptions: options.reprojectionContextOptions,
       state: SourceState.LOADING,
       tileLoadFunction: options.tileLoadFunction,
       tilePixelRatio: hidpi ? 2 : 1,

src/ol/source/IIIF.js

@@ -23,6 +23,8 @@ import TileImage from './TileImage.js';
  * for version 1, 'default' for versions 2 and 3.
  * @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 {Array<number>} [resolutions] Supported resolutions as given in IIIF 'scaleFactors'
  * @property {import("../size.js").Size} size Size of the image [width, height].
  * @property {Array<import("../size.js").Size>} [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,

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,

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,

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,

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) {

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,

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,

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,

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,

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,