mapbox中文地图_航线地图上的动画飞行效果怎么实现？只要五步轻松上手

Animate a point along a route

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

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

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

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

点击这里在线查看 Codepen 上的代码与作品（最好用电脑哦）

展示效果如下：

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

中文视频教程 | 如何使用 Mapbox GL JS 把标记添加到地图上（含字幕）

35 个你不知道却特好用的 Mapbox GL JS 插件 #GoGlobal Web Week

Mapbox GL JS 又更新了？v1.10.0 四大亮点不可错过！

第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
    });

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

这幅超可爱的故事地图是怎么做的？Mapbox Studio Classic 地图样式重制思路

如何“偷”来别人好看的 Mapbox Style 地图样式