可視化之Earth NullSchool

上兩篇我們分別介紹了《Berkeley Earth》和《AQICN》兩個網站，今天來看一下Earth NullSchool。

GIF/1K

如上是該網站的一個動圖效果，有興趣的可以訪問網站了解一個大概。作者在github上公布了自己的源碼(和網站代碼略有不同)，氣象數據來自NCEP，記得上周介紹的AQICN美國數據也是來自該網站，查了一下，該組織應該算是美國的國家氣象局：National Centers for Environmental Prediction。

吸取上一篇的教訓，直入主題。當然，想要了解風圖原理的，可以看看之前寫的可視化之風向圖，需要對風圖的數據和思路有一定了解，不然本文在理解上可能會有點吃力。

氣象數據採用的是epak格式，二進位流，代碼中提供了數據規範。如下是數據規範和對應的JSON屬性：

從converter屬性，該數據來自netcdf，而這個格式在之前的Berkeley Earth中也提到過，而原始數據是grib形式，以我的理解，裡面應該有一個grib2netcdf2epak的過程，都提供了對應的轉換工具。至於為何繞圈，我搜索了一下大概，知道一個大概優劣，但貌似都不絕對，在此就不妄論了。

對我個人而言，花時間最久的是如何以localhost方式獲取該數據，因為它是HTTPS服務，做了Referer限制，對於我這個Java小白，絕對算得上是一個難題，不過反過來想，這不就是上天給我一個機會，讓我學JavaWeb嗎。花了不少時間，也請教了研發兩位牛人，終於在Jetty+Servlet下實現了一個Java版的Proxy，是本次最有收穫的地方，代碼一併奉上，見笑。

有了本地代理服務，對源碼進行簡單的修改，讓其走代理，就實現了localhost的部署，兩個參數:url和type。

在地圖初始化的時候，先構建了全球格網，是一個2：1的矩形，下面是經過投影后的球狀格網效果，主要用於後續獲取任意點在地球上的位置，進而獲取對應的風速(X,Y)，該方法提供了臨近插值和雙線性插值兩種方式，該過程封裝在rectangularGrid函數中。

接著，開始請求氣象數據數據，解析過程封裝在decodeEpak函數中：獲取對應的JSON屬性，全球風圖是720*360大小，精度為0.5℃，每個點有X和Y兩個分量，在X和Y方向的向量，米單位。

萬事俱備只欠東風——起風。這裡有兩點，第一，平移縮放時沒有任何效果的，這是因為當bounds變化時，需要根據更新後的區域重新插值，計算量比較大，而插值的價值是精度上有保證，清晰，所以這是一個取捨。第二，不僅有一個風圖，還有一個柵格底圖，下圖藍綠色效果圖，仔細看，和風的走勢是吻合的，同時滑鼠點擊時，能獲取對應位置的屬性值。

對風場向量的插值過程是在interpolateField方式中實現的，這裡邏輯如下：1:創建當前窗口對應的掩膜，如上圖，全部區域都是黑色(0,0,0,0)，只有地球對應的區域顏色為(255, 0, 0, 1) ；2隨機生成風粒子，每一個粒子有五個屬性，位置(XY),風速(UV)和生命周期(t)；3類似一條掃描線，遍歷可視區域的每一像素點，通過掩膜判斷是否在有效範圍內，如果該點有效，則獲取其對應的經緯度；4以全球網格為索引，獲取該點對應的風場Field，保存到對應的向量場wind field，用於後面的風圖效果；5根據風場的強度，對應顏色表設置當前點的顏色強度，保存到mask掩膜中，這樣mask在更新時用來判斷區域是否可見，更新後則用於顯示地圖效果，也算是一圖兩用。如上是初始化的核心部分，裡面有很多小的細節，比如風向，在平面上，XY兩個向量是直線，而在球面上，要調整為對應的經緯度，是曲線(distortion函數)。

接著，每一幀根據風圖的原理，實時更新：風粒子的當前位置，根據當前位置的風速獲取下一幀的位置，數據更新(createField::field.move)後則開始渲染(animate.draw),這部分在風向圖原理裡面有很清楚的介紹，思路完全一致，這裡只是把關鍵點和對應函數實現對應起來，關鍵還是要思路，如果有意願不妨自己調試，便一目了然。

至於滑鼠點擊顯示當前狀態，代碼我沒有看，不過上述過程中已經提供了位置轉換，數據存儲，很容易獲取映射關係。

技術內容介紹完畢。

下一篇會拋開技術，從產品，數據，以及可視化效果等非技術層面上，和大家分享一下我對這三個網站的對比和想法。想要源碼的同學請回復「worldwind」~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！