Fix layer render extent when it is not at all in view

src/ol/renderer/canvas/ImageLayer.js

@@ -6,7 +6,7 @@ import ViewHint from '../../ViewHint.js';
 import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
 import {assign} from '../../obj.js';
 import {compose as composeTransform, makeInverse} from '../../transform.js';
-import {containsExtent, intersects} from '../../extent.js';
+import {containsExtent, intersects as intersectsExtent} from '../../extent.js';
 import {fromUserExtent} from '../../proj.js';
 import {getIntersection, isEmpty} from '../../extent.js';
 import {toString as toTransformString} from '../../transform.js';
@@ -148,14 +148,14 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     // clipped rendering if layer extent is set
     let clipped = false;
+    let render = true;
     if (layerState.extent) {
       const layerExtent = fromUserExtent(
         layerState.extent,
         viewState.projection
       );
-      clipped =
+      render = intersectsExtent(layerExtent, frameState.extent);
-        !containsExtent(layerExtent, frameState.extent) &&
+      clipped = render && !containsExtent(layerExtent, frameState.extent);
-        intersects(layerExtent, frameState.extent);
       if (clipped) {
         this.clipUnrotated(context, frameState, layerExtent);
       }
@@ -176,14 +176,14 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     this.renderedResolution = (imageResolution * pixelRatio) / imagePixelRatio;
 
-    const dx = transform[4];
-    const dy = transform[5];
     const dw = img.width * transform[0];
     const dh = img.height * transform[3];
 
     assign(context, this.getLayer().getSource().getContextOptions());
     this.preRender(context, frameState);
-    if (dw >= 0.5 && dh >= 0.5) {
+    if (render && dw >= 0.5 && dh >= 0.5) {
+      const dx = transform[4];
+      const dy = transform[5];
       const opacity = layerState.opacity;
       let previousAlpha;
       if (opacity !== 1) {

src/ol/renderer/canvas/Layer.js

@@ -17,7 +17,6 @@ import {
   getTopRight,
 } from '../../extent.js';
 import {createCanvasContext2D} from '../../dom.js';
-import {rotateAtOffset} from '../../render/canvas.js';
 
 /**
  * @abstract
@@ -130,38 +129,6 @@ class CanvasLayerRenderer extends LayerRenderer {
     }
   }
 
-  /**
-   * @param {CanvasRenderingContext2D} context Context.
-   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {import("../../extent.js").Extent} extent Clip extent.
-   * @protected
-   */
-  clip(context, frameState, extent) {
-    const pixelRatio = frameState.pixelRatio;
-    const halfWidth = (frameState.size[0] * pixelRatio) / 2;
-    const halfHeight = (frameState.size[1] * pixelRatio) / 2;
-    const rotation = frameState.viewState.rotation;
-    const topLeft = getTopLeft(extent);
-    const topRight = getTopRight(extent);
-    const bottomRight = getBottomRight(extent);
-    const bottomLeft = getBottomLeft(extent);
-
-    applyTransform(frameState.coordinateToPixelTransform, topLeft);
-    applyTransform(frameState.coordinateToPixelTransform, topRight);
-    applyTransform(frameState.coordinateToPixelTransform, bottomRight);
-    applyTransform(frameState.coordinateToPixelTransform, bottomLeft);
-
-    context.save();
-    rotateAtOffset(context, -rotation, halfWidth, halfHeight);
-    context.beginPath();
-    context.moveTo(topLeft[0] * pixelRatio, topLeft[1] * pixelRatio);
-    context.lineTo(topRight[0] * pixelRatio, topRight[1] * pixelRatio);
-    context.lineTo(bottomRight[0] * pixelRatio, bottomRight[1] * pixelRatio);
-    context.lineTo(bottomLeft[0] * pixelRatio, bottomLeft[1] * pixelRatio);
-    context.clip();
-    rotateAtOffset(context, rotation, halfWidth, halfHeight);
-  }
-
   /**
    * @param {CanvasRenderingContext2D} context Context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.

src/ol/renderer/canvas/VectorLayer.js

@@ -280,17 +280,19 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     // clipped rendering if layer extent is set
     let clipped = false;
+    let render = true;
     if (layerState.extent && this.clipping) {
       const layerExtent = fromUserExtent(layerState.extent, projection);
-      clipped =
+      render = intersectsExtent(layerExtent, frameState.extent);
-        !containsExtent(layerExtent, frameState.extent) &&
+      clipped = render && !containsExtent(layerExtent, frameState.extent);
-        intersectsExtent(layerExtent, frameState.extent);
       if (clipped) {
         this.clipUnrotated(context, frameState, layerExtent);
       }
     }
 
-    this.renderWorlds(replayGroup, frameState);
+    if (render) {
+      this.renderWorlds(replayGroup, frameState);
+    }
 
     if (clipped) {
       context.restore();