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

????? 這個網(wǎng)站的特色是風(fēng)向圖，之前有一篇可視化之風(fēng)向圖，曾經(jīng)提到過這個網(wǎng)站，也詳細(xì)介紹了風(fēng)向圖的技術(shù)實(shí)現(xiàn)原理。今天針對這個網(wǎng)站，再詳細(xì)的介紹一下。同樣，在公眾號中回復(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)，直入主題。當(dāng)然，想要了解風(fēng)圖原理的，可以看看之前寫的可視化之風(fēng)向圖，需要對風(fēng)圖的數(shù)據(jù)和思路有一定了解，不然本文在理解上可能會有點(diǎn)吃力。

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

????? 氣象數(shù)據(jù)采用的是epak格式，二進(jìn)制流，代碼中提供了數(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ù)，因?yàn)樗荋TTPS服務(wù)，做了Referer限制，對于我這個Java小白，絕對算得上是一個難題，不過反過來想，這不就是上天給我一個機(jī)會，讓我學(xué)JavaWeb嗎?；瞬簧贂r間，也請教了研發(fā)兩位牛人，終于在Jetty+Servlet下實(shí)現(xiàn)了一個Java版的Proxy，是本次最有收獲的地方，代碼一并奉上，見笑。

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

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

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

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

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

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

????? 至于鼠標(biāo)點(diǎn)擊顯示當(dāng)前狀態(tài)，代碼我沒有看，不過上述過程中已經(jīng)提供了位置轉(zhuǎn)換，數(shù)據(jù)存儲，很容易獲取映射關(guān)系。

????? 技術(shù)內(nèi)容介紹完畢。

????? 下一篇會拋開技術(shù)，從產(chǎn)品，數(shù)據(jù)，以及可視化效果等非技術(shù)層面上，和大家分享一下我對這三個網(wǎng)站的對比和想法。想要源碼的同學(xué)請回復(fù)“worldwind”~

轉(zhuǎn)載于:https://www.cnblogs.com/fuckgiser/p/6952122.html

總結(jié)

以上是生活随笔為你收集整理的可视化之Earth NullSchool的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。