Merge pull request #11565 from mike-000/patch-17

Animated GIF example

examples/.eslintrc

@@ -7,6 +7,7 @@
     "d3": false,
     "domtoimage": false,
     "geojsonvt": false,
+    "gifler": false,
     "GyroNorm": false,
     "jsPDF": false,
     "jsts": false,

examples/animated-gif.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Animated GIF
+shortdesc: Example of using an animated GIF as an icon.
+docs: >
+  Example of using an animated GIF as an icon.
+  Animation is achieved using the <a href="http://themadcreator.github.io/gifler/" target="_blank">Gifler</a> library.
+tags: "animation, vector, style, icon, gif"
+resources:
+  - https://unpkg.com/gifler@0.1.0/gifler.min.js
+---
+<div id="map" class="map"></div>

examples/animated-gif.js

@@ -0,0 +1,64 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import Point from '../src/ol/geom/Point.js';
+import View from '../src/ol/View.js';
+import {Icon, Style} from '../src/ol/style.js';
+import {Stamen, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+});
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
+
+const rasterLayer = new TileLayer({
+  source: new Stamen({
+    layer: 'toner',
+  }),
+});
+
+const map = new Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+const gifUrl = 'data/globe.gif';
+const gif = gifler(gifUrl);
+gif.frames(
+  document.createElement('canvas'),
+  function (ctx, frame) {
+    if (!iconFeature.getStyle()) {
+      iconFeature.setStyle(
+        new Style({
+          image: new Icon({
+            img: ctx.canvas,
+            imgSize: [frame.width, frame.height],
+            opacity: 0.8,
+          }),
+        })
+      );
+    }
+    ctx.clearRect(0, 0, frame.width, frame.height);
+    ctx.drawImage(frame.buffer, frame.x, frame.y);
+    map.render();
+  },
+  true
+);
+
+// change mouse cursor when over icon
+map.on('pointermove', function (e) {
+  const pixel = map.getEventPixel(e.originalEvent);
+  const hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
+});