Merge pull request #229 from NieuwlandGeo/fix-displacement-rotation

Fix combination of rotation and displacement

Author: ajkopinga

docs/assets/sldreader-standalone.js

@@ -1,4 +1,4 @@
-/* Version: 0.7.3 - March 27, 2026 10:15:35 */
+/* Version: 0.7.3 - March 27, 2026 16:12:19 */
 var SLDReader = (function (exports, RenderFeature, has, Style, Icon, Fill, Stroke, Circle, RegularShape, render, Point, color, colorlike, IconImageCache, ImageStyle, dom, IconImage, LineString, extent, Polygon, MultiPolygon, Text, MultiPoint) {
   'use strict';
 
@@ -3603,11 +3603,11 @@ var SLDReader = (function (exports, RenderFeature, has, Style, Icon, Fill, Strok
     } = graphic;
     const sizeValue = Number(evaluate(size, feature, context)) || DEFAULT_MARK_SIZE;
     const rotationDegrees = Number(evaluate(rotation, feature, context)) || 0.0;
+    const rotationRadians = Math.PI * rotationDegrees / 180.0;
 
     // --- Update dynamic rotation ---
     if (isDynamicExpression(rotation)) {
-      // Note: OL angles are in radians.
-      const rotationRadians = Math.PI * rotationDegrees / 180.0;
+      // Note: OL expects angles in radians.
       olImage.setRotation(rotationRadians);
     }
 
@@ -3654,7 +3654,12 @@ var SLDReader = (function (exports, RenderFeature, has, Style, Icon, Fill, Strok
         const dx = evaluate(displacementx, feature, context) || 0.0;
         const dy = evaluate(displacementy, feature, context) || 0.0;
         if (dx !== 0.0 || dy !== 0.0) {
-          olImage.setDisplacement([dx, dy]);
+          // The SLD spec says that rotation must be independent of displacement,
+          // but because OpenLayers applies rotation after displacement, the displaced center will be rotated too.
+          // Compensate for this by rotating displaced center back in counter-clockwise direction.
+          const dx2 = Math.cos(rotationRadians) * dx - Math.sin(rotationRadians) * dy;
+          const dy2 = Math.sin(rotationRadians) * dx + Math.cos(rotationRadians) * dy;
+          olImage.setDisplacement([dx2, dy2]);
         }
       }
     }

src/styles/pointStyle.js

@@ -127,11 +127,11 @@ function getPointStyle(symbolizer, feature, context) {
   const sizeValue =
     Number(evaluate(size, feature, context)) || DEFAULT_MARK_SIZE;
   const rotationDegrees = Number(evaluate(rotation, feature, context)) || 0.0;
+  const rotationRadians = (Math.PI * rotationDegrees) / 180.0;
 
   // --- Update dynamic rotation ---
   if (isDynamicExpression(rotation)) {
-    // Note: OL angles are in radians.
-    const rotationRadians = (Math.PI * rotationDegrees) / 180.0;
+    // Note: OL expects angles in radians.
     olImage.setRotation(rotationRadians);
   }
 
@@ -192,7 +192,12 @@ function getPointStyle(symbolizer, feature, context) {
       const dx = evaluate(displacementx, feature, context) || 0.0;
       const dy = evaluate(displacementy, feature, context) || 0.0;
       if (dx !== 0.0 || dy !== 0.0) {
-        olImage.setDisplacement([dx, dy]);
+        // The SLD spec says that rotation must be independent of displacement,
+        // but because OpenLayers applies rotation after displacement, the displaced center will be rotated too.
+        // Compensate for this by rotating displaced center back in counter-clockwise direction.
+        const dx2 = Math.cos(rotationRadians) * dx - Math.sin(rotationRadians) * dy;
+        const dy2 = Math.sin(rotationRadians) * dx + Math.cos(rotationRadians) * dy;
+        olImage.setDisplacement([dx2, dy2]);
       }
     }
   }

test/OlStyler.test.js

@@ -263,8 +263,8 @@ describe('SLD with external graphics', () => {
     ).to.be.undefined;
     expect(
       getImageLoadingState(
-        featureTypeStyle.elseFilterRules[0].symbolizers[0].graphic.externalgraphic
-          .onlineresource
+        featureTypeStyle.elseFilterRules[0].symbolizers[0].graphic
+          .externalgraphic.onlineresource
       )
     ).to.be.undefined;
 
@@ -451,8 +451,8 @@ describe('SLD with external graphics', () => {
           .true;
         // The pointsymbolizer of the second style object should also be properly invalidated,
         // even if it uses the same image for which the first style function triggered the loading.
-        expect(featureTypeStyle2.rules[0].symbolizers[0].__invalidated).to
-          .be.true;
+        expect(featureTypeStyle2.rules[0].symbolizers[0].__invalidated).to.be
+          .true;
         done();
       },
     });
@@ -595,9 +595,15 @@ describe('Dynamic style properties', () => {
         );
       });
 
-      it('Reads displacement from feature', () => {
+      it('Reads displacement and compensates for rotation', () => {
         const style = styleFunction(pointFeature)[0];
-        expect(style.getImage().getDisplacement()).to.deep.equal([10, 20]);
+        const [dx, dy] = style.getImage().getDisplacement();
+        const rotation = style.getImage().getRotation();
+        // OriDx and oriDy are the original, uncompensated, displacement values from SLD.
+        const oriDx = Math.cos(-rotation) * dx - Math.sin(-rotation) * dy;
+        expect(oriDx).to.be.closeTo(10, 1e-6);
+        const oriDy = Math.sin(-rotation) * dx + Math.cos(-rotation) * dy;
+        expect(oriDy).to.be.closeTo(20, 1e-6);
       });
 
       it('Reads text for label from feature', () => {
@@ -1227,8 +1233,14 @@ describe('Styling with dynamic SVG Parameters', () => {
       expect(imageRotationDegrees).to.equal(42);
     });
 
-    it('Dynamic displacement', () => {
-      expect(olStyle.getImage().getDisplacement()).to.deep.equal([15, 45]);
+    it('Dynamic displacement (compensated for dynamic rotation)', () => {
+      const [dx, dy] = olStyle.getImage().getDisplacement();
+      const rotation = olStyle.getImage().getRotation();
+      // OriDx and oriDy are the original, uncompensated, displacement values from SLD.
+      const oriDx = Math.cos(-rotation) * dx - Math.sin(-rotation) * dy;
+      expect(oriDx).to.be.closeTo(15, 1e-6);
+      const oriDy = Math.sin(-rotation) * dx + Math.cos(-rotation) * dy;
+      expect(oriDy).to.be.closeTo(45, 1e-6);
     });
   });