planning

node_modules/ol/src/source/TileDebug.js

@@ -0,0 +1,71 @@
+/**
+ * @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} [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,
+      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;