很多人都見過風(fēng)向圖，直觀形象，也是地圖數(shù)據(jù)和現(xiàn)實數(shù)據(jù)在可視化上很好的結(jié)合。

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 

       這是我見的第一個風(fēng)向圖，記得是2012年吧，當(dāng)時覺得很有意思，作為一名技術(shù)人員，自然好奇它是如何做到的，是Canvas還是SVG？但當(dāng)時沒深究。最近正好有人（大哥）提到了這個，不妨深入了解，一探究竟。于是乎，發(fā)現(xiàn)原來還有這么多玩法，大同小異，比如說這個，來自earth.nullschool.net：

 

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 

      當(dāng)然還有來自度娘開源的echarts-x的：

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 

      基本上，這三個效果圖基本涵蓋了目前風(fēng)向圖的技術(shù)點和功能點（我自己的看法，因為windyty是基于earth.nullschool寫的，前者多了一個worker線程處理數(shù)據(jù)，而后者在github上開源）。不知道哪一個最對你的胃口？對我而言，圖1簡單易懂，可以快速掌握風(fēng)向圖的實現(xiàn)；圖2是實時的全球風(fēng)向數(shù)據(jù)，而且是二進(jìn)制格式，是大數(shù)據(jù)傳輸?shù)囊粋€方案；圖3則采用WebGL實時渲染，算是大數(shù)據(jù)渲染的一個方案，所以各有千秋。正好本文就結(jié)合這三個例子說一下其中處理好的地方，也是一個由易到難的過程。

原理

      乍看上去，多少會覺得無從下手。這是怎么做到的？其實吧，懂與不懂就是那一層紙，就看你愿不愿意戳破而已。我們先從數(shù)據(jù)說起。

      首先介紹一下向量場（Vector Field）的概念。在維基百科的解釋是：在向量分析中，向量場是把空間中的每一點指派到一個向量的映射。物理學(xué)中的向量場有風(fēng)場、引力場、電磁場、水流場等等。如圖，下面是一個二維的向量場，每一個點都是一個向量。

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運,軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式