Add animated gif example

2020-09-16 22:14:32 +01:00
parent 7c5b118f23
commit c18227df36
4 changed files with 77 additions and 0 deletions
@@ -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' : '';
+});