Set reprojection canvas context options

Add example of disabling image smoothing

Add test for reprojection context options

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,