很多人都見(jiàn)過(guò)風(fēng)向圖，直觀形象，也是地圖數(shù)據(jù)和現(xiàn)實(shí)數(shù)據(jù)在可視化上很好的結(jié)合。
這是我見(jiàn)的第一個(gè)風(fēng)向圖，記得是2012年吧，當(dāng)時(shí)覺(jué)得很有意思，作為一名技術(shù)人員，自然好奇它是如何做到的，是Canvas還是SVG？但當(dāng)時(shí)沒(méi)深究。最近正好有人（大哥）提到了這個(gè)，不妨深入了解，一探究竟。于是乎，發(fā)現(xiàn)原來(lái)還有這么多玩法，大同小異，比如說(shuō)這個(gè)，來(lái)自earth.nullschool.net：
當(dāng)然還有來(lái)自度娘開(kāi)源的echarts-x的：
基本上，這三個(gè)效果圖基本涵蓋了目前風(fēng)向圖的技術(shù)點(diǎn)和功能點(diǎn)（我自己的看法，因?yàn)閣indyty是基于earth.nullschool寫(xiě)的，前者多了一個(gè)worker線程處理數(shù)據(jù)，而后者在github上開(kāi)源）。不知道哪一個(gè)最對(duì)你的胃口？對(duì)我而言，圖1簡(jiǎn)單易懂，可以快速掌握風(fēng)向圖的實(shí)現(xiàn)；圖2是實(shí)時(shí)的全球風(fēng)向數(shù)據(jù)，而且是二進(jìn)制格式，是大數(shù)據(jù)傳輸?shù)囊粋€(gè)方案；圖3則采用WebGL實(shí)時(shí)渲染，算是大數(shù)據(jù)渲染的一個(gè)方案，所以各有千秋。正好本文就結(jié)合這三個(gè)例子說(shuō)一下其中處理好的地方，也是一個(gè)由易到難的過(guò)程。
原理
乍看上去，多少會(huì)覺(jué)得無(wú)從下手。這是怎么做到的？其實(shí)吧，懂與不懂就是那一層紙，就看你愿不愿意戳破而已。我們先從數(shù)據(jù)說(shuō)起。
首先介紹一下向量場(chǎng)（Vector Field）的概念。在維基百科的解釋是：在向量分析中，向量場(chǎng)是把空間中的每一點(diǎn)指派到一個(gè)向量的映射。物理學(xué)中的向量場(chǎng)有風(fēng)場(chǎng)、引力場(chǎng)、電磁場(chǎng)、水流場(chǎng)等等。如圖，下面是一個(gè)二維的向量場(chǎng)，每一個(gè)點(diǎn)都是一個(gè)向量。
