Update flight animation example
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
layout: example.html
|
layout: example.html
|
||||||
title: Flight animation example
|
title: Flight Animation
|
||||||
shortdesc: Demonstrates how to animate flights with ´postcompose´.
|
shortdesc: Demonstrates how to animate flights with ´postcompose´.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
|
||||||
@@ -14,8 +14,4 @@ tags: "animation, vector, feature, flights, arc"
|
|||||||
resources:
|
resources:
|
||||||
- https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
|
- https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js
|
||||||
---
|
---
|
||||||
<div class="row">
|
<div id="map" class="map"></div>
|
||||||
<div class="span8">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,10 +1,8 @@
|
|||||||
// NOCOMPILE
|
// NOCOMPILE
|
||||||
// this example uses arc.js for which we don't have an externs file.
|
|
||||||
goog.require('ol.Attribution');
|
goog.require('ol.Attribution');
|
||||||
goog.require('ol.Feature');
|
goog.require('ol.Feature');
|
||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.control');
|
|
||||||
goog.require('ol.geom.LineString');
|
goog.require('ol.geom.LineString');
|
||||||
goog.require('ol.layer.Tile');
|
goog.require('ol.layer.Tile');
|
||||||
goog.require('ol.layer.Vector');
|
goog.require('ol.layer.Vector');
|
||||||
@@ -22,12 +20,6 @@ var map = new ol.Map({
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
controls: ol.control.defaults({
|
|
||||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
|
||||||
collapsible: false
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
renderer: 'canvas',
|
|
||||||
target: 'map',
|
target: 'map',
|
||||||
view: new ol.View({
|
view: new ol.View({
|
||||||
center: [0, 0],
|
center: [0, 0],
|
||||||
@@ -89,8 +81,10 @@ var flightsSource = new ol.source.Vector({
|
|||||||
})],
|
})],
|
||||||
loader: function(extent, resolution, projection) {
|
loader: function(extent, resolution, projection) {
|
||||||
var url = 'data/openflights/flights.json';
|
var url = 'data/openflights/flights.json';
|
||||||
$.ajax({url: url, dataType: 'json', success: function(response) {
|
fetch(url).then(function(response) {
|
||||||
var flightsData = response.flights;
|
return response.json();
|
||||||
|
}).then(function(json) {
|
||||||
|
var flightsData = json.flights;
|
||||||
for (var i = 0; i < flightsData.length; i++) {
|
for (var i = 0; i < flightsData.length; i++) {
|
||||||
var flight = flightsData[i];
|
var flight = flightsData[i];
|
||||||
var from = flight[0];
|
var from = flight[0];
|
||||||
@@ -116,7 +110,7 @@ var flightsSource = new ol.source.Vector({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
map.on('postcompose', animateFlights);
|
map.on('postcompose', animateFlights);
|
||||||
}});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user