allow scale to be two dimensional

add getScaleArray() method

test two dimension scale icons
test two dimension scale text

add example of icon and label scaling
use smaller icon and larger interval
test two dimensional scale icons
test two dimensional scale icons

src/ol/style/Icon.js

@@ -36,7 +36,7 @@ import {getUid} from '../util.js';
  * @property {import("./IconOrigin.js").default} [offsetOrigin='top-left'] Origin of the offset: `bottom-left`, `bottom-right`,
  * `top-left` or `top-right`.
  * @property {number} [opacity=1] Opacity of the icon.
- * @property {number} [scale=1] Scale.
+ * @property {number|import("../size.js").Size} [scale=1] Scale.
  * @property {boolean} [rotateWithView=false] Whether to rotate the icon with the view.
  * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
  * @property {import("../size.js").Size} [size] Icon size in pixel. Can be used together with `offset` to define the
@@ -69,7 +69,7 @@ class Icon extends ImageStyle {
     const rotation = options.rotation !== undefined ? options.rotation : 0;
 
     /**
-     * @type {number}
+     * @type {number|import("../size.js").Size}
      */
     const scale = options.scale !== undefined ? options.scale : 1;
 
@@ -215,6 +215,7 @@ class Icon extends ImageStyle {
    * @api
    */
   clone() {
+    const scale = this.getScale();
     return new Icon({
       anchor: this.anchor_.slice(),
       anchorOrigin: this.anchorOrigin_,
@@ -230,7 +231,7 @@ class Icon extends ImageStyle {
       offsetOrigin: this.offsetOrigin_,
       size: this.size_ !== null ? this.size_.slice() : undefined,
       opacity: this.getOpacity(),
-      scale: this.getScale(),
+      scale: Array.isArray(scale) ? scale.slice() : scale,
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView(),
     });

src/ol/style/Image.js

@@ -2,13 +2,14 @@
  * @module ol/style/Image
  */
 import {abstract} from '../util.js';
+import {toSize} from '../size.js';
 
 /**
  * @typedef {Object} Options
  * @property {number} opacity
  * @property {boolean} rotateWithView
  * @property {number} rotation
- * @property {number} scale
+ * @property {number|import("../size.js").Size} scale
  * @property {Array<number>} displacement
  */
 
@@ -45,10 +46,16 @@ class ImageStyle {
 
     /**
      * @private
-     * @type {number}
+     * @type {number|import("../size.js").Size}
      */
     this.scale_ = options.scale;
 
+    /**
+     * @private
+     * @type {import("../size.js").Size}
+     */
+    this.scaleArray_ = toSize(options.scale);
+
     /**
      * @private
      * @type {Array<number>}
@@ -62,9 +69,10 @@ class ImageStyle {
    * @api
    */
   clone() {
+    const scale = this.getScale();
     return new ImageStyle({
       opacity: this.getOpacity(),
-      scale: this.getScale(),
+      scale: Array.isArray(scale) ? scale.slice() : scale,
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView(),
       displacement: this.getDisplacement().slice(),
@@ -100,13 +108,21 @@ class ImageStyle {
 
   /**
    * Get the symbolizer scale.
-   * @return {number} Scale.
+   * @return {number|import("../size.js").Size} Scale.
    * @api
    */
   getScale() {
     return this.scale_;
   }
 
+  /**
+   * Get the symbolizer scale array.
+   * @return {import("../size.js").Size} Scale array.
+   */
+  getScaleArray() {
+    return this.scaleArray_;
+  }
+
   /**
    * Get the displacement of the shape
    * @return {Array<number>} Shape's center displacement
@@ -219,11 +235,12 @@ class ImageStyle {
   /**
    * Set the scale.
    *
-   * @param {number} scale Scale.
+   * @param {number|import("../size.js").Size} scale Scale.
    * @api
    */
   setScale(scale) {
     this.scale_ = scale;
+    this.scaleArray_ = toSize(scale);
   }
 
   /**

src/ol/style/Text.js

@@ -3,6 +3,7 @@
  */
 import Fill from './Fill.js';
 import TextPlacement from './TextPlacement.js';
+import {toSize} from '../size.js';
 
 /**
  * The default fill color to use if no fill was set at construction time; a
@@ -23,7 +24,7 @@ const DEFAULT_FILL_COLOR = '#333';
  * @property {boolean} [overflow=false] For polygon labels or when `placement` is set to `'line'`, allow text to exceed
  * the width of the polygon at the label position or the length of the path that it follows.
  * @property {import("./TextPlacement.js").default|string} [placement='point'] Text placement.
- * @property {number} [scale] Scale.
+ * @property {number|import("../size.js").Size} [scale] Scale.
  * @property {boolean} [rotateWithView=false] Whether to rotate the text with the view.
  * @property {number} [rotation=0] Rotation in radians (positive rotation clockwise).
  * @property {string} [text] Text content.
@@ -74,10 +75,16 @@ class Text {
 
     /**
      * @private
-     * @type {number|undefined}
+     * @type {number|import("../size.js").Size|undefined}
      */
     this.scale_ = options.scale;
 
+    /**
+     * @private
+     * @type {import("../size.js").Size}
+     */
+    this.scaleArray_ = toSize(options.scale !== undefined ? options.scale : 1);
+
     /**
      * @private
      * @type {string|undefined}
@@ -172,6 +179,7 @@ class Text {
    * @api
    */
   clone() {
+    const scale = this.getScale();
     return new Text({
       font: this.getFont(),
       placement: this.getPlacement(),
@@ -179,7 +187,7 @@ class Text {
       overflow: this.getOverflow(),
       rotation: this.getRotation(),
       rotateWithView: this.getRotateWithView(),
-      scale: this.getScale(),
+      scale: Array.isArray(scale) ? scale.slice() : scale,
       text: this.getText(),
       textAlign: this.getTextAlign(),
       textBaseline: this.getTextBaseline(),
@@ -280,13 +288,21 @@ class Text {
 
   /**
    * Get the text scale.
-   * @return {number|undefined} Scale.
+   * @return {number|import("../size.js").Size|undefined} Scale.
    * @api
    */
   getScale() {
     return this.scale_;
   }
 
+  /**
+   * Get the symbolizer scale array.
+   * @return {import("../size.js").Size} Scale array.
+   */
+  getScaleArray() {
+    return this.scaleArray_;
+  }
+
   /**
    * Get the stroke style for the text.
    * @return {import("./Stroke.js").default} Stroke style.
@@ -443,11 +459,12 @@ class Text {
   /**
    * Set the scale.
    *
-   * @param {number|undefined} scale Scale.
+   * @param {number|import("../size.js").Size|undefined} scale Scale.
    * @api
    */
   setScale(scale) {
     this.scale_ = scale;
+    this.scaleArray_ = toSize(scale !== undefined ? scale : 1);
   }
 
   /**