1 |
|
2 | goog.require('ol.Feature');
|
3 | goog.require('ol.Map');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.geom.LineString');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.proj');
|
9 | goog.require('ol.source.Stamen');
|
10 | goog.require('ol.source.Vector');
|
11 | goog.require('ol.style.Stroke');
|
12 | goog.require('ol.style.Style');
|
13 |
|
14 | var map = new ol.Map({
|
15 | layers: [
|
16 | new ol.layer.Tile({
|
17 | source: new ol.source.Stamen({
|
18 | layer: 'toner'
|
19 | })
|
20 | })
|
21 | ],
|
22 | target: 'map',
|
23 | view: new ol.View({
|
24 | center: [0, 0],
|
25 | zoom: 2
|
26 | })
|
27 | });
|
28 |
|
29 | var style = new ol.style.Style({
|
30 | stroke: new ol.style.Stroke({
|
31 | color: '#EAE911',
|
32 | width: 2
|
33 | })
|
34 | });
|
35 |
|
36 | var flightsSource;
|
37 | var addLater = function(feature, timeout) {
|
38 | window.setTimeout(function() {
|
39 | feature.set('start', new Date().getTime());
|
40 | flightsSource.addFeature(feature);
|
41 | }, timeout);
|
42 | };
|
43 |
|
44 | var pointsPerMs = 0.1;
|
45 | var animateFlights = function(event) {
|
46 | var vectorContext = event.vectorContext;
|
47 | var frameState = event.frameState;
|
48 | vectorContext.setStyle(style);
|
49 |
|
50 | var features = flightsSource.getFeatures();
|
51 | for (var i = 0; i < features.length; i++) {
|
52 | var feature = features[i];
|
53 | if (!feature.get('finished')) {
|
54 |
|
55 | var coords = feature.getGeometry().getCoordinates();
|
56 | var elapsedTime = frameState.time - feature.get('start');
|
57 | var elapsedPoints = elapsedTime * pointsPerMs;
|
58 |
|
59 | if (elapsedPoints >= coords.length) {
|
60 | feature.set('finished', true);
|
61 | }
|
62 |
|
63 | var maxIndex = Math.min(elapsedPoints, coords.length);
|
64 | var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));
|
65 |
|
66 |
|
67 | vectorContext.drawGeometry(currentLine);
|
68 | }
|
69 | }
|
70 |
|
71 | map.render();
|
72 | };
|
73 |
|
74 | flightsSource = new ol.source.Vector({
|
75 | wrapX: false,
|
76 | attributions: 'Flight data by ' +
|
77 | '<a href="http://openflights.org/data.html">OpenFlights</a>,',
|
78 | loader: function() {
|
79 | var url = 'data/openflights/flights.json';
|
80 | fetch(url).then(function(response) {
|
81 | return response.json();
|
82 | }).then(function(json) {
|
83 | var flightsData = json.flights;
|
84 | for (var i = 0; i < flightsData.length; i++) {
|
85 | var flight = flightsData[i];
|
86 | var from = flight[0];
|
87 | var to = flight[1];
|
88 |
|
89 |
|
90 | var arcGenerator = new arc.GreatCircle(
|
91 | {x: from[1], y: from[0]},
|
92 | {x: to[1], y: to[0]});
|
93 |
|
94 | var arcLine = arcGenerator.Arc(100, {offset: 10});
|
95 | if (arcLine.geometries.length === 1) {
|
96 | var line = new ol.geom.LineString(arcLine.geometries[0].coords);
|
97 | line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
|
98 |
|
99 | var feature = new ol.Feature({
|
100 | geometry: line,
|
101 | finished: false
|
102 | });
|
103 |
|
104 |
|
105 | addLater(feature, i * 50);
|
106 | }
|
107 | }
|
108 | map.on('postcompose', animateFlights);
|
109 | });
|
110 | }
|
111 | });
|
112 |
|
113 | var flightsLayer = new ol.layer.Vector({
|
114 | source: flightsSource,
|
115 | style: function(feature) {
|
116 |
|
117 |
|
118 | if (feature.get('finished')) {
|
119 | return style;
|
120 | } else {
|
121 | return null;
|
122 | }
|
123 | }
|
124 | });
|
125 | map.addLayer(flightsLayer);
|