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

rendering/cases/icon-scale/main.js

@@ -0,0 +1,117 @@
+import Feature from '../../../src/ol/Feature.js';
+import Icon from '../../../src/ol/style/Icon.js';
+import Map from '../../../src/ol/Map.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Style from '../../../src/ol/style/Style.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import View from '../../../src/ol/View.js';
+
+const features = [];
+for (let i = 0; i < 2; ++i) {
+  const x = i * 5;
+  features.push(
+    new Feature({
+      geometry: new Point([x + 2, 2]),
+      scale: [1.5, 1],
+      anchor: [1, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 2]),
+      scale: [1.5, 1],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 2]),
+      scale: [1.5, 1],
+      anchor: [0, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 2, 4]),
+      scale: [-1, 1],
+      anchor: [0, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 4]),
+      scale: [-1, 1],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 4]),
+      scale: [-1, 1],
+      anchor: [1, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 2, 6]),
+      scale: [1, -1],
+      anchor: [0.5, 1],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 6]),
+      scale: [1, -1],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 6]),
+      scale: [1, -1],
+      anchor: [0.5, 0],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 2, 8]),
+      scale: [1, 1.5],
+      anchor: [0.5, 0],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 3, 8]),
+      scale: [1, 1.5],
+      anchor: [0.5, 0.5],
+      rotated: i,
+    }),
+    new Feature({
+      geometry: new Point([x + 4, 8]),
+      scale: [1, 1.5],
+      anchor: [0.5, 1],
+      rotated: i,
+    })
+  );
+}
+
+const vectorSource = new VectorSource({
+  features: features,
+});
+
+const style = new Style({
+  image: new Icon({
+    src: '/data/fish.png',
+  }),
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+  style: function (feature) {
+    style.getImage().setScale(feature.get('scale'));
+    style.getImage().setAnchor(feature.get('anchor'));
+    style.getImage().setRotation((feature.get('rotated') * Math.PI) / 4);
+    return style;
+  },
+});
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [vectorLayer],
+  target: 'map',
+  view: new View(),
+});
+map.getView().fit([0, 0, 11, 11]);
+
+render();

rendering/cases/text-style-linestring-nice/main.js

@@ -59,7 +59,7 @@ feature1.setStyle(
 vectorSource.addFeature(feature1);
 
 const lineString2 = lineString1.clone();
-lineString2.translate(0, 30);
+lineString2.translate(0, 20);
 const feature2 = new Feature({geometry: lineString2});
 feature2.setStyle(
   new Style({
@@ -123,7 +123,7 @@ feature4.setStyle(
 vectorSource.addFeature(feature4);
 
 const lineString5 = lineString4.clone();
-lineString5.translate(0, 30);
+lineString5.translate(0, 20);
 const feature5 = new Feature({geometry: lineString5});
 feature5.setStyle(
   new Style({
@@ -141,7 +141,7 @@ feature5.setStyle(
 vectorSource.addFeature(feature5);
 
 const lineString6 = lineString5.clone();
-lineString6.translate(0, 30);
+lineString6.translate(0, 20);
 const feature6 = new Feature({geometry: lineString6});
 feature6.setStyle(
   new Style({
@@ -160,6 +160,28 @@ feature6.setStyle(
 );
 vectorSource.addFeature(feature6);
 
+const lineString7 = lineString6.clone();
+lineString7.translate(0, 30);
+const feature7 = new Feature({geometry: lineString7});
+feature7.setStyle(
+  new Style({
+    stroke: new Stroke({color: 'blue'}),
+    text: new Text({
+      text: 'Reflection',
+      font: 'normal 400 12px/1 Ubuntu',
+      scale: [2, -1],
+      textBaseline: 'bottom',
+      textAlign: 'right',
+      placement: 'line',
+      stroke: new Stroke({
+        color: '#FFFF00',
+        width: 1,
+      }),
+    }),
+  })
+);
+vectorSource.addFeature(feature7);
+
 const map = new Map({
   pixelRatio: 1,
   layers: [

rendering/cases/text-style/main.js

@@ -110,15 +110,23 @@ feature.setStyle(
 );
 vectorSource.addFeature(feature);
 
-// background and padding
+// two dimensional scale
 feature = new Feature({
-  geometry: new Point([-10, 0]),
+  geometry: new Point([100, 20]),
 });
 feature.setStyle(
   new Style({
     text: new Text({
-      text: 'hello',
+      text: 'mirror',
       font: '12px Ubuntu',
+      scale: [-1, 2],
+      rotateWithView: true,
+      fill: new Fill({
+        color: 'red',
+      }),
+      stroke: new Stroke({
+        color: '#000',
+      }),
       padding: [1, 2, 3, 5],
       backgroundFill: new Fill({
         color: 'rgba(55, 55, 55, 0.25)',