68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import DataTile from '../../../../src/ol/source/DataTile.js';
|
|
import Map from '../../../../src/ol/Map.js';
|
|
import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
|
|
import View from '../../../../src/ol/View.js';
|
|
import {Projection} from '../../../../src/ol/proj.js';
|
|
|
|
const size = 256;
|
|
const data = new Uint8Array(size * size * 4);
|
|
for (let row = 0; row < size; ++row) {
|
|
for (let col = 0; col < size; ++col) {
|
|
const index = (row * size + col) * 4;
|
|
data[index] = 0;
|
|
data[index + 1] = 255;
|
|
data[index + 2] = 0;
|
|
data[index + 3] = 255;
|
|
}
|
|
}
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
|
|
const context = canvas.getContext('2d');
|
|
context.strokeStyle = 'black';
|
|
|
|
function getLabels(z, x, y) {
|
|
context.clearRect(0, 0, size, size);
|
|
context.strokeRect(0, 0, size, size);
|
|
const data = context.getImageData(0, 0, size, size).data;
|
|
return new Uint8Array(data.buffer);
|
|
}
|
|
|
|
document.getElementById('map').style.background = 'red';
|
|
|
|
const projection = new Projection({
|
|
code: 'pixels',
|
|
units: 'pixels',
|
|
extent: [0, 0, 256, 256],
|
|
});
|
|
|
|
new Map({
|
|
target: 'map',
|
|
layers: [
|
|
new TileLayer({
|
|
source: new DataTile({
|
|
projection: projection,
|
|
maxZoom: 1,
|
|
tileSize: size,
|
|
loader: () => data,
|
|
}),
|
|
}),
|
|
new TileLayer({
|
|
source: new DataTile({
|
|
projection: projection,
|
|
loader: getLabels,
|
|
transition: 0,
|
|
}),
|
|
}),
|
|
],
|
|
view: new View({
|
|
projection: projection,
|
|
center: [127.7, 128.3],
|
|
zoom: 8,
|
|
}),
|
|
});
|
|
|
|
render();
|