Created
August 24, 2015 12:44
-
-
Save tsauerwein/abd7aea90606bafe3119 to your computer and use it in GitHub Desktop.
OpenLayers 3 Flight Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var map = new ol.Map({ | |
| layers: [ | |
| new ol.layer.Tile({ | |
| source: new ol.source.Stamen({layer: 'toner'}) | |
| }) | |
| ], | |
| renderer: 'canvas', | |
| target: 'map', | |
| view: new ol.View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }) | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var flightsSource = new ol.source.Vector(); | |
| var url = 'data/openflights/flights.json'; | |
| $.ajax({url: url, dataType: 'json', success: function(response) { | |
| var flightsData = response.flights; | |
| // calculate flight path and add features to source | |
| ... | |
| }}); | |
| var flightsLayer = new ol.layer.Vector({ | |
| source: flightsSource | |
| }); | |
| map.addLayer(flightsLayer); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ... | |
| var flightsData = response.flights; | |
| for (var i = 0; i < flightsData.length; i++) { | |
| var flight = flightsData[i]; | |
| var from = flight[0], to = flight[1]; | |
| // create an arc circle between the two locations | |
| var arcGenerator = new arc.GreatCircle( | |
| {x: from[1], y: from[0]}, | |
| {x: to[1], y: to[0]}); | |
| var arcLine = arcGenerator.Arc(100, {offset: 10}); | |
| if (arcLine.geometries.length === 1) { | |
| var line = new ol.geom.LineString(arcLine.geometries[0].coords); | |
| line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857')); | |
| var feature = new ol.Feature({ | |
| geometry: line, | |
| finished: false | |
| }); | |
| addLater(feature, i * 50); | |
| } | |
| } | |
| map.on('postcompose', animateFlights); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var pointsPerMs = 0.1; | |
| var animateFlights = function(event) { | |
| var vectorContext = event.vectorContext; | |
| var frameState = event.frameState; | |
| vectorContext.setFillStrokeStyle(null, defaultStroke); | |
| var features = flightsSource.getFeatures(); | |
| for (var i = 0; i < features.length; i++) { | |
| var feature = features[i]; | |
| if (!feature.get('finished')) { | |
| var coords = feature.getGeometry().getCoordinates(); | |
| var elapsedTime = frameState.time - feature.get('start'); | |
| var elapsedPoints = elapsedTime * pointsPerMs; | |
| if (elapsedPoints >= coords.length) { | |
| feature.set('finished', true); | |
| } | |
| var maxIndex = Math.min(elapsedPoints, coords.length); | |
| var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex)); | |
| vectorContext.drawLineStringGeometry(currentLine, feature); | |
| } | |
| } | |
| frameState.animate = true; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "flights": [ | |
| [[43.449928,39.956589],[55.606186,49.278728]], | |
| [[55.34,52.06],[45.034689,39.170539]], | |
| ... | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment