sample.js

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import TileWMS from 'ol/source/TileWMS.js';
import View from 'ol/View.js';
import XYZ from 'ol/source/XYZ.js';

const size = 256;
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;

const context = canvas.getContext('2d');
context.strokeStyle = 'white';
context.textAlign = 'center';
context.font = '24px sans-serif';
const lineHeight = 30;

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: '/{x}/{y}/{z}.png',
        tileLoadFunction: function (tile, src) {
          console.log(tile, src);
          const [z, x, y] = tile.getTileCoord();
          const half = size / 2;
          context.clearRect(0, 0, size, size);
          context.fillStyle = `hsl(${(z / 8) * 360}deg 50% 50% / 1.0)`;
          context.fillRect(20, 20, size - 40, size - 40);
          context.fillStyle = 'black';
          context.fillText(`z: ${z}`, half, half - lineHeight);
          context.fillText(`x: ${x}`, half, half);
          context.fillText(`y: ${y}`, half, half + lineHeight);
          context.strokeRect(20, 20, size - 40, size - 40);

          tile.getImage().src = canvas.toDataURL();
        },
        transition: 5000,
        maxZoom: 19,
      }),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 0,
  }),
});