Mapbox で点をスムースに移動させる - Qiita

Mapbox で移動する点を描く では、連続した点を単純に描画してみました。 が、パカパカ移動するので何だかつまらないしありきたりです。 なので、Uber アプリのようにもっとスムースにシンボルを移動させます。 完成形は↓です。 はじめに Animate a point along a route | Mapbox GL JS | Mapbox で例が示されているので、これを改造します。 また、この機能を実現させるのに、turf.js という地理空間図形や座標の計算を行ってくれるライブラリを使用します。 Turf.js | Advanced geospatial analysis index.js 処理の要点は2つです。 1．requestAnimationFrame を使ってフレーム毎に描画を行う 2. ルートの「開始点からｎメートル進んだ点」を turf.js で計算する 移動する速度