Support paletted rendering in WebGL

test/rendering/cases/webgl-palette/main.js

@@ -0,0 +1,62 @@
+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'});