-
Notifications
You must be signed in to change notification settings - Fork 105
/
DebugProvider.ts
37 lines (30 loc) · 1.2 KB
/
DebugProvider.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import {MapProvider} from './MapProvider';
import {Color} from 'three';
import {CanvasUtils} from '../utils/CanvasUtils';
/**
* Debug provider can be used to debug the levels of the map three based on the zoom level they change between green and red.
*/
export class DebugProvider extends MapProvider
{
/**
* Resolution in px of each tile.
*/
public resolution: number = 256;
public fetchTile(zoom: number, x: number, y: number): Promise<any>
{
const canvas = CanvasUtils.createOffscreenCanvas(this.resolution, this.resolution);
const context = canvas.getContext('2d');
const green = new Color(0x00ff00);
const red = new Color(0xff0000);
const color = green.lerpHSL(red, (zoom - this.minZoom) / (this.maxZoom - this.minZoom));
context.fillStyle = color.getStyle();
context.fillRect(0, 0, this.resolution, this.resolution);
context.fillStyle = '#000000';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.font = 'bold ' + this.resolution * 0.1 + 'px arial';
context.fillText('(' + zoom + ')', this.resolution / 2, this.resolution * 0.4);
context.fillText('(' + x + ', ' + y + ')', this.resolution / 2, this.resolution * 0.6);
return Promise.resolve(canvas);
}
}