Merge pull request #8226 from ahocevar/rastersource-renderer

Accept renderers as sources for the Raster source

src/ol/renderer/canvas/ImageLayer.js

@@ -14,9 +14,12 @@ import IntermediateCanvasRenderer from '../canvas/IntermediateCanvas.js';
 import {create as createTransform, compose as composeTransform} from '../../transform.js';
 
 /**
+ * Renderer for {@link module:ol/layer/Image} layers. When a vector renderer is
+ * set with the {@link module:ol/renderer/canvas/ImageLayer#setVectorRenderer}
+ * method, it can also render vector layers to an image.
  * @constructor
  * @extends {module:ol/renderer/canvas/IntermediateCanvas}
- * @param {module:ol/layer/Image} imageLayer Single image layer.
+ * @param {module:ol/layer/Image|module:ol/layer/Vector} imageLayer Image or vector layer.
  * @api
  */
 const CanvasImageLayerRenderer = function(imageLayer) {
@@ -216,7 +219,10 @@ CanvasImageLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordin
 
 
 /**
+ * Sets a vector renderer on this renderer. Call this methond to set up the
+ * renderer for rendering vector layers to an image.
  * @param {module:ol/renderer/canvas/VectorLayer} renderer Vector renderer.
+ * @api
  */
 CanvasImageLayerRenderer.prototype.setVectorRenderer = function(renderer) {
   if (this.vectorRenderer_) {

src/ol/source/Raster.js

@@ -13,6 +13,7 @@ import {equals, getCenter, getHeight, getWidth} from '../extent.js';
 import ImageLayer from '../layer/Image.js';
 import TileLayer from '../layer/Tile.js';
 import {assign} from '../obj.js';
+import CanvasLayerRenderer from '../renderer/canvas/Layer.js';
 import CanvasImageLayerRenderer from '../renderer/canvas/ImageLayer.js';
 import CanvasTileLayerRenderer from '../renderer/canvas/TileLayer.js';
 import ImageSource from '../source/Image.js';
@@ -111,7 +112,7 @@ inherits(RasterSourceEvent, Event);
 
 /**
  * @typedef {Object} Options
- * @property {Array.<module:ol/source/Source>} sources Input sources.
+ * @property {Array.<module:ol/source/Source|module:ol/renderer/canvas/Layer>} sources Input sources.
  * @property {module:ol/source/Raster~Operation} [operation] Raster operation.
  * The operation will be called with data from input sources
  * and the output will be assigned to the raster source.
@@ -487,6 +488,10 @@ function createRenderer(source) {
     renderer = createTileRenderer(source);
   } else if (source instanceof ImageSource) {
     renderer = createImageRenderer(source);
+  } else if (source instanceof TileLayer) {
+    renderer = new CanvasTileLayerRenderer(source);
+  } else if (source instanceof CanvasLayerRenderer) {
+    renderer = source;
   }
   return renderer;
 }

test/spec/ol/source/raster.test.js

@@ -1,12 +1,19 @@
 import Map from '../../../../src/ol/Map.js';
 import TileState from '../../../../src/ol/TileState.js';
 import View from '../../../../src/ol/View.js';
+import ImageLayerRenderer from '../../../../src/ol/renderer/canvas/ImageLayer.js';
 import ImageLayer from '../../../../src/ol/layer/Image.js';
+import VectorLayerRenderer from '../../../../src/ol/renderer/canvas/VectorLayer.js';
+import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import Projection from '../../../../src/ol/proj/Projection.js';
 import Static from '../../../../src/ol/source/ImageStatic.js';
 import RasterSource from '../../../../src/ol/source/Raster.js';
 import Source from '../../../../src/ol/source/Source.js';
 import TileSource from '../../../../src/ol/source/Tile.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import Feature from '../../../../src/ol/Feature.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import {Style, Circle, Fill} from '../../../../src/ol/style.js';
 import XYZ from '../../../../src/ol/source/XYZ.js';
 
 const red = 'data:image/gif;base64,R0lGODlhAQABAPAAAP8AAP///yH5BAAAAAAALAAAAAA' +
@@ -15,9 +22,6 @@ const red = 'data:image/gif;base64,R0lGODlhAQABAPAAAP8AAP///yH5BAAAAAAALAAAAAA'
 const green = 'data:image/gif;base64,R0lGODlhAQABAPAAAAD/AP///yH5BAAAAAAALAAAA' +
     'AABAAEAAAICRAEAOw==';
 
-const blue = 'data:image/gif;base64,R0lGODlhAQABAPAAAAAA/////yH5BAAAAAAALAAAAA' +
-    'ABAAEAAAICRAEAOw==';
-
 where('Uint8ClampedArray').describe('ol.source.Raster', function() {
 
   let map, target, redSource, greenSource, blueSource, raster;
@@ -45,10 +49,18 @@ where('Uint8ClampedArray').describe('ol.source.Raster', function() {
       imageExtent: extent
     });
 
-    blueSource = new Static({
-      url: blue,
-      imageExtent: extent
-    });
+    blueSource = new ImageLayerRenderer(new VectorLayer({
+      source: new VectorSource({
+        features: [new Feature(new Point([0, 0]))]
+      }),
+      style: new Style({
+        image: new Circle({
+          radius: 3,
+          fill: new Fill({color: 'blue'})
+        })
+      })
+    }));
+    blueSource.setVectorRenderer(new VectorLayerRenderer(blueSource.getLayer()));
 
     raster = new RasterSource({
       threads: 0,
@@ -89,7 +101,7 @@ where('Uint8ClampedArray').describe('ol.source.Raster', function() {
 
   describe('constructor', function() {
 
-    it('returns a tile source', function() {
+    it('returns a raster source', function() {
       const source = new RasterSource({
         threads: 0,
         sources: [new TileSource({})]