Conditionally get renderer from the layer

src/ol/layer/BaseVector.js

@@ -143,12 +143,6 @@ class BaseVectorLayer extends Layer {
      * @type {import("../LayerType.js").default}
      */
     this.type = LayerType.VECTOR;
-
-    /**
-     * @private
-     * @type {import("../renderer/Layer.js").default}
-     */
-    this.renderer_ = null;
   }
 
   /**
@@ -249,26 +243,6 @@ class BaseVectorLayer extends Layer {
   getRenderMode() {
     return this.renderMode_;
   }
-
-  /**
-   * Get the renderer for this layer.
-   * @return {import("../renderer/Layer.js").default} The layer renderer.
-   */
-  getRenderer() {
-    if (!this.renderer_) {
-      this.renderer_ = this.createRenderer();
-    }
-    return this.renderer_;
-  }
-
-  /**
-   * Create a renderer for this layer.
-   * @return {import("../renderer/Layer.js").default} A layer renderer.
-   * @protected
-   */
-  createRenderer() {
-    return null;
-  }
 }
 
 

src/ol/layer/Layer.js

@@ -92,6 +92,12 @@ class Layer extends BaseLayer {
      */
     this.sourceChangeKey_ = null;
 
+    /**
+     * @private
+     * @type {import("../renderer/Layer.js").default}
+     */
+    this.renderer_ = null;
+
     if (options.map) {
       this.setMap(options.map);
     }
@@ -215,6 +221,27 @@ class Layer extends BaseLayer {
   setSource(source) {
     this.set(LayerProperty.SOURCE, source);
   }
+
+  /**
+   * Get the renderer for this layer.
+   * @return {import("../renderer/Layer.js").default} The layer renderer.
+   */
+  getRenderer() {
+    if (!this.renderer_) {
+      this.renderer_ = this.createRenderer();
+    }
+    return this.renderer_;
+  }
+
+  /**
+   * Create a renderer for this layer.
+   * @return {import("../renderer/Layer.js").default} A layer renderer.
+   * @protected
+   */
+  createRenderer() {
+    return null;
+  }
+
 }
 
 

src/ol/renderer/Map.js

@@ -217,12 +217,14 @@ class MapRenderer extends Disposable {
     if (layerKey in this.layerRenderers_) {
       return this.layerRenderers_[layerKey];
     } else {
-      let renderer;
+      let renderer = layer.getRenderer();
-      for (let i = 0, ii = this.layerRendererConstructors_.length; i < ii; ++i) {
+      if (!renderer) {
-        const candidate = this.layerRendererConstructors_[i];
+        for (let i = 0, ii = this.layerRendererConstructors_.length; i < ii; ++i) {
-        if (candidate['handles'](layer)) {
+          const candidate = this.layerRendererConstructors_[i];
-          renderer = candidate['create'](this, layer);
+          if (candidate['handles'](layer)) {
-          break;
+            renderer = candidate['create'](this, layer);
+            break;
+          }
         }
       }
       if (renderer) {