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
2020-05-13 12:18:51 +01:00
parent 6802fb7e34
commit cf0e650435
19 changed files with 528 additions and 111 deletions
--- a/rendering/cases/icon-scale/main.js
+++ b/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();