You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.4 KiB
72 lines
2.4 KiB
/**
|
|
* @module ol/source/TileDebug
|
|
*/
|
|
|
|
import XYZ from './XYZ.js';
|
|
import {createCanvasContext2D} from '../dom.js';
|
|
import {toSize} from '../size.js';
|
|
|
|
/**
|
|
* @typedef {Object} Options
|
|
* @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Optional projection.
|
|
* @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.
|
|
* @property {boolean} [wrapX=true] Whether to wrap the world horizontally.
|
|
* @property {number|import("../array.js").NearestDirectionFunction} [zDirection=0]
|
|
* Set to `1` when debugging `VectorTile` sources with a default configuration.
|
|
* 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}.
|
|
* @property {string} [template='z:{z} x:{x} y:{y}'] Template for labeling the tiles.
|
|
* Should include `{x}`, `{y}` or `{-y}`, and `{z}` placeholders.
|
|
*/
|
|
|
|
/**
|
|
* @classdesc
|
|
* A pseudo tile source, which does not fetch tiles from a server, but renders
|
|
* a grid outline for the tile grid/projection along with the coordinates for
|
|
* each tile. See examples/canvas-tiles for an example.
|
|
* @api
|
|
*/
|
|
class TileDebug extends XYZ {
|
|
/**
|
|
* @param {Options} [options] Debug tile options.
|
|
*/
|
|
constructor(options) {
|
|
/**
|
|
* @type {Options}
|
|
*/
|
|
options = options || {};
|
|
|
|
super({
|
|
opaque: false,
|
|
projection: options.projection,
|
|
tileGrid: options.tileGrid,
|
|
wrapX: options.wrapX !== undefined ? options.wrapX : true,
|
|
zDirection: options.zDirection,
|
|
url: options.template || 'z:{z} x:{x} y:{y}',
|
|
tileLoadFunction: (tile, text) => {
|
|
const z = tile.getTileCoord()[0];
|
|
const tileSize = toSize(this.tileGrid.getTileSize(z));
|
|
const context = createCanvasContext2D(tileSize[0], tileSize[1]);
|
|
|
|
context.strokeStyle = 'grey';
|
|
context.strokeRect(0.5, 0.5, tileSize[0] + 0.5, tileSize[1] + 0.5);
|
|
|
|
context.fillStyle = 'grey';
|
|
context.strokeStyle = 'white';
|
|
context.textAlign = 'center';
|
|
context.textBaseline = 'middle';
|
|
context.font = '24px sans-serif';
|
|
context.lineWidth = 4;
|
|
context.strokeText(text, tileSize[0] / 2, tileSize[1] / 2, tileSize[0]);
|
|
context.fillText(text, tileSize[0] / 2, tileSize[1] / 2, tileSize[0]);
|
|
|
|
/** @type {import("../ImageTile.js").default} */ (tile).setImage(
|
|
context.canvas
|
|
);
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
export default TileDebug;
|