可視化之Earth NullSchool

Earth NullSchool。

      這個網(wǎng)站的特色是風(fēng)向圖，之前有一篇可視化之風(fēng)向圖，曾經(jīng)提到過這個網(wǎng)站，也詳細介紹了風(fēng)向圖的技術(shù)實現(xiàn)原理。今天針對這個網(wǎng)站，再詳細的介紹一下。同樣，在公眾號中回復(fù)“worldwind”，會提供該網(wǎng)站的源碼Demo。

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

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

      如上是具體數(shù)據(jù)列表，Mode里顯示支持Air(風(fēng)圖)，Ocean(洋流)，Chem(化學(xué)物)，Particulates(顆粒物)，Height指向不同高度，Overlay表示疊加圖層，比如風(fēng)圖+溫度，洋流+浪高等，Control為時間軸控件，比如歷史數(shù)據(jù)。點擊查看不同的數(shù)據(jù)效果，不難找到對應(yīng)數(shù)據(jù)的url的規(guī)范。

      氣象數(shù)據(jù)采用的是epak格式，二進制流，代碼中提供了數(shù)據(jù)規(guī)范。如下是數(shù)據(jù)規(guī)范和對應(yīng)的JSON屬性：

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

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

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

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

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

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

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

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