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

Do not scale Icon and RegularShape displacement

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