地图上制作线路的动画_航线地图上的动画飞行效果怎么实现？只要五步轻松上手...

Animate a point along a route

最近有 Mapbox 社群里的开发者问 Max：

Hi， Max！我在做航线图，想要做出飞机沿着航线飞过的动画效果， Max 你知道怎么实现吗？

Max 回去苦心研究，查阅了各个教程， 终于研究出了如何实现航线地图上的飞行动画效果！

今天， 我将教大家如何用 Mapbox Gl Js 联合 Turf.js 来实现下面的动画飞行效果！

展示效果如下：

如果你对 Mapbox Gl Js 有点陌生， 请查看以下教程熟悉一下：

第1步：确定底图

这次我们直接使用 Mapbox 模板样式 mapbox://styles/mapbox/dark-v10 (当然，你也可以使用属于自己的地图样式)， 然后使用你的 accesss token, 创建一个地图页面。

部分代码如下：

// TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR ACCESS TOKEN';

var map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/mapbox/dark-v10',

center: [-96, 37.8],

zoom: 3

});

更多关于地图样式的请查看：

第2步：添加航线数据

然后你需要添加你的航线数据， 这里我们简单使用单个航线的数据作为示范。这条航线，始于旧金山， 结束于华盛顿特区。

// San Francisco

var origin = [-122.414, 37.776];

// Washington DC

var destination = [-77.032, 38.913];

// A simple line from origin to destination.

var route = {