Merge pull request #13975 from mike-000/do-not-scale-displacement

Do not scale Icon and RegularShape displacement

changelog/upgrade-notes.md

@@ -26,6 +26,10 @@ The control will now by default keep displaying the last mouse position when the
 
 The `PluggableMap` class has been removed.  If you want to create a custom map class, extend the `Map` class instead.
 
+#### ol/style/Icon and ol/style/RegularShape
+
+`ol/style/Image` and subclasses `displacement` is no longer scaled with the image.  If you previously expected this unintended behavior you should now increase the displacement when setting the scale.
+
 ### 6.15.0
 
 #### Deprecated `tilePixelRatio` option for data tile sources.

src/ol/style/Icon.js

@@ -293,7 +293,13 @@ class Icon extends ImageStyle {
       this.normalizedAnchor_ = anchor;
     }
     const displacement = this.getDisplacement();
-    return [anchor[0] - displacement[0], anchor[1] + displacement[1]];
+    const scale = this.getScaleArray();
+    // anchor is scaled by renderer but displacement should not be scaled
+    // so divide by scale here
+    return [
+      anchor[0] - displacement[0] / scale[0],
+      anchor[1] + displacement[1] / scale[1],
+    ];
   }
 
   /**

src/ol/style/RegularShape.js

@@ -179,7 +179,13 @@ class RegularShape extends ImageStyle {
       return null;
     }
     const displacement = this.getDisplacement();
-    return [size[0] / 2 - displacement[0], size[1] / 2 + displacement[1]];
+    const scale = this.getScaleArray();
+    // anchor is scaled by renderer but displacement should not be scaled
+    // so divide by scale here
+    return [
+      size[0] / 2 - displacement[0] / scale[0],
+      size[1] / 2 + displacement[1] / scale[1],
+    ];
   }
 
   /**

test/browser/spec/ol/style/icon.test.js

@@ -243,6 +243,32 @@ describe('ol.style.Icon', function () {
         size[1] / 2 + 20,
       ]);
     });
+
+    it('scale applies to image size, not offset', function () {
+      const scale = 4;
+      let anchorScaled, anchorBig;
+
+      const iconStyleScaled = new Icon({
+        src: 'test.png',
+        size: size,
+        displacement: [20, 10],
+        scale: scale,
+      });
+      const iconStyleBig = new Icon({
+        src: 'test.png',
+        size: [size[0] * scale, size[1] * scale],
+        displacement: [20, 10],
+      });
+      anchorScaled = iconStyleScaled.getAnchor();
+      anchorBig = iconStyleBig.getAnchor();
+      expect(anchorScaled).to.eql([anchorBig[0] / scale, anchorBig[1] / scale]);
+
+      iconStyleScaled.setDisplacement([10, 20]);
+      iconStyleBig.setDisplacement([10, 20]);
+      anchorScaled = iconStyleScaled.getAnchor();
+      anchorBig = iconStyleBig.getAnchor();
+      expect(anchorScaled).to.eql([anchorBig[0] / scale, anchorBig[1] / scale]);
+    });
   });
 
   describe('#setAnchor', function () {

test/browser/spec/ol/style/regularshape.test.js

@@ -117,6 +117,39 @@ describe('ol.style.RegularShape', function () {
       expect(style.getDisplacement()[1]).to.eql(10);
       expect(style.getAnchor()).to.eql([-15, 15]);
     });
+
+    it('scale applies to rendered radius, not offset', function () {
+      let style;
+
+      style = new RegularShape({
+        radius: 5,
+        displacement: [10, 20],
+        scale: 4,
+      });
+      expect(style.getDisplacement()).to.an('array');
+      expect(style.getDisplacement()[0]).to.eql(10);
+      expect(style.getDisplacement()[1]).to.eql(20);
+      expect(style.getAnchor()).to.eql([2.5, 10]);
+      style.setDisplacement([20, 10]);
+      expect(style.getDisplacement()).to.an('array');
+      expect(style.getDisplacement()[0]).to.eql(20);
+      expect(style.getDisplacement()[1]).to.eql(10);
+      expect(style.getAnchor()).to.eql([0, 7.5]);
+
+      style = new RegularShape({
+        radius: 20,
+        displacement: [10, 20],
+      });
+      expect(style.getDisplacement()).to.an('array');
+      expect(style.getDisplacement()[0]).to.eql(10);
+      expect(style.getDisplacement()[1]).to.eql(20);
+      expect(style.getAnchor()).to.eql([10, 40]);
+      style.setDisplacement([20, 10]);
+      expect(style.getDisplacement()).to.an('array');
+      expect(style.getDisplacement()[0]).to.eql(20);
+      expect(style.getDisplacement()[1]).to.eql(10);
+      expect(style.getAnchor()).to.eql([0, 30]);
+    });
   });
 
   describe('#clone', function () {

test/rendering/cases/regularshape-style/main.js

@@ -11,7 +11,7 @@ import View from '../../../../src/ol/View.js';
 import {Icon} from '../../../../src/ol/style.js';
 
 const vectorSource = new VectorSource();
-function createFeatures(stroke, fill, offSet = [0, 0]) {
+function createFeatures(stroke, fill, offSet = [0, 0], scale = 1) {
   let feature;
   feature = new Feature({
     geometry: new Point([offSet[0], offSet[1]]),
@@ -26,6 +26,7 @@ function createFeatures(stroke, fill, offSet = [0, 0]) {
         radius: 10,
         angle: Math.PI / 4,
         displacement: [-15, 15],
+        scale: scale,
       }),
     }),
     new Style({
@@ -36,6 +37,7 @@ function createFeatures(stroke, fill, offSet = [0, 0]) {
         anchorXUnits: 'fraction',
         anchorYUnits: 'fraction',
         displacement: [-15, 15],
+        scale: scale,
       }),
     }),
   ]);
@@ -131,6 +133,14 @@ createFeatures(
   null,
   [-50, -50]
 );
+createFeatures(
+  new Stroke({
+    lineDash: [10, 5],
+  }),
+  null,
+  [-50, 50],
+  1.5
+);
 
 createFeatures(new Stroke(), new Fill(), [50, -50]);