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