/** * @module ol/source/XYZ */ import TileImage from './TileImage.js'; import {createXYZ, extentFromProjection} from '../tilegrid.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='EPSG:3857'] Projection. * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels). * Higher values can increase reprojection performance, but decrease precision. * @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. * @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 {number|import("../size.js").Size} [tileSize=[256, 256]] The tile size used by the tile service. * Not used if `tileGrid` is provided. * @property {number} [gutter=0] The size in pixels of the gutter around image tiles to ignore. * This allows artifacts of rendering at tile edges to be ignored. * Supported images should be wider and taller than the tile size by a value of `2 x gutter`. * @property {import("../Tile.js").UrlFunction} [tileUrlFunction] Optional function to get * tile URL given a tile coordinate and the projection. * Required if `url` or `urls` are not provided. * @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=true] Whether to wrap the world horizontally. * @property {number} [transition=250] Duration of the opacity transition for rendering. * To disable the opacity transition, pass `transition: 0`. * @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 * Layer source for tile data with URLs in a set XYZ format that are * defined in a URL template. By default, this follows the widely-used * Google grid where `x` 0 and `y` 0 are in the top left. Grids like * TMS where `x` 0 and `y` 0 are in the bottom left can be used by * using the `{-y}` placeholder in the URL template, so long as the * source does not have a custom tile grid. In this case * a `tileUrlFunction` can be used, such as: * ```js * tileUrlFunction: function(coordinate) { * return 'http://mapserver.com/' + coordinate[0] + '/' + * coordinate[1] + '/' + (-coordinate[2] - 1) + '.png'; * } * ``` * @api */ class XYZ extends TileImage { /** * @param {Options} [options] XYZ options. */ constructor(options) { options = options || {}; const projection = options.projection !== undefined ? options.projection : 'EPSG:3857'; const tileGrid = options.tileGrid !== undefined ? options.tileGrid : createXYZ({ extent: extentFromProjection(projection), maxResolution: options.maxResolution, maxZoom: options.maxZoom, minZoom: options.minZoom, tileSize: options.tileSize, }); super({ attributions: options.attributions, cacheSize: options.cacheSize, crossOrigin: options.crossOrigin, interpolate: options.interpolate, opaque: options.opaque, projection: projection, reprojectionErrorThreshold: options.reprojectionErrorThreshold, tileGrid: tileGrid, tileLoadFunction: options.tileLoadFunction, tilePixelRatio: options.tilePixelRatio, tileUrlFunction: options.tileUrlFunction, url: options.url, urls: options.urls, wrapX: options.wrapX !== undefined ? options.wrapX : true, transition: options.transition, attributionsCollapsible: options.attributionsCollapsible, zDirection: options.zDirection, }); /** * @private * @type {number} */ this.gutter_ = options.gutter !== undefined ? options.gutter : 0; } /** * @return {number} Gutter. */ getGutter() { return this.gutter_; } } export default XYZ;