Mapbox軌跡回放

    軌跡回放是webgis中的常見功能，是一種被客戶喜聞樂見的GIS動畫。

    動畫是一種短時間內不停重繪達到不斷運動的效果。本文中軌跡回放就是事先計算好所需要的點，後面再進行播放。

    整體的思路也不復雜，設定總共有一千個點插入，計算出來每個點間隔的步長，我們只要往大於步長的每條線段中插入需要點就好，小於等於步長的線段則取用它的尾部節點。

只有兩點的線段進行增密就很簡單了，求出線段長度除以步長的倍數，用倍數進行循環，使用turf.along計算出每次要插入的點，當線段不能整除步長時，需要將線段的最後一點插入增密線段中。(下圖中小箭頭就是增密的點)

<code>
var
 step = 
parseInt
(distance/splitLength)

var
 leftLength= distance -step*splitLength

var
 rings=[]

var
 route = turf.lineString([
from
.geometry.coordinates,to.geometry.coordinates])

for
(
let
 i=
1
;i<=step;i++){

let 
 nlength=i*splitLength

let
 pnt = turf.along(route, nlength, { 
units
: 
'kilometers'
 });

rings.push(pnt.geometry.coordinates)

}

if
(leftLength>
0
){

rings.push(to.geometry.coordinates)

}
/<code>

    效果圖如下,在線地址:https://github.com/tpolong/route

ps:寫個小例子踩中turf.js中兩個坑還是有點厲害，不說了，我去買彩票了

ps2:可以使用turf.linechunk或者turf.lineSliceAlong進行增密，當然turf.linechunk這個函數還是有坑的，慎用