在城市規劃、統計、交通等行業，地圖可視化已成為最直接也最吸引眼球的一種表達方式。例如人群遷徙、人口流動、OD出行、職住分析、客流來源等眾多場景都需要用到飛線效果呈現。

隨著可視化技術的進一步發展，傳統的2D飛線效果略顯單調，而3D飛線可以展示更豐富、更直觀、更炫酷的效果。

前不久，百度地圖慧眼結合地圖可視化技術發布了《帝都24小時圖鑒》（戳這里查看原文），該項目受到行業內許多技術愛好者的一致好評，更有小伙伴前來咨詢：文中炫酷的3D飛線效果是如何實現的？今天，就讓百度地圖慧眼前端工程師帶你探尋“3D飛線”飛起來的秘密。

01 元素準備

為了實現上圖的3D飛線效果，我們需要先分析一下飛線的構成元素。大致上來說，一個完整的飛線效果，無論是2D還是3D，都是由地點、連接線和連接線上的動畫點綴構成的。下面，帶大家一步步來看看每個部分的實現過程。

02 地點圓的實現

地點圓的組成元素有兩樣，一個靜態的圓形和一個向外逐漸擴散并變透明的圓環。畫出這兩個圖形并不難，但是怎么讓這個擴散的圓環動起來呢？

要實現動畫，我們可以首先想象一個場景：在一個小本子上的每一頁都畫一個一模一樣的沒有腿的小人兒，再在每一頁給這個小人畫上位置不同的腿，然后快速翻動本子，就可以看到小人兒奔跑的動畫了。

現在圓形和圓環都已經畫好了，為了讓圓環動起來，就需要使用一個名為requestAnimationFrame的函數，簡稱rAF，rAF是瀏覽器里專門用于動畫效果的一個函數。所以接下來我們在全局設置一個rAF讓它一直循環，然后在其中進行一些動畫操作，比如這里修改圓環的大小和透明度。而這個rAF就是“畫腿”的過程。

03 連接線的實現

畫完了點，我們就要開始準備連接線了。畫一條連接線很簡單，但是這里為了讓它的效果更豐富，就需要處理了一下線條的細節：

1）通過貝塞爾曲線算法，將直線拉成曲線，在3D視角下看起來更有張力。

2）給組成曲線的每個頂點賦值不同的顏色，達到顏色、透明度漸變的效果，使其看起來不那么單調。

04 讓線“飛起來”

完成了上述的準備工作，接下來才是重頭戲。

首先，我們在連接線的軌跡上再給它附著上一根帶有寬度的線作為點綴，為了避免這根點綴的線看起來太呆，我們用三角函數處理一下它的寬度，讓它看起來扭曲一點。然后，我們就要用到上文所說的rAF讓它動起來了！

那么問題來了，控制顏色和透明度很簡單，該怎么控制它按軌跡移動以及出現與消失呢？

這里用到一個小技巧，我們知道“線”有一個實線與虛線的屬性，在這里我們把這根點綴線設置成虛線，然后通過在rAF里修改虛線的dashOffset屬性，讓它沿著連接線的軌跡一直偏移，就可以在視覺上造成移動的效果了~另外，還可以在rAF里同時改變點綴線的寬度，造成一種“呼吸感”的動畫效果，這樣上面的動畫就完成了。

可是這樣的效果還略顯呆板，太過整齊劃一的動畫看久了容易審美疲勞，所以我們再給這個虛線的長度加一份隨機的偏移，讓它們有一種不規律感。這樣，最終版3D飛線就完成了！

05 更多可能效果

之所以說在3D場景，飛線的效果更豐富，就是因為在上面的基礎上，我們可以繼續發揮，做出更多效果、適配更多場景的飛線~

06 應用成效

百度地圖慧眼3D飛線可視化技術，使得人群遷徙、人口流動、OD出行、職住分析、客流來源等場景得以生動、形象表達，有助于城市規劃、統計、交通等行業的可視化管理。下圖是百度地圖慧眼人口監測可視化大屏的效果樣例：