1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.Observable');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.control');
|
6 | goog.require('ol.easing');
|
7 | goog.require('ol.geom.Point');
|
8 | goog.require('ol.layer.Tile');
|
9 | goog.require('ol.layer.Vector');
|
10 | goog.require('ol.proj');
|
11 | goog.require('ol.source.OSM');
|
12 | goog.require('ol.source.Vector');
|
13 | goog.require('ol.style.Circle');
|
14 | goog.require('ol.style.Stroke');
|
15 | goog.require('ol.style.Style');
|
16 |
|
17 |
|
18 | var map = new ol.Map({
|
19 | layers: [
|
20 | new ol.layer.Tile({
|
21 | source: new ol.source.OSM({
|
22 | wrapX: false
|
23 | })
|
24 | })
|
25 | ],
|
26 | controls: ol.control.defaults({
|
27 | attributionOptions: ({
|
28 | collapsible: false
|
29 | })
|
30 | }),
|
31 | target: 'map',
|
32 | view: new ol.View({
|
33 | center: [0, 0],
|
34 | zoom: 1
|
35 | })
|
36 | });
|
37 |
|
38 | var source = new ol.source.Vector({
|
39 | wrapX: false
|
40 | });
|
41 | var vector = new ol.layer.Vector({
|
42 | source: source
|
43 | });
|
44 | map.addLayer(vector);
|
45 |
|
46 | function addRandomFeature() {
|
47 | var x = Math.random() * 360 - 180;
|
48 | var y = Math.random() * 180 - 90;
|
49 | var geom = new ol.geom.Point(ol.proj.transform([x, y],
|
50 | 'EPSG:4326', 'EPSG:3857'));
|
51 | var feature = new ol.Feature(geom);
|
52 | source.addFeature(feature);
|
53 | }
|
54 |
|
55 | var duration = 3000;
|
56 | function flash(feature) {
|
57 | var start = new Date().getTime();
|
58 | var listenerKey;
|
59 |
|
60 | function animate(event) {
|
61 | var vectorContext = event.vectorContext;
|
62 | var frameState = event.frameState;
|
63 | var flashGeom = feature.getGeometry().clone();
|
64 | var elapsed = frameState.time - start;
|
65 | var elapsedRatio = elapsed / duration;
|
66 |
|
67 | var radius = ol.easing.easeOut(elapsedRatio) * 25 + 5;
|
68 | var opacity = ol.easing.easeOut(1 - elapsedRatio);
|
69 |
|
70 | var style = new ol.style.Style({
|
71 | image: new ol.style.Circle({
|
72 | radius: radius,
|
73 | snapToPixel: false,
|
74 | stroke: new ol.style.Stroke({
|
75 | color: 'rgba(255, 0, 0, ' + opacity + ')',
|
76 | width: 0.25 + opacity
|
77 | })
|
78 | })
|
79 | });
|
80 |
|
81 | vectorContext.setStyle(style);
|
82 | vectorContext.drawGeometry(flashGeom);
|
83 | if (elapsed > duration) {
|
84 | ol.Observable.unByKey(listenerKey);
|
85 | return;
|
86 | }
|
87 |
|
88 | map.render();
|
89 | }
|
90 | listenerKey = map.on('postcompose', animate);
|
91 | }
|
92 |
|
93 | source.on('addfeature', function(e) {
|
94 | flash(e.feature);
|
95 | });
|
96 |
|
97 | window.setInterval(addRandomFeature, 1000);
|