140 lines
3.4 KiB
JavaScript
140 lines
3.4 KiB
JavaScript
/**
|
|
* @module ol/source/TileDebug
|
|
*/
|
|
|
|
import Tile from '../Tile.js';
|
|
import TileState from '../TileState.js';
|
|
import {createCanvasContext2D} from '../dom.js';
|
|
import {toSize} from '../size.js';
|
|
import XYZ from './XYZ.js';
|
|
import {getKeyZXY} from '../tilecoord.js';
|
|
|
|
|
|
class LabeledTile extends Tile {
|
|
/**
|
|
* @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
|
|
* @param {import("../size.js").Size} tileSize Tile size.
|
|
* @param {string} text Text.
|
|
*/
|
|
constructor(tileCoord, tileSize, text) {
|
|
|
|
super(tileCoord, TileState.LOADED);
|
|
|
|
/**
|
|
* @private
|
|
* @type {import("../size.js").Size}
|
|
*/
|
|
this.tileSize_ = tileSize;
|
|
|
|
/**
|
|
* @private
|
|
* @type {string}
|
|
*/
|
|
this.text_ = text;
|
|
|
|
/**
|
|
* @private
|
|
* @type {HTMLCanvasElement}
|
|
*/
|
|
this.canvas_ = null;
|
|
|
|
}
|
|
|
|
/**
|
|
* Get the image element for this tile.
|
|
* @return {HTMLCanvasElement} Image.
|
|
*/
|
|
getImage() {
|
|
if (this.canvas_) {
|
|
return this.canvas_;
|
|
} else {
|
|
const tileSize = this.tileSize_;
|
|
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(this.text_, tileSize[0] / 2, tileSize[1] / 2, tileSize[0]);
|
|
context.fillText(this.text_, tileSize[0] / 2, tileSize[1] / 2, tileSize[0]);
|
|
|
|
this.canvas_ = context.canvas;
|
|
return context.canvas;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
*/
|
|
load() {}
|
|
}
|
|
|
|
|
|
/**
|
|
* @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.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @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.
|
|
*
|
|
* Uses Canvas context2d, so requires Canvas support.
|
|
* @api
|
|
*/
|
|
class TileDebug extends XYZ {
|
|
/**
|
|
* @param {Options=} opt_options Debug tile options.
|
|
*/
|
|
constructor(opt_options) {
|
|
/**
|
|
* @type {Options}
|
|
*/
|
|
const options = opt_options || {};
|
|
|
|
super({
|
|
opaque: false,
|
|
projection: options.projection,
|
|
tileGrid: options.tileGrid,
|
|
wrapX: options.wrapX !== undefined ? options.wrapX : true
|
|
});
|
|
|
|
}
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
getTile(z, x, y) {
|
|
const tileCoordKey = getKeyZXY(z, x, y);
|
|
if (this.tileCache.containsKey(tileCoordKey)) {
|
|
return /** @type {!LabeledTile} */ (this.tileCache.get(tileCoordKey));
|
|
} else {
|
|
const tileSize = toSize(this.tileGrid.getTileSize(z));
|
|
const tileCoord = [z, x, y];
|
|
const textTileCoord = this.getTileCoordForTileUrlFunction(tileCoord);
|
|
let text;
|
|
if (textTileCoord) {
|
|
text = 'z:' + textTileCoord[0] + ' x:' + textTileCoord[1] + ' y:' + textTileCoord[2];
|
|
} else {
|
|
text = 'none';
|
|
}
|
|
const tile = new LabeledTile(tileCoord, tileSize, text);
|
|
this.tileCache.set(tileCoordKey, tile);
|
|
return tile;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
export default TileDebug;
|