?????? 星期一的早上，我在辦公區(qū)鳥瞰窗外，目光所到之處，用顧城的那首“你看天時(shí)很近，看我時(shí)很遠(yuǎn)”倒是格外的應(yīng)景。作為一名父親，看著工位上3M的口罩，想想此刻還在熟睡的孩子，多少有些無奈——又是PM25指數(shù)200+的一天。這么大的中國，如何給孩子找一方凈土，讓孩子能夠健康快樂的成長。正是帶著這樣的一個(gè)想法，我查詢了幾個(gè)我比較關(guān)注的城市的PM值，比如北京，成都，杭州，深圳，廈門等地方，都不理想，一種趕盡殺絕的節(jié)奏，難道在中國只能做君子，自強(qiáng)不吸？同時(shí)，我個(gè)人發(fā)現(xiàn)一個(gè)情況，我的手機(jī)是華為榮耀6plus，天氣數(shù)據(jù)顯示來自中國天氣網(wǎng)，PM25指數(shù)相比AQI（Air Quality Index）上的要偏低。比如我所在的城市成都，此刻手機(jī)上顯示PM25指數(shù)為162，而AQI上顯示為212，對(duì)比如下：

?????? 這個(gè)過程中，體現(xiàn)了我對(duì)數(shù)據(jù)的三點(diǎn)需要：實(shí)時(shí)性，準(zhǔn)確性和易對(duì)比。首先數(shù)據(jù)必須是準(zhǔn)確的，及時(shí)的，這樣最有價(jià)值，這兩點(diǎn)不難理解。易對(duì)比的涵義則比較寬泛，并沒有一個(gè)絕對(duì)的標(biāo)準(zhǔn)。首先數(shù)據(jù)量上要豐富，這樣客觀上才有有代表性，其次可視化上要便于理解，比如數(shù)據(jù)都有自己的大小和位置，如何形象高效的展現(xiàn)這些信息，怎樣把數(shù)字更好的轉(zhuǎn)化為易于人類感官理解的形式，最后就是一個(gè)抽象的過程，提煉有價(jià)值的數(shù)據(jù)，降低過多數(shù)據(jù)帶來的噪音。當(dāng)然，我在做這個(gè)小應(yīng)用的時(shí)候并沒有考慮這么多，只是做完后自己的總結(jié)知新，看似有用，實(shí)則完全為了提升逼格。

????? 帶著這些疑問，我個(gè)人認(rèn)為，AQI的數(shù)據(jù)是全球各個(gè)監(jiān)測(cè)站的數(shù)據(jù)，更原始一些，更具有代表性和權(quán)威性，在中國呆久了，如果不對(duì)政府提供的數(shù)據(jù)有懷疑，只能證明自己too young too naive了。所以很自然的覺得AQI的數(shù)據(jù)在準(zhǔn)確性和實(shí)時(shí)性上是目前的最佳選擇。而且我知道某網(wǎng)站上是有實(shí)時(shí)的全球的AQI數(shù)據(jù)，反編譯代碼獲取里面請(qǐng)求數(shù)據(jù)的方法應(yīng)該可行。所以，從技術(shù)上是可以搞定數(shù)據(jù)需求的。

?????? 有了數(shù)據(jù)，可視化上如何展示呢，如何找到一種直觀，簡單的形式來？作為一個(gè)GIS行業(yè)的 碼農(nóng) Coder（以前我并不介意碼農(nóng)這個(gè)稱呼，但工作時(shí)間越久，發(fā)現(xiàn)真的大部分程序員只配做碼農(nóng)，所以本著謙讓的態(tài)度，還是把這個(gè)稱號(hào)讓給他們吧），當(dāng)然要在地圖上展示了。這是某網(wǎng)站上的一個(gè)展示效果，也是我的參照物，這里通過地圖來解決對(duì)經(jīng)緯度的理解，通過數(shù)字和顏色來解決對(duì)PM指數(shù)的感官體驗(yàn)：

?????? 但從細(xì)節(jié)處，我覺得還可以做到更好，第一，地圖本身就是對(duì)地球的一次抽象，因此這個(gè)抽象過程中，在數(shù)據(jù)的形象和對(duì)比上是存在損失的，第二，該網(wǎng)站的技術(shù)較為傳統(tǒng)，數(shù)據(jù)都是以HTML標(biāo)簽的形式來展現(xiàn)，在數(shù)據(jù)較大的情況下存在性能的瓶頸，第三，如下圖，按照AQI的標(biāo)準(zhǔn)來做的顏色區(qū)分，但這個(gè)Level是區(qū)間分段的方式，而不是單值的一一映射的關(guān)系。比如PM值300和500是有差別的，但卻對(duì)應(yīng)同一個(gè)顏色，可以更好的體現(xiàn)這種差別。

?????? 當(dāng)我看到這里就想到用球的形式來展現(xiàn)全球的PM數(shù)據(jù)，應(yīng)該會(huì)有一個(gè)不錯(cuò)的視覺效果，而且也可以很好的體現(xiàn)WebGL在大數(shù)據(jù)渲染上的性能優(yōu)勢(shì)，這是吸引我的一個(gè)因素。同時(shí)我覺得霧霾目前是一個(gè)大眾比較關(guān)注的問題，所以不應(yīng)該只是我一個(gè)人的小眾喜好，對(duì)很多人或地球人而言都是一個(gè)興趣點(diǎn)，坦白說，我當(dāng)時(shí)覺得想想就好，上班了，撞鐘時(shí)間開始了。這時(shí)候是羅胖的一句話開導(dǎo)了我“如果一件事情可做可不做，而你又有時(shí)間做的話，那你最好去做，萬一有什么意料之外的收獲的，這就是機(jī)會(huì)”。開工。

?????? 首先就是反編譯某網(wǎng)站的JS代碼，把請(qǐng)求PM數(shù)據(jù)的url和參數(shù)規(guī)范找到，url里面竟然有key參數(shù)，所以就得看看在自己的環(huán)境下是否能走通。說明一下，據(jù)我了解，該網(wǎng)站是一個(gè)在中國北京？居住的外國人搞的，而且數(shù)據(jù)比較敏感，畢竟有損墻國形象，我從AirNow網(wǎng)站取到的中國數(shù)據(jù)才幾十個(gè)監(jiān)測(cè)點(diǎn)，就可以看到墻國對(duì)該數(shù)據(jù)的重視程度。所以我是出于尊重該網(wǎng)站，欽佩作者的這種精神而刻意不分享。而如果你有這個(gè)能力做到這個(gè)事情，也希望你能夠保護(hù)它而不是謀私。有了數(shù)據(jù)，直接在WebGL Earth下展現(xiàn)的效果：????

?????? 這樣一個(gè)完整的流程算是走通了，下面就是渲染效果了。最開始，我是希望能做成熱點(diǎn)圖那種效果的，午飯時(shí)間也在思考這個(gè)問題，主要是原始數(shù)據(jù)結(jié)構(gòu)，還有工作量兩個(gè)要素，對(duì)這樣一個(gè)實(shí)時(shí)的數(shù)據(jù)做全球的熱點(diǎn)圖，至少需要服務(wù)端能夠?qū)?shù)據(jù)存儲(chǔ)策略和傳輸方式上做優(yōu)化，假設(shè)全球有10萬個(gè)監(jiān)測(cè)點(diǎn)（遠(yuǎn)遠(yuǎn)大于實(shí)際數(shù)），位置，監(jiān)測(cè)站名稱這類不會(huì)頻繁變更的內(nèi)容，都可以放在配置文件中，通過ID來索引，唯一變化的就是pm25這個(gè)數(shù)值，一個(gè)unsigned short就足夠了，這樣全球數(shù)據(jù)就是10萬字節(jié)，約等于100K，這樣數(shù)據(jù)量就小太多了，完全可以做到實(shí)時(shí)的全球范圍的數(shù)據(jù)傳輸，而目前json格式，基于可視范圍的呆滯型傳輸就不行了。服務(wù)端怎么來做這個(gè)優(yōu)化呢，其實(shí)可以每小時(shí)做一次更新，生成一張紋理圖片，紋理值就是pm的數(shù)值，以后還有其他數(shù)據(jù)，比如pm10，臭氧或硫化物，風(fēng)向等都是一個(gè)思路，這樣也是一個(gè)不錯(cuò)的數(shù)據(jù)優(yōu)化策略。所以，不管你怎么繞，最后服務(wù)端不吊你，你也沒轍。

?????? WebGL的優(yōu)勢(shì)在于能夠發(fā)揮顯卡的性能，所以盡管在數(shù)據(jù)傳輸和解析上需要受限于服務(wù)端，但在渲染上還是有不錯(cuò)的自由度，退而求其次，根據(jù)PM25值做一個(gè)點(diǎn)的單值專題圖，也是可接受的。通過批次，即使點(diǎn)數(shù)據(jù)量很大，渲染上并不會(huì)造成瓶頸。于是我決定選擇點(diǎn)+顏色的展現(xiàn)效果，其實(shí)這就和某網(wǎng)站的展現(xiàn)方式很相似了。總得做出一個(gè)微創(chuàng)新吧，那好，你是分段專題圖效果，只有6個(gè)顏色，我就給你搞一個(gè)漸變顏色（如上圖），這個(gè)也難不倒我，先搞一個(gè)0~500的色帶，其實(shí)就相當(dāng)于一個(gè)哈希表，然后根據(jù)PM值對(duì)號(hào)入座，有了PM值->顏色這個(gè)映射表，只需要初始化時(shí)先創(chuàng)建色帶的消耗而沒有額外的計(jì)算，算是性能優(yōu)化上的一個(gè)技巧。這是目前的效果，依次為中國&日韓，歐洲和美國，看完后整個(gè)人的心情都不好了：

?????? 如上，基本上要做的都已經(jīng)結(jié)束了，但實(shí)際瀏覽的時(shí)候還是會(huì)有卡頓的現(xiàn)象。當(dāng)然，我可以歸咎到請(qǐng)求的數(shù)據(jù)是JSON格式，而Earth瀏覽的范圍都比較大，且是實(shí)時(shí)的，所以這是性能瓶頸。我個(gè)人也覺得這是一個(gè)很充分的理由。計(jì)算需要消耗，請(qǐng)求需要等待，但通過Workers技術(shù)，可以把這部分放到線程中，避免卡頓的效果。這也是前端代碼可以優(yōu)化的一點(diǎn)。于是昨天晚上我又對(duì)代碼進(jìn)行了優(yōu)化，把大量的請(qǐng)求，漸變色計(jì)算，json解析等工作都放到Workers線程來完成，主線程主要負(fù)責(zé)Earth球本身的內(nèi)容。至此，我覺得對(duì)于這樣一個(gè)應(yīng)用，可以告一段落了。

?????? 總結(jié)這個(gè)過程，我覺得有三點(diǎn)收獲，第一，無論簡單還是復(fù)雜的事情，在理論上都要講的通，模型是簡單的，這個(gè)范例級(jí)別的應(yīng)用，本質(zhì)上就是AQI+顏色分段，所以AQI數(shù)值要具有準(zhǔn)確實(shí)時(shí)易對(duì)比的特點(diǎn)，同時(shí)顏色的意義也是有依據(jù)的，不是自己憑空捏造的。第二，目前各類實(shí)時(shí)數(shù)據(jù)很多，數(shù)據(jù)固然有價(jià)值，但該應(yīng)用的本質(zhì)并不是獲取數(shù)據(jù)，而是過濾數(shù)據(jù)，是對(duì)數(shù)據(jù)的一次加工，在廣度和深度上抓住數(shù)據(jù)對(duì)人類有價(jià)值的部分。我覺得在大數(shù)據(jù)時(shí)代，獲取數(shù)據(jù)的渠道會(huì)很多，數(shù)據(jù)固然重要，但關(guān)鍵還在于過濾數(shù)據(jù)的能力，這種應(yīng)變能力可以有效的降低噪音，通過數(shù)據(jù)的加工而產(chǎn)生服務(wù)價(jià)值。

?????? 第三點(diǎn)可能有點(diǎn)牽強(qiáng)，但我最想借題發(fā)揮了，所以單獨(dú)列出來。前幾天聽了吳軍講的眾籌經(jīng)濟(jì)，吳軍老師通過滴滴，Airbnb舉例說明通過資源的有效整合擴(kuò)大了市場(chǎng)的規(guī)模，分析了未來經(jīng)濟(jì)的發(fā)展趨勢(shì)。個(gè)人認(rèn)為，所謂的眾籌，如何能夠突破零和博弈，通過市場(chǎng)規(guī)模的擴(kuò)大而達(dá)到共贏，要做到這點(diǎn)并不容易。正好在TED里聽到的一個(gè)老外的演講，也舉了滴滴，Uber和Airbnb的例子，我覺得總結(jié)的更深刻。關(guān)鍵在于信任（Trust）：首先，你要認(rèn)可這個(gè)想法，愿意嘗試，其次，你認(rèn)可這個(gè)平臺(tái)，愿意使用，最后，基于已有的這種認(rèn)可，基于這個(gè)平臺(tái)，你愿意相信你不認(rèn)識(shí)的人。通過這三個(gè)層次的信任達(dá)到共贏，可以有效整合資源，別人能夠更容易的得到有價(jià)值的資源，自然也愿意購買這種資源，這樣的良性循環(huán)可以更好的擴(kuò)大市場(chǎng)規(guī)模。套用這個(gè)想法，如果我繼續(xù)做這個(gè)PM的應(yīng)用，該怎樣繼續(xù)呢？首先，PM值是當(dāng)下大眾很關(guān)心的一個(gè)內(nèi)容，如何高效，及時(shí)，準(zhǔn)確，全面，形象的，有針對(duì)性的展現(xiàn)出來，這個(gè)想法是有價(jià)值的，從這個(gè)點(diǎn)子來看是經(jīng)得起考驗(yàn)的。其次，要做一個(gè)有影響力的平臺(tái)，除了數(shù)據(jù)的權(quán)威性，其次就是數(shù)據(jù)的統(tǒng)計(jì)分析可視化以及個(gè)性化，比如歷史數(shù)據(jù)的推演，預(yù)報(bào)預(yù)警，多樣的可視化效果，通過服務(wù)端了解用戶的焦點(diǎn)，基于位置的個(gè)性化推送，內(nèi)容深度和廣度的綜合性，提高大家對(duì)平臺(tái)的認(rèn)可。

?????? 好了，以上就是一個(gè)大概流程和本人事后的思考，雖然并不能改變什么現(xiàn)狀，但我想，環(huán)保面前，人人無法逃避，人人都可以盡力而為。對(duì)我個(gè)人而言，如果不能用手改變，那就只好用腳改變了。

總結(jié)

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

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