Merge pull request #11537 from mike-000/patch-16

Add rotation and rotateWithView to ol/style/Circle clone method and options

src/ol/style/Circle.js

@@ -12,6 +12,10 @@ import RegularShape from './RegularShape.js';
  * @property {Array<number>} [displacement=[0,0]] displacement
  * @property {number|import("../size.js").Size} [scale=1] Scale. A two dimensional scale will produce an ellipse.
  * Unless two dimensional scaling is required a better result may be obtained with an appropriate setting for `radius`.
+ * @property {number} [rotation=0] Rotation in radians
+ * (positive rotation clockwise, meaningful only when used in conjunction with a two dimensional scale).
+ * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view
+ * (meaningful only when used in conjunction with a two dimensional scale).
  */
 
 /**
@@ -32,6 +36,9 @@ class CircleStyle extends RegularShape {
       radius: options.radius,
       stroke: options.stroke,
       scale: options.scale !== undefined ? options.scale : 1,
+      rotation: options.rotation !== undefined ? options.rotation : 0,
+      rotateWithView:
+        options.rotateWithView !== undefined ? options.rotateWithView : false,
       displacement:
         options.displacement !== undefined ? options.displacement : [0, 0],
     });
@@ -49,6 +56,8 @@ class CircleStyle extends RegularShape {
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       radius: this.getRadius(),
       scale: Array.isArray(scale) ? scale.slice() : scale,
+      rotation: this.getRotation(),
+      rotateWithView: this.getRotateWithView(),
       displacement: this.getDisplacement().slice(),
     });
     style.setOpacity(this.getOpacity());

test/spec/ol/style/circle.test.js

@@ -71,17 +71,25 @@ describe('ol.style.Circle', function () {
           color: '#319FD3',
         }),
         radius: 5,
+        scale: [1.5, 1],
+        rotation: 2,
+        rotateWithView: true,
+        displacement: [10, 20],
       });
       original.setOpacity(0.5);
-      original.setScale(1.5);
       const clone = original.clone();
       expect(original.getFill().getColor()).to.eql(clone.getFill().getColor());
       expect(original.getOpacity()).to.eql(clone.getOpacity());
       expect(original.getRadius()).to.eql(clone.getRadius());
-      expect(original.getScale()).to.eql(clone.getScale());
+      expect(original.getRotation()).to.eql(clone.getRotation());
+      expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
+      expect(original.getScale()[0]).to.eql(clone.getScale()[0]);
+      expect(original.getScale()[1]).to.eql(clone.getScale()[1]);
       expect(original.getStroke().getColor()).to.eql(
         clone.getStroke().getColor()
       );
+      expect(original.getDisplacement()[0]).to.eql(clone.getDisplacement()[0]);
+      expect(original.getDisplacement()[1]).to.eql(clone.getDisplacement()[1]);
     });
 
     it('the clone does not reference the same objects as the original', function () {
@@ -92,10 +100,14 @@ describe('ol.style.Circle', function () {
         stroke: new Stroke({
           color: '#319FD3',
         }),
+        scale: [1.5, 1],
+        displacement: [0, 5],
       });
       const clone = original.clone();
       expect(original.getFill()).to.not.be(clone.getFill());
       expect(original.getStroke()).to.not.be(clone.getStroke());
+      expect(original.getScale()).to.not.be(clone.getScale());
+      expect(original.getDisplacement()).to.not.be(clone.getDisplacement());
 
       clone.getFill().setColor('#012345');
       clone.getStroke().setColor('#012345');