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

Allow icon and text styles to be scaled in two dimensions

examples/icon-scale.html

@@ -0,0 +1,16 @@
+---
+layout: example.html
+title: Icon Scale
+shortdesc: Example of scaling icons and labels.
+docs: >
+  Icons and labels can be scaled in both dimensions if required. A negative value will flip the image 
+  or text around its anchor point (reversed text is <b>not</b> suitable for line placement). A newline
+  character inserted in label text is interpreted in a <b>vector layer</b>, but will not be shown in
+  a <b>vector context</b>.
+tags: "vector, style, icon, label, scale"
+resources:
+  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
+---
+<div id="map" class="map"><div id="popup"></div></div>

examples/icon-scale.js

@@ -0,0 +1,133 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import Overlay from '../src/ol/Overlay.js';
+import Point from '../src/ol/geom/Point.js';
+import TileJSON from '../src/ol/source/TileJSON.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Icon, Style, Text} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import {getVectorContext} from '../src/ol/render.js';
+
+const rasterLayer = new TileLayer({
+  source: new TileJSON({
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    crossOrigin: '',
+  }),
+});
+
+const iconFeature = new Feature({
+  geometry: new Point(fromLonLat([0, -10])),
+  name: 'Fish.1',
+});
+
+const feature1 = new Feature({
+  geometry: new Point(fromLonLat([0, -10])),
+  name: 'Fish.1 Island',
+});
+
+const feature2 = new Feature({
+  geometry: new Point(fromLonLat([-30, 10])),
+  name: 'Fish.2 Island',
+});
+
+const iconStyle = new Style({
+  image: new Icon({
+    anchor: [0.5, 0.9],
+    src: 'data/fish.png',
+    crossOrigin: '',
+    scale: [0, 0],
+    rotation: Math.PI / 4,
+  }),
+  text: new Text({
+    text: 'FISH\nTEXT',
+    scale: [0, 0],
+    rotation: Math.PI / 4,
+    textAlign: 'center',
+    textBaseline: 'top',
+  }),
+});
+
+let i = 0;
+let j = 45;
+
+iconFeature.setStyle(function () {
+  const x = Math.sin((i * Math.PI) / 180) * 3;
+  const y = Math.sin((j * Math.PI) / 180) * 4;
+  iconStyle.getImage().setScale([x, y]);
+  iconStyle.getText().setScale([x, y]);
+  return iconStyle;
+});
+
+rasterLayer.on('postrender', function (event) {
+  const vectorContext = getVectorContext(event);
+  const x = Math.cos((i * Math.PI) / 180) * 3;
+  const y = Math.cos((j * Math.PI) / 180) * 4;
+  iconStyle.getImage().setScale([x, y]);
+  iconStyle.getText().setScale([x, y]);
+  vectorContext.drawFeature(feature2, iconStyle);
+});
+
+const vectorSource = new VectorSource({
+  features: [iconFeature, feature1, feature2],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
+
+const map = new Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new View({
+    center: fromLonLat([-15, 0]),
+    zoom: 3,
+  }),
+});
+
+setInterval(function () {
+  i = (i + 4) % 360;
+  j = (j + 5) % 360;
+  vectorSource.changed();
+}, 1000);
+
+const element = document.getElementById('popup');
+
+const popup = new Overlay({
+  element: element,
+  positioning: 'bottom-center',
+  stopEvent: false,
+  offset: [0, -50],
+});
+map.addOverlay(popup);
+
+// display popup on click
+map.on('click', function (evt) {
+  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+    return feature;
+  });
+  $(element).popover('destroy');
+  if (feature) {
+    const coordinates = feature.getGeometry().getCoordinates();
+    popup.setPosition(coordinates);
+    $(element).popover({
+      placement: 'top',
+      html: true,
+      animation: false,
+      content: feature.get('name'),
+    });
+    $(element).popover('show');
+  }
+});
+
+// change mouse cursor when over marker
+map.on('pointermove', function (e) {
+  if (e.dragging) {
+    $(element).popover('destroy');
+    return;
+  }
+  const pixel = map.getEventPixel(e.originalEvent);
+  const hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
+});