Transform the layer extent when a user projection is set

src/ol/renderer/canvas/ImageLayer.js

@@ -4,6 +4,7 @@
 import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
 import ViewHint from '../../ViewHint.js';
 import {containsExtent, intersects} from '../../extent.js';
+import {fromUserExtent} from '../../proj.js';
 import {getIntersection, isEmpty} from '../../extent.js';
 import CanvasLayerRenderer from './Layer.js';
 import {compose as composeTransform, makeInverse, toString as transformToString} from '../../transform.js';
@@ -50,7 +51,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     let renderedExtent = frameState.extent;
     if (layerState.extent !== undefined) {
-      renderedExtent = getIntersection(renderedExtent, layerState.extent);
+      renderedExtent = getIntersection(renderedExtent, fromUserExtent(layerState.extent, viewState.projection));
     }
 
     if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
@@ -116,12 +117,13 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     }
 
     // clipped rendering if layer extent is set
-    const extent = layerState.extent;
-    const clipped = extent !== undefined &&
-          !containsExtent(extent, frameState.extent) &&
-          intersects(extent, frameState.extent);
-    if (clipped) {
-      this.clipUnrotated(context, frameState, extent);
+    let clipped = false;
+    if (layerState.extent) {
+      const layerExtent = fromUserExtent(layerState.extent, viewState.projection);
+      clipped = !containsExtent(layerExtent, frameState.extent) && intersects(layerExtent, frameState.extent);
+      if (clipped) {
+        this.clipUnrotated(context, frameState, layerExtent);
+      }
     }
 
     const img = image.getImage();

src/ol/renderer/canvas/TileLayer.js

@@ -2,6 +2,7 @@
  * @module ol/renderer/canvas/TileLayer
  */
 import {getUid} from '../../util.js';
+import {fromUserExtent} from '../../proj.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
 import {createEmpty, equals, getIntersection, getTopLeft} from '../../extent.js';
@@ -147,10 +148,11 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     const tileGrid = tileSource.getTileGridForProjection(projection);
     const z = tileGrid.getZForResolution(viewResolution, tileSource.zDirection);
     const tileResolution = tileGrid.getResolution(z);
-    let extent = frameState.extent;
 
-    if (layerState.extent) {
-      extent = getIntersection(extent, layerState.extent);
+    let extent = frameState.extent;
+    const layerExtent = layerState.extent && fromUserExtent(layerState.extent, projection);
+    if (layerExtent) {
+      extent = getIntersection(extent, fromUserExtent(layerState.extent, projection));
     }
 
     const tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
@@ -249,8 +251,8 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
       context.clearRect(0, 0, width, height);
     }
 
-    if (layerState.extent) {
-      this.clipUnrotated(context, frameState, layerState.extent);
+    if (layerExtent) {
+      this.clipUnrotated(context, frameState, layerExtent);
     }
 
     this.preRender(context, frameState);

src/ol/renderer/canvas/VectorLayer.js

@@ -3,7 +3,8 @@
  */
 import {getUid} from '../../util.js';
 import ViewHint from '../../ViewHint.js';
-import {buffer, createEmpty, containsExtent, getWidth} from '../../extent.js';
+import {buffer, createEmpty, containsExtent, getWidth, intersects as intersectsExtent} from '../../extent.js';
+import {fromUserExtent} from '../../proj.js';
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import ExecutorGroup, {replayDeclutter} from '../../render/canvas/ExecutorGroup.js';
 import CanvasLayerRenderer from './Layer.js';
@@ -129,10 +130,13 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const vectorSource = this.getLayer().getSource();
 
     // clipped rendering if layer extent is set
-    const clipExtent = layerState.extent;
-    const clipped = clipExtent !== undefined;
-    if (clipped) {
-      this.clip(context, frameState, clipExtent);
+    let clipped = false;
+    if (layerState.extent) {
+      const layerExtent = fromUserExtent(layerState.extent, projection);
+      clipped = !containsExtent(layerExtent, frameState.extent) && intersectsExtent(layerExtent, frameState.extent);
+      if (clipped) {
+        this.clip(context, frameState, layerExtent);
+      }
     }