軌跡回放是webgis中的常見功能,是一種被客戶喜聞樂見的GIS動畫。
動畫是一種短時間內不停重繪達到不斷運動的效果。本文中軌跡回放就是事先計算好所需要的點,後面再進行播放。
整體的思路也不復雜,設定總共有一千個點插入,計算出來每個點間隔的步長,我們只要往大於步長的每條線段中插入需要點就好,小於等於步長的線段則取用它的尾部節點。
只有兩點的線段進行增密就很簡單了,求出線段長度除以步長的倍數,用倍數進行循環,使用turf.along計算出每次要插入的點,當線段不能整除步長時,需要將線段的最後一點插入增密線段中。(下圖中小箭頭就是增密的點)
<code>var
step =parseInt
(distance/splitLength)var
leftLength= distance -step*splitLengthvar
rings=[]var
route = turf.lineString([from
.geometry.coordinates,to.geometry.coordinates])for
(let
i=1
;i<=step;i++){let
nlength=i*splitLengthlet
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這個函數還是有坑的,慎用
關鍵字: splitLength geometry step