Merge pull request #11037 from mike-000/patch-11

Allow icon and text styles to be scaled in two dimensions

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)',