63 lines
1.4 KiB
JavaScript
63 lines
1.4 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';
|
|
|
|
const size = 256;
|
|
|
|
const colors = [
|
|
'palegoldenrod',
|
|
'palegreen',
|
|
'paleturquoise',
|
|
'palevioletred',
|
|
'papayawhip',
|
|
'peachpuff',
|
|
'peru',
|
|
'pink',
|
|
'plum',
|
|
'powderblue',
|
|
'rosybrown',
|
|
'royalblue',
|
|
'saddlebrown',
|
|
'salmon',
|
|
'sandybrown',
|
|
'seagreen',
|
|
'seashell',
|
|
'sienna',
|
|
'skyblue',
|
|
];
|
|
|
|
new Map({
|
|
target: 'map',
|
|
layers: [
|
|
new TileLayer({
|
|
source: new DataTile({
|
|
loader: function () {
|
|
const data = new Float32Array(size * size);
|
|
const numColors = colors.length;
|
|
const numBlocks = 8;
|
|
const blockSize = size / numBlocks;
|
|
for (let row = 0; row < size; ++row) {
|
|
const r = Math.floor(row / blockSize);
|
|
for (let col = 0; col < size; ++col) {
|
|
const c = Math.floor(col / blockSize);
|
|
const colorIndex = (r * numBlocks + c) % numColors;
|
|
data[row * size + col] = colorIndex;
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
}),
|
|
style: {
|
|
color: ['palette', ['band', 1], colors],
|
|
},
|
|
}),
|
|
],
|
|
view: new View({
|
|
center: [0, 0],
|
|
zoom: 0,
|
|
}),
|
|
});
|
|
|
|
render({message: 'Renders colors from a palette'});
|