Support for rotation

src/ol/renderer/Composite.js

@@ -30,9 +30,13 @@ class CompositeMapRenderer extends MapRenderer {
      * @type {HTMLDivElement}
      */
     this.element_ = document.createElement('div');
+    const style = this.element_.style;
+    style.display = 'flex';
+    style.alignItems = 'center';
+    style.justifyContent = 'center';
+    style.width = '100%';
+    style.height = '100%';
 
-    this.element_.style.width = '100%';
-    this.element_.style.height = '100%';
     this.element_.className = CLASS_UNSELECTABLE;
 
     const container = map.getViewport();
@@ -82,9 +86,6 @@ class CompositeMapRenderer extends MapRenderer {
     stableSort(layerStatesArray, sortByZIndex);
 
     const rotation = frameState.viewState.rotation;
-    if (rotation) {
-      // TODO: apply rotation
-    }
 
     const viewResolution = frameState.viewState.resolution;
 
@@ -99,10 +100,17 @@ class CompositeMapRenderer extends MapRenderer {
       const layerRenderer = this.getLayerRenderer(layer);
       if (layerRenderer.prepareFrame(frameState, layerState)) {
         const element = layerRenderer.renderFrame(frameState, layerState);
+
         const opacity = layerState.opacity;
         if (opacity !== element.style.opacity) {
           element.style.opacity = opacity;
         }
+
+        const transform = 'rotate(' + rotation + 'rad)';
+        if (transform !== element.style.transform) {
+          element.style.transform = transform;
+        }
+
         this.children_.push(element);
       }
     }

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);
     }