Merge pull request #10429 from mike-000/patch-4

Option to disable image smoothing for Tile layer sources (including reprojected sources)

src/ol/renderer/canvas/TileLayer.js

@@ -10,6 +10,7 @@ import CanvasLayerRenderer from './Layer.js';
 import {apply as applyTransform, compose as composeTransform, makeInverse} from '../../transform.js';
 import {numberSafeCompareFunction} from '../../array.js';
 import {createTransformString} from '../../render/canvas.js';
+import {assign} from '../../obj.js';
 
 /**
  * @classdesc
@@ -271,6 +272,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       this.clipUnrotated(context, frameState, layerExtent);
     }
 
+    assign(context, tileSource.getContextOptions());
     this.preRender(context, frameState);
 
     this.renderedTiles.length = 0;

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,7 +38,8 @@ 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,
     sourceTileGrid,
@@ -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}
@@ -241,7 +249,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

@@ -55,6 +55,7 @@ const TOS_ATTRIBUTION = '<a class="ol-attribution-bing-tos" ' +
  * @property {string} [culture='en-us'] Culture code.
  * @property {string} key Bing Maps API key. Get yours at http://www.bingmapsportal.com/.
  * @property {string} imagerySet Type of imagery.
+ * @property {boolean} [imageSmoothing=true] Enable image smoothing.
  * @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.
@@ -128,6 +129,7 @@ class BingMaps extends TileImage {
     super({
       cacheSize: options.cacheSize,
       crossOrigin: 'anonymous',
+      imageSmoothing: options.imageSmoothing,
       opaque: true,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,

src/ol/source/IIIF.js

@@ -19,6 +19,7 @@ import {toSize} from '../size.js';
  * @property {null|string} [crossOrigin]
  * @property {import("../extent.js").Extent} [extent=[0, -height, width, 0]]
  * @property {string} [format='jpg'] Requested image format.
+ * @property {boolean} [imageSmoothing=true] Enable image smoothing.
  * @property {import("../proj.js").ProjectionLike} [projection]
  * @property {string} [quality] Requested IIIF image quality. Default is 'native'
  * for version 1, 'default' for versions 2 and 3.
@@ -275,6 +276,7 @@ class IIIF extends TileImage {
       attributionsCollapsible: options.attributionsCollapsible,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       projection: options.projection,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       state: options.state,

src/ol/source/OSM.js

@@ -24,9 +24,10 @@ 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=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 {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is
  * ```js
@@ -70,6 +71,7 @@ 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,

src/ol/source/Stamen.js

@@ -91,6 +91,7 @@ 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.
@@ -134,6 +135,7 @@ 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,

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.

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<string,*>} [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`,
@@ -72,6 +73,7 @@ class TileArcGISRest extends TileImage {
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       projection: options.projection,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       tileGrid: options.tileGrid,

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,6 +22,7 @@ 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).
@@ -123,6 +125,13 @@ class TileImage extends UrlTile {
      */
     this.reprojectionErrorThreshold_ = options.reprojectionErrorThreshold;
 
+    /**
+     * @private
+     * @type {object|undefined}
+     */
+    this.contextOptions_ = options.imageSmoothing === false ?
+      IMAGE_SMOOTHING_DISABLED : undefined;
+
     /**
      * @private
      * @type {boolean}
@@ -166,6 +175,13 @@ class TileImage extends UrlTile {
     }
   }
 
+  /**
+   * @inheritDoc
+   */
+  getContextOptions() {
+    return this.contextOptions_;
+  }
+
   /**
    * @inheritDoc
    */
@@ -296,7 +312,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.contextOptions_);
         newTile.key = key;
 
         if (tile) {

src/ol/source/TileJSON.js

@@ -43,6 +43,7 @@ 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).
@@ -78,6 +79,7 @@ class TileJSON extends TileImage {
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       state: SourceState.LOADING,

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<string,*>} 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`
@@ -91,6 +92,7 @@ class TileWMS extends TileImage {
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       opaque: !transparent,
       projection: options.projection,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,

src/ol/source/WMTS.js

@@ -18,6 +18,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 {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).
@@ -84,6 +85,7 @@ class WMTS extends TileImage {
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       projection: options.projection,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       tileClass: options.tileClass,

src/ol/source/XYZ.js

@@ -13,6 +13,7 @@ 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).
@@ -90,6 +91,7 @@ class XYZ extends TileImage {
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       opaque: options.opaque,
       projection: projection,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,

src/ol/source/Zoomify.js

@@ -85,6 +85,7 @@ 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).
@@ -246,6 +247,7 @@ class Zoomify extends TileImage {
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
+      imageSmoothing: options.imageSmoothing,
       projection: options.projection,
       tilePixelRatio: tilePixelRatio,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,

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