Support for rotation

src/ol/renderer/canvas/Layer.js

@@ -184,6 +184,27 @@ class CanvasLayerRenderer extends LayerRenderer {
     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.
+   * @param {number} width Width of the rendered element (in pixels).
+   * @param {number} height Height of the rendered element (in pixels).
+   * @param {number} offsetX Offset on the x-axis in view coordinates.
+   * @protected
+   * @return {!import("../../transform.js").Transform} Transform.
+   */
+  getRenderTransform(frameState, width, height, offsetX) {
+    const viewState = frameState.viewState;
+    const pixelRatio = frameState.pixelRatio;
+    const dx1 = width / 2;
+    const dy1 = height / 2;
+    const sx = pixelRatio / viewState.resolution;
+    const sy = -sx;
+    const dx2 = -viewState.center[0] + offsetX;
+    const dy2 = -viewState.center[1];
+    return composeTransform(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
+  }
+
   /**
    * @abstract
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.

src/ol/renderer/canvas/VectorLayer.js

@@ -81,6 +81,9 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      */
     this.context = createCanvasContext2D();
 
+    const canvas = this.context.canvas;
+    canvas.style.position = 'absolute';
+
     listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
   }
 
@@ -275,12 +278,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const viewHints = frameState.viewHints;
     const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
 
-    // TODO: deal with rotation (this should not be necessary)
-    if (rotation) {
-      rotateAtOffset(context, -rotation, width / 2, height / 2);
-    }
-
-    let transform = this.getTransform(frameState, 0);
+    let transform = this.getRenderTransform(frameState, width, height, 0);
     const skippedFeatureUids = layerState.managed ? frameState.skippedFeatureUids : {};
     replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
 
@@ -292,7 +290,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       while (startX < projectionExtent[0]) {
         --world;
         offsetX = worldWidth * world;
-        transform = this.getTransform(frameState, offsetX);
+        transform = this.getRenderTransform(frameState, width, height, offsetX);
         replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
         startX += worldWidth;
       }
@@ -301,17 +299,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       while (startX > projectionExtent[2]) {
         ++world;
         offsetX = worldWidth * world;
-        transform = this.getTransform(frameState, offsetX);
+        transform = this.getRenderTransform(frameState, width, height, offsetX);
         replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
         startX -= worldWidth;
       }
     }
 
-    // TODO: deal with rotation (this should not be necessary)
-    if (rotation) {
-      rotateAtOffset(context, rotation, width / 2, height / 2);
-    }
-
     if (this.getLayer().hasListener(RenderEventType.RENDER)) {
       this.dispatchRenderEvent(context, frameState, transform);
     }