ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Set reprojection canvas context options

Browse Source 
Add example of disabling image smoothing

Add test for reprojection context options
This commit is contained in:
mike-000
2019-12-15 23:24:07 +00:00
parent 4c0bdda8b8
commit 560931e976
18 changed files with 272 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/ol/reproj.js
View File

@@ -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;

14
src/ol/reproj/Tile.js
View File

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

3
src/ol/source/BingMaps.js
View File

@@ -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,

3
src/ol/source/IIIF.js
View File

@@ -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,

5
src/ol/source/OSM.js
View File

@@ -26,8 +26,10 @@ export const ATTRIBUTION = '&#169; ' +
* 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,

3
src/ol/source/Stamen.js
View File

@@ -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,

3
src/ol/source/TileArcGISRest.js
View File

@@ -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,

10
src/ol/source/TileImage.js
View File

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

3
src/ol/source/TileJSON.js
View File

@@ -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,

3
src/ol/source/TileWMS.js
View File

@@ -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,

3
src/ol/source/WMTS.js
View File

@@ -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,

3
src/ol/source/XYZ.js
View File

@@ -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,

3
src/ol/source/Zoomify.js
View File

@@ -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,