Merge pull request #12831 from MoonE/fix-emptied-vectorimage

Fix rendering VectorImage with no features in view extent

src/ol/renderer/canvas/VectorImageLayer.js

@@ -120,6 +120,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
             ),
           })
         );
+      let emptyImage = true;
       const image = new ImageCanvas(
         renderedExtent,
         viewResolution,
@@ -131,8 +132,10 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
             vectorRenderer.replayGroupChanged
           ) {
             vectorRenderer.clipping = false;
-            vectorRenderer.renderFrame(imageFrameState, null);
+            if (vectorRenderer.renderFrame(imageFrameState, null)) {
-            vectorRenderer.renderDeclutter(imageFrameState);
+              vectorRenderer.renderDeclutter(imageFrameState);
+              emptyImage = false;
+            }
             callback();
           }
         }
@@ -141,24 +144,25 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
       image.addEventListener(
         EventType.CHANGE,
         function () {
-          if (image.getState() === ImageState.LOADED) {
+          if (image.getState() !== ImageState.LOADED) {
-            this.image_ = image;
+            return;
-            const imageResolution = image.getResolution();
-            const imagePixelRatio = image.getPixelRatio();
-            const renderedResolution =
-              (imageResolution * pixelRatio) / imagePixelRatio;
-            this.renderedResolution = renderedResolution;
-            this.coordinateToVectorPixelTransform_ = compose(
-              this.coordinateToVectorPixelTransform_,
-              width / 2,
-              height / 2,
-              1 / renderedResolution,
-              -1 / renderedResolution,
-              0,
-              -viewState.center[0],
-              -viewState.center[1]
-            );
           }
+          this.image_ = emptyImage ? null : image;
+          const imageResolution = image.getResolution();
+          const imagePixelRatio = image.getPixelRatio();
+          const renderedResolution =
+            (imageResolution * pixelRatio) / imagePixelRatio;
+          this.renderedResolution = renderedResolution;
+          this.coordinateToVectorPixelTransform_ = compose(
+            this.coordinateToVectorPixelTransform_,
+            width / 2,
+            height / 2,
+            1 / renderedResolution,
+            -1 / renderedResolution,
+            0,
+            -viewState.center[0],
+            -viewState.center[1]
+          );
         }.bind(this)
       );
       image.load();

test/browser/spec/ol/renderer/canvas/vectorimage.test.js

@@ -1,4 +1,7 @@
 import CanvasVectorImageLayerRenderer from '../../../../../../src/ol/renderer/canvas/VectorImageLayer.js';
+import Feature from '../../../../../../src/ol/Feature.js';
+import ImageCanvas from '../../../../../../src/ol/ImageCanvas.js';
+import Point from '../../../../../../src/ol/geom/Point.js';
 import VectorImageLayer from '../../../../../../src/ol/layer/VectorImage.js';
 import VectorSource from '../../../../../../src/ol/source/Vector.js';
 import {create} from '../../../../../../src/ol/transform.js';
@@ -19,12 +22,19 @@ describe('ol/renderer/canvas/VectorImageLayer', function () {
   });
 
   describe('#prepareFrame', function () {
-    it('sets correct extent with imageRatio = 2', function () {
+    /** @type {VectorImageLayer} */
-      const layer = new VectorImageLayer({
+    let layer;
+    /** @type {CanvasVectorImageLayerRenderer} */
+    let renderer;
+    let frameState;
+    this.beforeEach(function () {
+      layer = new VectorImageLayer({
         imageRatio: 2,
-        source: new VectorSource(),
+        source: new VectorSource({
+          features: [new Feature(new Point([0, 0]))],
+        }),
       });
-      const renderer = new CanvasVectorImageLayerRenderer(layer);
+      renderer = new CanvasVectorImageLayerRenderer(layer);
       const projection = getProjection('EPSG:3857');
       const projExtent = projection.getExtent();
       const extent = [
@@ -33,7 +43,7 @@ describe('ol/renderer/canvas/VectorImageLayer', function () {
         projExtent[0] + 10000,
         10000,
       ];
-      const frameState = {
+      frameState = {
         layerStatesArray: [layer.getLayerState()],
         layerIndex: 0,
         extent: extent,
@@ -46,12 +56,22 @@ describe('ol/renderer/canvas/VectorImageLayer', function () {
           rotation: 0,
         },
       };
+    });
+    it('sets image to null if no features are rendered', function () {
       renderer.prepareFrame(frameState);
-      const expected = renderer.image_.getExtent();
+      expect(renderer.image_).to.be.a(ImageCanvas);
 
+      layer.getSource().clear();
+      renderer.prepareFrame(frameState);
+      expect(renderer.image_).to.be(null);
+    });
+    it('sets correct extent with imageRatio = 2', function () {
+      const extent = frameState.extent.slice();
       scaleFromCenter(extent, 2);
 
-      expect(expected).to.eql(extent);
+      renderer.prepareFrame(frameState);
+      const imageExtent = renderer.image_.getExtent();
+      expect(imageExtent).to.eql(extent);
     });
   });
 });