add offset option to RegularShape

src/ol/style/RegularShape.js

@@ -20,6 +20,7 @@ import ImageStyle from './Image.js';
  * @property {number} [radius1] Outer radius of a star.
  * @property {number} [radius2] Inner radius of a star.
  * @property {number} [angle=0] Shape's angle in radians. A value of 0 will have one of the shape's point facing up.
+ * @property {Array<number>} [offset] Offset of the shape
  * @property {import("./Stroke.js").default} [stroke] Stroke style.
  * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
  * @property {boolean} [rotateWithView=false] Whether to rotate the shape with the view.
@@ -88,6 +89,12 @@ class RegularShape extends ImageStyle {
      */
     this.origin_ = [0, 0];
 
+    /**
+     * @private
+     * @type {Array<number>}
+     */
+    this.offset_ = options.offset ? options.offset : [0, 0];
+
     /**
      * @private
      * @type {number}
@@ -160,7 +167,8 @@ class RegularShape extends ImageStyle {
       angle: this.getAngle(),
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       rotation: this.getRotation(),
-      rotateWithView: this.getRotateWithView()
+      rotateWithView: this.getRotateWithView(),
+      offset: this.getOffset()
     });
     style.setOpacity(this.getOpacity());
     style.setScale(this.getScale());
@@ -184,6 +192,15 @@ class RegularShape extends ImageStyle {
     return this.angle_;
   }
 
+  /**
+   * Get the offset of the shape
+   * @return {Array<number>} Shape's center offset
+   * @api
+   */
+  getOffset() {
+    return this.offset_;
+  }
+
   /**
    * Get the fill style for the shape.
    * @return {import("./Fill.js").default} Fill style.
@@ -354,7 +371,7 @@ class RegularShape extends ImageStyle {
     size = this.canvas_.width;
     const imageSize = size;
 
-    this.draw_(renderOptions, context, 0, 0);
+    this.draw_(renderOptions, context, this.offset_[0], this.offset_[1]);
 
     this.createHitDetectionCanvas_(renderOptions);
 

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

@@ -82,6 +82,24 @@ describe('ol.style.RegularShape', function() {
       expect(style.getHitDetectionImageSize()).to.eql([21, 21]);
     });
 
+    it('sets default offset [0, 0]', function() {
+      const style = new RegularShape({
+        radius: 5
+      });
+      expect(style.getOffset()).to.an('array');
+      expect(style.getOffset()[0]).to.eql(0);
+      expect(style.getOffset()[1]).to.eql(0);
+    });
+
+    it('can use offset', function() {
+      const style = new RegularShape({
+        radius: 5,
+        offset: [10, 20]
+      });
+      expect(style.getOffset()).to.an('array');
+      expect(style.getOffset()[0]).to.eql(10);
+      expect(style.getOffset()[1]).to.eql(20);
+    });
   });
 
   describe('#clone', function() {
@@ -108,7 +126,8 @@ describe('ol.style.RegularShape', function() {
           color: '#319FD3'
         }),
         rotation: 2,
-        rotateWithView: true
+        rotateWithView: true,
+        offest: [10, 20]
       });
       original.setOpacity(0.5);
       original.setScale(1.5);
@@ -123,6 +142,8 @@ describe('ol.style.RegularShape', function() {
       expect(original.getRotateWithView()).to.eql(clone.getRotateWithView());
       expect(original.getScale()).to.eql(clone.getScale());
       expect(original.getStroke().getColor()).to.eql(clone.getStroke().getColor());
+      expect(original.getOffset()[0]).to.eql(clone.getOffset()[0]);
+      expect(original.getOffset()[1]).to.eql(clone.getOffset()[1]);
     });
 
     it('the clone does not reference the same objects as the original', function() {