/** * @module ol/source/TileImage */ import EventType from '../events/EventType.js'; import ImageTile from '../ImageTile.js'; import ReprojTile from '../reproj/Tile.js'; import TileCache from '../TileCache.js'; import TileState from '../TileState.js'; import UrlTile from './UrlTile.js'; import {equivalent, get as getProjection} from '../proj.js'; import {getKey, getKeyZXY} from '../tilecoord.js'; import {getForProjection as getTileGridForProjection} from '../tilegrid.js'; import {getUid} from '../util.js'; /** * @typedef {Object} Options * @property {import("./Source.js").AttributionLike} [attributions] Attributions. * @property {boolean} [attributionsCollapsible=true] Attributions are collapsible. * @property {number} [cacheSize] Initial tile cache size. Will auto-grow to hold at least the number of tiles in the viewport. * @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} [interpolate=true] Use interpolated values when resampling. By default, * linear interpolation is used when resampling. Set to false to use the nearest neighbor instead. * @property {boolean} [opaque=false] 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 {import("./Source.js").State} [state] Source state. * @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. * @property {import("../Tile.js").LoadFunction} [tileLoadFunction] Optional function to load a tile given a URL. The default is * ```js * function(imageTile, src) { * imageTile.getImage().src = src; * }; * ``` * @property {number} [tilePixelRatio=1] 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 {import("../Tile.js").UrlFunction} [tileUrlFunction] Optional function to get tile URL given a tile coordinate and the projection. * @property {string} [url] URL template. Must include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders. * A `{?-?}` template pattern, for example `subdomain{a-f}.domain.com`, may be * used instead of defining each one separately in the `urls` option. * @property {Array} [urls] An array of URL templates. * @property {boolean} [wrapX] Whether to wrap the world horizontally. The default, is to * request out-of-bounds tiles from the server. When set to `false`, only one * world will be rendered. When set to `true`, tiles will be requested for one * world only, but they will be wrapped horizontally to render multiple worlds. * @property {number} [transition] Duration of the opacity transition for rendering. * To disable the opacity transition, pass `transition: 0`. * @property {string} [key] Optional tile key for proper cache fetching * @property {number|import("../array.js").NearestDirectionFunction} [zDirection=0] * Choose whether to use tiles with a higher or lower zoom level when between integer * zoom levels. See {@link module:ol/tilegrid/TileGrid~TileGrid#getZForResolution}. */ /** * @classdesc * Base class for sources providing images divided into a tile grid. * * @fires import("./Tile.js").TileSourceEvent * @api */ class TileImage extends UrlTile { /** * @param {!Options} options Image tile options. */ constructor(options) { super({ attributions: options.attributions, cacheSize: options.cacheSize, opaque: options.opaque, projection: options.projection, state: options.state, tileGrid: options.tileGrid, tileLoadFunction: options.tileLoadFunction ? options.tileLoadFunction : defaultTileLoadFunction, tilePixelRatio: options.tilePixelRatio, tileUrlFunction: options.tileUrlFunction, url: options.url, urls: options.urls, wrapX: options.wrapX, transition: options.transition, interpolate: options.interpolate !== undefined ? options.interpolate : true, key: options.key, attributionsCollapsible: options.attributionsCollapsible, zDirection: options.zDirection, }); /** * @protected * @type {?string} */ this.crossOrigin = options.crossOrigin !== undefined ? options.crossOrigin : null; /** * @protected * @type {typeof ImageTile} */ this.tileClass = options.tileClass !== undefined ? options.tileClass : ImageTile; /** * @protected * @type {!Object} */ this.tileCacheForProjection = {}; /** * @protected * @type {!Object} */ this.tileGridForProjection = {}; /** * @private * @type {number|undefined} */ this.reprojectionErrorThreshold_ = options.reprojectionErrorThreshold; /** * @private * @type {boolean} */ this.renderReprojectionEdges_ = false; } /** * @return {boolean} Can expire cache. */ canExpireCache() { if (this.tileCache.canExpireCache()) { return true; } for (const key in this.tileCacheForProjection) { if (this.tileCacheForProjection[key].canExpireCache()) { return true; } } return false; } /** * @param {import("../proj/Projection.js").default} projection Projection. * @param {!Object} usedTiles Used tiles. */ expireCache(projection, usedTiles) { const usedTileCache = this.getTileCacheForProjection(projection); this.tileCache.expireCache( this.tileCache == usedTileCache ? usedTiles : {} ); for (const id in this.tileCacheForProjection) { const tileCache = this.tileCacheForProjection[id]; tileCache.expireCache(tileCache == usedTileCache ? usedTiles : {}); } } /** * @param {import("../proj/Projection.js").default} projection Projection. * @return {number} Gutter. */ getGutterForProjection(projection) { if ( this.getProjection() && projection && !equivalent(this.getProjection(), projection) ) { return 0; } return this.getGutter(); } /** * @return {number} Gutter. */ getGutter() { return 0; } /** * Return the key to be used for all tiles in the source. * @return {string} The key for all tiles. */ getKey() { let key = super.getKey(); if (!this.getInterpolate()) { key += ':disable-interpolation'; } return key; } /** * @param {import("../proj/Projection.js").default} projection Projection. * @return {boolean} Opaque. */ getOpaque(projection) { if ( this.getProjection() && projection && !equivalent(this.getProjection(), projection) ) { return false; } return super.getOpaque(projection); } /** * @param {import("../proj/Projection.js").default} projection Projection. * @return {!import("../tilegrid/TileGrid.js").default} Tile grid. */ getTileGridForProjection(projection) { const thisProj = this.getProjection(); if (this.tileGrid && (!thisProj || equivalent(thisProj, projection))) { return this.tileGrid; } const projKey = getUid(projection); if (!(projKey in this.tileGridForProjection)) { this.tileGridForProjection[projKey] = getTileGridForProjection(projection); } return this.tileGridForProjection[projKey]; } /** * @param {import("../proj/Projection.js").default} projection Projection. * @return {import("../TileCache.js").default} Tile cache. */ getTileCacheForProjection(projection) { const thisProj = this.getProjection(); if (!thisProj || equivalent(thisProj, projection)) { return this.tileCache; } const projKey = getUid(projection); if (!(projKey in this.tileCacheForProjection)) { this.tileCacheForProjection[projKey] = new TileCache( this.tileCache.highWaterMark ); } return this.tileCacheForProjection[projKey]; } /** * @param {number} z Tile coordinate z. * @param {number} x Tile coordinate x. * @param {number} y Tile coordinate y. * @param {number} pixelRatio Pixel ratio. * @param {import("../proj/Projection.js").default} projection Projection. * @param {string} key The key set on the tile. * @return {!ImageTile} Tile. * @private */ createTile_(z, x, y, pixelRatio, projection, key) { const tileCoord = [z, x, y]; const urlTileCoord = this.getTileCoordForTileUrlFunction( tileCoord, projection ); const tileUrl = urlTileCoord ? this.tileUrlFunction(urlTileCoord, pixelRatio, projection) : undefined; const tile = new this.tileClass( tileCoord, tileUrl !== undefined ? TileState.IDLE : TileState.EMPTY, tileUrl !== undefined ? tileUrl : '', this.crossOrigin, this.tileLoadFunction, this.tileOptions ); tile.key = key; tile.addEventListener(EventType.CHANGE, this.handleTileChange.bind(this)); return tile; } /** * @param {number} z Tile coordinate z. * @param {number} x Tile coordinate x. * @param {number} y Tile coordinate y. * @param {number} pixelRatio Pixel ratio. * @param {import("../proj/Projection.js").default} projection Projection. * @return {!(ImageTile|ReprojTile)} Tile. */ getTile(z, x, y, pixelRatio, projection) { const sourceProjection = this.getProjection(); if ( !sourceProjection || !projection || equivalent(sourceProjection, projection) ) { return this.getTileInternal( z, x, y, pixelRatio, sourceProjection || projection ); } const cache = this.getTileCacheForProjection(projection); const tileCoord = [z, x, y]; let tile; const tileCoordKey = getKey(tileCoord); if (cache.containsKey(tileCoordKey)) { tile = cache.get(tileCoordKey); } const key = this.getKey(); if (tile && tile.key == key) { return tile; } const sourceTileGrid = this.getTileGridForProjection(sourceProjection); const targetTileGrid = this.getTileGridForProjection(projection); const wrappedTileCoord = this.getTileCoordForTileUrlFunction( tileCoord, projection ); const newTile = new ReprojTile( sourceProjection, sourceTileGrid, projection, targetTileGrid, tileCoord, wrappedTileCoord, this.getTilePixelRatio(pixelRatio), this.getGutter(), (z, x, y, pixelRatio) => this.getTileInternal(z, x, y, pixelRatio, sourceProjection), this.reprojectionErrorThreshold_, this.renderReprojectionEdges_, this.getInterpolate() ); newTile.key = key; if (tile) { newTile.interimTile = tile; newTile.refreshInterimChain(); cache.replace(tileCoordKey, newTile); } else { cache.set(tileCoordKey, newTile); } return newTile; } /** * @param {number} z Tile coordinate z. * @param {number} x Tile coordinate x. * @param {number} y Tile coordinate y. * @param {number} pixelRatio Pixel ratio. * @param {!import("../proj/Projection.js").default} projection Projection. * @return {!ImageTile} Tile. * @protected */ getTileInternal(z, x, y, pixelRatio, projection) { let tile = null; const tileCoordKey = getKeyZXY(z, x, y); const key = this.getKey(); if (!this.tileCache.containsKey(tileCoordKey)) { tile = this.createTile_(z, x, y, pixelRatio, projection, key); this.tileCache.set(tileCoordKey, tile); } else { tile = this.tileCache.get(tileCoordKey); if (tile.key != key) { // The source's params changed. If the tile has an interim tile and if we // can use it then we use it. Otherwise we create a new tile. In both // cases we attempt to assign an interim tile to the new tile. const interimTile = tile; tile = this.createTile_(z, x, y, pixelRatio, projection, key); //make the new tile the head of the list, if (interimTile.getState() == TileState.IDLE) { //the old tile hasn't begun loading yet, and is now outdated, so we can simply discard it tile.interimTile = interimTile.interimTile; } else { tile.interimTile = interimTile; } tile.refreshInterimChain(); this.tileCache.replace(tileCoordKey, tile); } } return tile; } /** * Sets whether to render reprojection edges or not (usually for debugging). * @param {boolean} render Render the edges. * @api */ setRenderReprojectionEdges(render) { if (this.renderReprojectionEdges_ == render) { return; } this.renderReprojectionEdges_ = render; for (const id in this.tileCacheForProjection) { this.tileCacheForProjection[id].clear(); } this.changed(); } /** * Sets the tile grid to use when reprojecting the tiles to the given * projection instead of the default tile grid for the projection. * * This can be useful when the default tile grid cannot be created * (e.g. projection has no extent defined) or * for optimization reasons (custom tile size, resolutions, ...). * * @param {import("../proj.js").ProjectionLike} projection Projection. * @param {import("../tilegrid/TileGrid.js").default} tilegrid Tile grid to use for the projection. * @api */ setTileGridForProjection(projection, tilegrid) { const proj = getProjection(projection); if (proj) { const projKey = getUid(proj); if (!(projKey in this.tileGridForProjection)) { this.tileGridForProjection[projKey] = tilegrid; } } } clear() { super.clear(); for (const id in this.tileCacheForProjection) { this.tileCacheForProjection[id].clear(); } } } /** * @param {ImageTile} imageTile Image tile. * @param {string} src Source. */ function defaultTileLoadFunction(imageTile, src) { /** @type {HTMLImageElement|HTMLVideoElement} */ (imageTile.getImage()).src = src; } export default TileImage;