可視化之Earth NullSchool

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

      這個網站的特點是風向圖，以前有一篇可視化之風向圖，曾經提到過這個網站，也詳細介紹了風向圖的技術實現原理。今天針對這個網站，再詳細的介紹一下。一樣，在公衆號中回覆「worldwind」，會提供該網站的源碼Demo。

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

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

      如上是具體數據列表，Mode裏顯示支持Air(風圖)，Ocean(洋流)，Chem(化學物)，Particulates(顆粒物)，Height指向不一樣高度，Overlay表示疊加圖層，好比風圖+溫度，洋流+浪高等，Control爲時間軸控件，好比歷史數據。點擊查看不一樣的數據效果，不難找到對應數據的url的規範。

      氣象數據採用的是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」~