在城市规划、统计、交通等行业，地图可视化已成为最直接也最吸引眼球的一种表达方式。例如人群迁徙、人口流动、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出行、职住分析、客流来源等场景得以生动、形象表达，有助于城市规划、统计、交通等行业的可视化管理。下图是百度地图慧眼人口监测可视化大屏的效果样例：