Dedicated transforms

src/ol/renderer/canvas/ImageLayer.js

@@ -96,12 +96,12 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     const context = this.context;
     const canvas = context.canvas;
 
-    const pixelTransform = composeTransform(this.transform_,
+    const pixelTransform = composeTransform(this.pixelTransform_,
       frameState.size[0] / 2, frameState.size[1] / 2,
       1 / pixelRatio, 1 / pixelRatio,
       rotation,
       -width / 2, -height / 2
-    ).slice();
+    );
     const canvasTransform = transformToString(pixelTransform);
 
     if (canvas.width != width || canvas.height != height) {
@@ -122,7 +122,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
 
     const img = image.getImage();
 
-    const transform = composeTransform(this.transform_,
+    const transform = composeTransform(this.tempTransform_,
       width / 2, height / 2,
       scale, scale,
       0,

src/ol/renderer/canvas/Layer.js

@@ -29,10 +29,18 @@ class CanvasLayerRenderer extends LayerRenderer {
     this.renderedResolution;
 
     /**
+     * A temporary transform.
      * @private
      * @type {import("../../transform.js").Transform}
      */
-    this.transform_ = createTransform();
+    this.tempTransform_ = createTransform();
+
+    /**
+     * The transform for rendered pixels to viewport CSS pixels.
+     * @private
+     * @type {import("../../transform.js").Transform}
+     */
+    this.pixelTransform_ = createTransform();
 
     /**
      * @protected
@@ -44,7 +52,6 @@ class CanvasLayerRenderer extends LayerRenderer {
     canvas.style.position = 'absolute';
     canvas.style.transformOrigin = 'top left';
     canvas.className = this.getLayer().getClassName();
-
   }
 
   /**
@@ -145,25 +152,6 @@ class CanvasLayerRenderer extends LayerRenderer {
     this.dispatchComposeEvent_(RenderEventType.RENDER, context, frameState, opt_transform);
   }
 
-  /**
-   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @param {number} offsetX Offset on the x-axis in view coordinates.
-   * @protected
-   * @return {!import("../../transform.js").Transform} Transform.
-   */
-  getTransform(frameState, offsetX) {
-    const viewState = frameState.viewState;
-    const pixelRatio = frameState.pixelRatio;
-    const dx1 = pixelRatio * frameState.size[0] / 2;
-    const dy1 = pixelRatio * frameState.size[1] / 2;
-    const sx = pixelRatio / viewState.resolution;
-    const sy = -sx;
-    const angle = -viewState.rotation;
-    const dx2 = -viewState.center[0] + offsetX;
-    const dy2 = -viewState.center[1];
-    return composeTransform(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
-  }
-
   /**
    * Creates a transform for rendering to an element that will be rotated after rendering.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
@@ -182,7 +170,7 @@ class CanvasLayerRenderer extends LayerRenderer {
     const sy = -sx;
     const dx2 = -viewState.center[0] + offsetX;
     const dy2 = -viewState.center[1];
-    return composeTransform(this.transform_, dx1, dy1, sx, sy, -viewState.rotation, dx2, dy2);
+    return composeTransform(this.tempTransform_, dx1, dy1, sx, sy, -viewState.rotation, dx2, dy2);
   }
 
 }

src/ol/renderer/canvas/TileLayer.js

@@ -215,7 +215,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
 
     const canvas = context.canvas;
     const canvasScale = tileResolution / frameState.viewState.resolution / tilePixelRatio;
-    const pixelTransform = composeTransform(this.transform_,
+    const pixelTransform = composeTransform(this.pixelTransform_,
       frameState.size[0] / 2, frameState.size[1] / 2,
       canvasScale, canvasScale,
       rotation,
@@ -350,6 +350,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
   getTileImage(tile) {
     return /** @type {import("../../ImageTile.js").default} */ (tile).getImage();
   }
+
 }