From 5dfa82c27e7079a052e0ceb6db98346785191a6d Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Sun, 4 Nov 2018 11:44:22 -0700
Subject: [PATCH] Create context in vector tile layer constructor

---
 src/ol/renderer/canvas/VectorTileLayer.js     | 16 ++++++------
 .../renderer/canvas/vectortilelayer.test.js   | 25 ++++++++++++++++---
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js
index f34afedfac..8a6552b856 100644
--- a/src/ol/renderer/canvas/VectorTileLayer.js
+++ b/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);
diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js
index 5f876f0d4f..7902ffbde8 100644
--- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ b/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 renderer = new CanvasVectorTileLayerRenderer(layer);
+      const testLayer = new VectorTileLayer({
+        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();