Keep track of when a layer is unrendered

src/ol/layer/Layer.js

@@ -146,6 +146,12 @@ class Layer extends BaseLayer {
      */
     this.renderer_ = null;
 
+    /**
+     * @protected
+     * @type {boolean}
+     */
+    this.rendered = false;
+
     // Overwrite default render method with a custom one
     if (options.render) {
       this.render = options.render;
@@ -255,7 +261,7 @@ class Layer extends BaseLayer {
    * @return {Uint8ClampedArray|Uint8Array|Float32Array|DataView|null} Pixel data.
    */
   getData(pixel) {
-    if (!this.renderer_) {
+    if (!this.renderer_ || !this.rendered) {
       return null;
     }
     return this.renderer_.getData(pixel);
@@ -273,15 +279,26 @@ class Layer extends BaseLayer {
     const layerRenderer = this.getRenderer();
 
     if (layerRenderer.prepareFrame(frameState)) {
+      this.rendered = true;
       return layerRenderer.renderFrame(frameState, target);
     }
   }
 
+  /**
+   * Called when a layer is not visible during a map render.
+   */
+  unrender() {
+    this.rendered = false;
+  }
+
   /**
    * For use inside the library only.
    * @param {import("../PluggableMap.js").default|null} map Map.
    */
   setMapInternal(map) {
+    if (!map) {
+      this.unrender();
+    }
     this.set(LayerProperty.MAP, map);
   }
 

src/ol/layer/WebGLTile.js

@@ -440,6 +440,7 @@ class WebGLTileLayer extends BaseTileLayer {
    * @return {HTMLElement} The rendered element.
    */
   render(frameState, target) {
+    this.rendered = true;
     const viewState = frameState.viewState;
     const sources = this.getSources(frameState.extent, viewState.resolution);
     let ready = true;

src/ol/renderer/Composite.js

@@ -118,6 +118,7 @@ class CompositeMapRenderer extends MapRenderer {
         (sourceState != SourceState.READY &&
           sourceState != SourceState.UNDEFINED)
       ) {
+        layer.unrender();
         continue;
       }