北京网站建设工作室dw建设网站教案

很多人都见过风向图，直观形象，也是地图数据和现实数据在可视化上很好的结合。

这是我见的第一个风向图，记得是2012年吧，当时觉得很有意思，作为一名技术人员，自然好奇它是如何做到的，是Canvas还是SVG？但当时没深究。最近正好有人(大哥)提到了这个，不妨深入了解，一探究竟。于是乎，发现原来还有这么多玩法，大同小异，比如说这个，来自earth.nullschool.net：

当然还有来自度娘开源的echarts-x的：

基本上，这三个效果图基本涵盖了目前风向图的技术点和功能点(我自己的看法，因为windyty是基于earth.nullschool写的，前者多了一个worker线程处理数据，而后者在github上开源)。不知道哪一个最对你的胃口？对我而言，图1简单易懂，可以快速掌握风向图的实现；图2是实时的全球风向数据，而且是二进制格式，是大数据传输的一个方案；图3则采用WebGL实时渲染，算是大数据渲染的一个方案，所以各有千秋。正好本文就结合这三个例子说一下其中处理好的地方，也是一个由易到难的过程。

原理

乍看上去，多少会觉得无从下手。这是怎么做到的？其实吧，懂与不懂就是那一层纸，就看你愿不愿意戳破而已。我们先从数据说起。

首先介绍一下向量场(Vector Field)的概念。在维基百科的解释是：在向量分析中，向量场是把空间中的每一点指派到一个向量的映射。物理学中的向量场有风场、引力场、电磁场、水流场等等。如图，下面是一个二维的向量场，每一个点都是一个向量。

当然这是一个抽象的数学概念和表达，物理中的电磁场经常会用到它，在现实中其实也随处可见，比如下面这个有意思的磁场的向量表达，密集恐惧症的人请略过~

同理，风场的抽象模型也是一个向量场：每一个点都有一个风速和方向，可以分解为在该点分别在XY方向上的向量(我们简化为XY两个方向，不考虑Z，所以可惜不能听《龙卷风》了)，则该向量则代表该点X方向和Y方向的速度。

如上图，是一个真实的风向图数据。简单来说，timestamp代表当前数据的采集时间，(x0，y0，x1，y1)分别是经纬度的范围，而grid是该向量场的行列数，field就是向量场中每一个点的速度值，如果是(0,0)则表示此点风平浪静。可能不同平台的风向图数据有一定差别，但都大同小异。

向量场和数据格式，直觉上，我们可以知道，就是把这些向量拟合成平滑线，可以形成如下一个真实的风向。

如何形成线，而且看上去全球范围内有总不能只有一阵风吧(让我想起了木星的大红斑，这场风在木星已经吹了至少200年从来没停过)，这揭露了两个问题，1向量场是离散点，而线是平滑，这里面有一个插值问题；2更麻烦的是，这些线有好多好多连接的方式，都可以连接成线，有点类似等高线的算法，怎么连，看上去无从下手啊。

这是我看完数据后，自己觉得要实现风向效果时觉得需要解决的问题，感觉好难啊。怀着这个疑问进入梦乡，第二天format了一下js脚本，本地调试后，发现我的问题是对的，可是思路是错的。不要一上来就考虑这么多因素，而是基于当前的状态来解决当前的问题，就好比一道非常复杂的代数问题，或许通过几何方式反而可以很简单的解决。

不多废话了，尽管我觉得这些废话才是提高能力的最有价值的，解决问题不过是一个感悟过程的必然而已。好了，有了数据，看看“神诸葛”如何起风的吧。

举个例子，给你一个围棋棋盘(向量场)，每一个格子就是一个向量，你随手拿一个棋子，随手(随机)放在一个格子上，这就是风的起点。下一回合(下一帧或下一秒)，你根据当前格子的向量值(X值和Y值)移动棋子，就是风在当前的风速下拖着常常的尾巴跳到下一个格子上的效果。这样，这个棋子会根据所在格子的向量值不停的移动，直到格子的向量值为零(风停)。

也就是说只要给一个起点，我就能刮起一股风来。那给你5000个棋子(起点)，你就能刮起5000股风了。当然可能两股气流重叠，这时可能不太符合物理规律了，因为我们的思路下是