Merge pull request #11413 from mike-000/patch-12

Include scale option in RegularShape and Circle style constructors

examples/regularshape.html

@@ -6,8 +6,9 @@ docs: >
   This example shows how several regular shapes
   or symbols (representing `x`, `cross`, `star`,
   `triangle`, `square` and `stacked`) can be created.
+  A `rectangle` is produced by scaling a square created without rotation.
 
   Style `stacked` represents possility to stack multiple shapes with offset
-tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
+tags: "vector, symbol, regularshape, style, square, rectangle, cross, star, triangle, x"
 ---
 <div id="map" class="map"></div>

examples/regularshape.js

@@ -19,6 +19,17 @@ const styles = {
       angle: Math.PI / 4,
     }),
   }),
+  'rectangle': new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      radius: 10 / Math.SQRT2,
+      radius2: 10,
+      points: 4,
+      angle: 0,
+      scale: [1, 0.5],
+    }),
+  }),
   'triangle': new Style({
     image: new RegularShape({
       fill: fill,
@@ -82,14 +93,24 @@ const styles = {
   ],
 };
 
-const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked'];
+const styleKeys = [
+  'x',
+  'cross',
+  'star',
+  'triangle',
+  'square',
+  'rectangle',
+  'stacked',
+];
 const count = 250;
 const features = new Array(count);
 const e = 4500000;
 for (let i = 0; i < count; ++i) {
   const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
   features[i] = new Feature(new Point(coordinates));
-  features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 6)]]);
+  features[i].setStyle(
+    styles[styleKeys[Math.floor(Math.random() * styleKeys.length)]]
+  );
 }
 
 const source = new VectorSource({

rendering/cases/circle-style/main.js

@@ -8,6 +8,21 @@ import VectorLayer from '../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
 import View from '../../../src/ol/View.js';
 
+const ellipse = new Feature(new Point([-50, -50]));
+
+ellipse.setStyle(
+  new Style({
+    image: new Circle({
+      radius: 30,
+      scale: [1, 0.5],
+      stroke: new Stroke({
+        color: '#00f',
+        width: 3,
+      }),
+    }),
+  })
+);
+
 const vectorSource = new VectorSource();
 
 vectorSource.addFeatures([
@@ -23,6 +38,7 @@ vectorSource.addFeatures([
     geometry: new Point([50, 50]),
     radius: 30,
   }),
+  ellipse,
 ]);
 
 const style = new Style({

rendering/cases/regularshape-style/main.js

@@ -83,6 +83,25 @@ function createFeatures(stroke, fill, offSet = [0, 0]) {
     })
   );
   vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([8 + offSet[0], 30 + offSet[1]]),
+  });
+  // rectangle
+  feature.setStyle(
+    new Style({
+      image: new RegularShape({
+        fill: fill,
+        stroke: stroke,
+        radius: 10 / Math.SQRT2,
+        radius2: 10,
+        points: 4,
+        angle: 0,
+        scale: [1, 0.5],
+      }),
+    })
+  );
+  vectorSource.addFeature(feature);
 }
 
 createFeatures(new Stroke({width: 2}), new Fill({color: 'red'}));

src/ol/style/Circle.js

@@ -10,6 +10,8 @@ import RegularShape from './RegularShape.js';
  * @property {number} radius Circle radius.
  * @property {import("./Stroke.js").default} [stroke] Stroke style.
  * @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`.
  */
 
 /**
@@ -29,6 +31,7 @@ class CircleStyle extends RegularShape {
       fill: options.fill,
       radius: options.radius,
       stroke: options.stroke,
+      scale: options.scale !== undefined ? options.scale : 1,
       displacement:
         options.displacement !== undefined ? options.displacement : [0, 0],
     });
@@ -40,14 +43,15 @@ class CircleStyle extends RegularShape {
    * @api
    */
   clone() {
+    const scale = this.getScale();
     const style = new CircleStyle({
       fill: this.getFill() ? this.getFill().clone() : undefined,
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       radius: this.getRadius(),
+      scale: Array.isArray(scale) ? scale.slice() : scale,
       displacement: this.getDisplacement().slice(),
     });
     style.setOpacity(this.getOpacity());
-    style.setScale(this.getScale());
     return style;
   }
 

src/ol/style/RegularShape.js

@@ -30,6 +30,8 @@ import {
  * @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.
+ * @property {number|import("../size.js").Size} [scale=1] Scale. Unless two dimensional scaling is required a better
+ * result may be obtained with appropriate settings for `radius`, `radius1` and `radius2.
  */
 
 /**
@@ -66,7 +68,7 @@ class RegularShape extends ImageStyle {
       opacity: 1,
       rotateWithView: rotateWithView,
       rotation: options.rotation !== undefined ? options.rotation : 0,
-      scale: 1,
+      scale: options.scale !== undefined ? options.scale : 1,
       displacement:
         options.displacement !== undefined ? options.displacement : [0, 0],
     });
@@ -159,6 +161,7 @@ class RegularShape extends ImageStyle {
    * @api
    */
   clone() {
+    const scale = this.getScale();
     const style = new RegularShape({
       fill: this.getFill() ? this.getFill().clone() : undefined,
       points: this.getPoints(),
@@ -168,10 +171,10 @@ class RegularShape extends ImageStyle {
       stroke: this.getStroke() ? this.getStroke().clone() : undefined,
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView(),
+      scale: Array.isArray(scale) ? scale.slice() : scale,
       displacement: this.getDisplacement().slice(),
     });
     style.setOpacity(this.getOpacity());
-    style.setScale(this.getScale());
     return style;
   }