Create context in vector tile layer constructor

src/ol/renderer/canvas/VectorTileLayer.js

@@ -86,8 +86,15 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.tmpTransform_ = createTransform();
 
+    const renderMode = layer.getRenderMode();
+
     // Use lower resolution for pure vector rendering. Closest resolution otherwise.
-    this.zDirection = layer.getRenderMode() == VectorTileRenderType.VECTOR ? 1 : 0;
+    this.zDirection = renderMode === VectorTileRenderType.VECTOR ? 1 : 0;
+
+    if (renderMode !== VectorTileRenderType.VECTOR) {
+      this.context = createCanvasContext2D();
+    }
+
 
     listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
 
@@ -131,13 +138,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const layerRevision = layer.getRevision();
     if (this.renderedLayerRevision_ != layerRevision) {
       this.renderedTiles.length = 0;
-      const renderMode = layer.getRenderMode();
-      if (!this.context && renderMode != VectorTileRenderType.VECTOR) {
-        this.context = createCanvasContext2D();
-      }
-      if (this.context && renderMode == VectorTileRenderType.VECTOR) {
-        this.context = null;
-      }
     }
     this.renderedLayerRevision_ = layerRevision;
     return super.prepareFrame(frameState, layerState);

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -19,6 +19,7 @@ import VectorTileSource from '../../../../../src/ol/source/VectorTile.js';
 import Style from '../../../../../src/ol/style/Style.js';
 import Text from '../../../../../src/ol/style/Text.js';
 import {createXYZ} from '../../../../../src/ol/tilegrid.js';
+import VectorTileRenderType from '../../../../../src/ol/layer/VectorTileRenderType.js';
 
 
 describe('ol.renderer.canvas.VectorTileLayer', function() {
@@ -97,13 +98,23 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     });
 
     it('uses lower resolution for pure vector rendering', function() {
-      layer.renderMode_ = 'vector';
+      const testLayer = new VectorTileLayer({
-      const renderer = new CanvasVectorTileLayerRenderer(layer);
+        renderMode: VectorTileRenderType.VECTOR,
+        source: source,
+        style: layerStyle
+      });
+      const renderer = new CanvasVectorTileLayerRenderer(testLayer);
       expect(renderer.zDirection).to.be(1);
     });
 
     it('does not render images for pure vector rendering', function() {
-      layer.renderMode_ = 'vector';
+      const testLayer = new VectorTileLayer({
+        renderMode: VectorTileRenderType.VECTOR,
+        source: source,
+        style: layerStyle
+      });
+      map.removeLayer(layer);
+      map.addLayer(testLayer);
       const spy = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
         'renderTileImage_');
       map.renderSync();
@@ -112,7 +123,13 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     });
 
     it('does not render replays for pure image rendering', function() {
-      layer.renderMode_ = 'image';
+      const testLayer = new VectorTileLayer({
+        renderMode: VectorTileRenderType.IMAGE,
+        source: source,
+        style: layerStyle
+      });
+      map.removeLayer(layer);
+      map.addLayer(testLayer);
       const spy = sinon.spy(CanvasVectorTileLayerRenderer.prototype,
         'getTransform');
       map.renderSync();