Merge pull request #11267 from ahocevar/vectortile-label-rotation

Fix upright labels on vector tiles

src/ol/geom/flat/textpath.js

@@ -2,6 +2,7 @@
  * @module ol/geom/flat/textpath
  */
 import {lerp} from '../../math.js';
+import {rotate} from './transform.js';
 
 /**
  * @param {Array<number>} flatCoordinates Path to put text on.
@@ -15,6 +16,7 @@ import {lerp} from '../../math.js';
  * @param {function(string, string, Object<string, number>):number} measureAndCacheTextWidth Measure and cache text width.
  * @param {string} font The font.
  * @param {Object<string, number>} cache A cache of measured widths.
+ * @param {number} rotation Rotation to apply to the flatCoordinates to determine whether text needs to be reversed.
  * @return {Array<Array<*>>} The result array (or null if `maxAngle` was
  * exceeded). Entries of the array are x, y, anchorX, angle, chunk.
  */
@@ -29,12 +31,28 @@ export function drawTextOnPath(
   scale,
   measureAndCacheTextWidth,
   font,
-  cache
+  cache,
+  rotation
 ) {
   const result = [];
 
   // Keep text upright
-  const reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
+  let reverse;
+  if (rotation) {
+    const rotatedCoordinates = rotate(
+      flatCoordinates,
+      offset,
+      end,
+      stride,
+      rotation,
+      [flatCoordinates[offset], flatCoordinates[offset + 1]]
+    );
+    reverse =
+      rotatedCoordinates[0] >
+      rotatedCoordinates[rotatedCoordinates.length - stride];
+  } else {
+    reverse = flatCoordinates[offset] > flatCoordinates[end - stride];
+  }
 
   const numChars = text.length;
 

src/ol/render/canvas/Executor.js

@@ -957,7 +957,8 @@ class Executor {
               Math.abs(textScale[0]),
               measureAndCacheTextWidth,
               font,
-              cachedWidths
+              cachedWidths,
+              viewRotationFromTransform ? 0 : this.viewRotation_
             );
             if (parts) {
               let rendered = false;