Merge pull request #13361 from mike-000/RasterSource-WebGL

Support WebGL layers in ol/source/Raster

src/ol/source/Raster.js

@@ -917,15 +917,19 @@ function getImageData(layer, frameState) {
   }
   const container = renderer.renderFrame(frameState, null);
   let element;
-  if (container) {
-    element = container.firstElementChild;
-  }
-  if (!(element instanceof HTMLCanvasElement)) {
-    throw new Error('Unsupported rendered element: ' + element);
-  }
-  if (element.width === width && element.height === height) {
-    const context = element.getContext('2d');
-    return context.getImageData(0, 0, width, height);
+  if (container instanceof HTMLCanvasElement) {
+    element = container;
+  } else {
+    if (container) {
+      element = container.firstElementChild;
+    }
+    if (!(element instanceof HTMLCanvasElement)) {
+      throw new Error('Unsupported rendered element: ' + element);
+    }
+    if (element.width === width && element.height === height) {
+      const context = element.getContext('2d');
+      return context.getImageData(0, 0, width, height);
+    }
   }
 
   if (!sharedContext) {

test/rendering/cases/source-raster-webgl/main.js

@@ -0,0 +1,45 @@
+import DataTile from '../../../../src/ol/source/DataTile.js';
+import ImageLayer from '../../../../src/ol/layer/Image.js';
+import Map from '../../../../src/ol/Map.js';
+import RasterSource from '../../../../src/ol/source/Raster.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import View from '../../../../src/ol/View.js';
+
+const size = 256;
+
+const data = new Uint8Array(size * size);
+for (let row = 0; row < size; ++row) {
+  for (let col = 0; col < size; ++col) {
+    data[row * size + col] = (row + col) % 2 === 0 ? 255 : 0;
+  }
+}
+
+const raster = new RasterSource({
+  sources: [
+    new TileLayer({
+      source: new DataTile({
+        maxZoom: 0,
+        interpolate: true,
+        loader: () => data,
+      }),
+    }),
+  ],
+  threads: 0, // Avoid using workers to work with puppeteer
+  operation: function (pixels) {
+    const pixel = pixels[0];
+    pixel[3] = pixel[0] < 144 ? 0 : 255;
+    return pixel;
+  },
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [new ImageLayer({source: raster})],
+  view: new View({
+    center: [0, 0],
+    zoom: 4,
+  }),
+});
+map.renderSync();
+
+render();