上一篇和大家分享了《可視化之Berkeley Earth》，這次看一看下面這個網站---aqicn.org。先做一個提示：文末有驚喜~

該網站在中國有一定的權威性，PM2.5數據有一點敏感，它竟能提供全球級別，實時的，詳盡的AQI數據，以及每個站點的經緯度(精度在十米內)，它的口號“provide information as clean as the air one wish to have”——提供的每一份數據，如同每個人所期望的空氣那樣幹凈。

但該網站又有一點神秘感，沒有過多的自我介紹，服務器IP來自美國，團隊成員主要在北京，能夠獲取全球這麽詳細的數據，總感覺背後有很多不能說的秘密，網上只找到一篇《MY FAVORITE POLLUTION WEBSITE: AQICN.ORG》，感興趣的可以讀一下。

去年底抓取它的PM25實時數據，但覺得這是老外的良心網站，如果把URL和網站名稱曝光，有被墻的隱患，所以沒有透露。最近發現它竟然推出了json api的服務，生意越做越大，那今天老夫就“好事做到底”，揭底該網站四個未公開的，卻是最重量級的服務。

1AQI Map

這是bounds查詢的url：

https://api.waqi.info/mapq/bounds/?bounds={RECTANGLE}&inc=placeholders&k={KEY}&_={DATE}

官網API裏僅開發了經緯度的點查詢，但它自己使用是bounds面查詢，另一個比較坑的是DATE參數，我自己驗證是無效的，所以該API無法做到對歷史數據的查詢，當然，這也可以理解，畢竟每個站點數據更新時間不一，比如中亞可能好幾個月才更新一次。因為之前的PM文章詳細介紹過這部分，不再重復。

2AQI Forecast

如上是城市的天氣預報服務，對應的數據url如下：

https://api.waqi.info/api/feed/@{cityid}/obs.en.json

[email protected]，比如北京對應的id是1451。返回JSON對象如下：

不難理解，簡單說一下框選的內容，city是該城市的內容,nearest是該城市範圍內的氣象站點，都有geo屬性，提供對應的經緯度，誤差在百米內。Iaqi留到下面說，先說相對簡單的—forecast屬性。顧名思義，也就是氣象預報的內容，包括aqi和wind兩部分。

先看上圖對應表格中的AQI數值，每一項對應該時間點AQI的最大最小值。再看下圖wind屬性：

這個就不那麽直觀了，大家能看出對應關系嗎？我看了一個多小時，沒看出來，只好調試源碼：三小時(采用UTC時間)為一時間段，對應三組數據，如上圖，c是氣溫，獲取氣溫的最大值和最小值，w[0],w[1]對應當前時段風速的最小最大值，w[2]是以正南為起始點，順時針方向的旋轉角度，表示風向，藍色是風速的柱狀圖效果。這樣看上去就很明白了吧。事後讓同事看對應關系，他竟然很快就“蒙“對了。

3AQI Current

實時天氣數據和forecast都在一個json對象中，對應iaqi屬性，如下圖所示，正好有11項，分別對應PM25，PM10等十一個指標。

對應的PM25屬性如下：

p標誌該指標名稱為pm2.5，v中保存的是最近48小時內的極值和當前值，i是該數據的提供方。iaqi[0].h[2]下面的一堆亂碼是什麽，猜測應該是每個小時的PM25數值，用於顯示左側柱狀圖，可肉眼看不出其中的數值映射關系，這時候就需要用心眼了---調試，原來Decode代碼如下：

我很好奇這段代碼的出處，因為之前看高德地圖中矢量瓦片中也采用了類似的解密方式，有了解的請告訴我，再次感謝。最終該函數將亂碼decode為48個PM值。

4Forecast Map

當你在網頁上看到該動態圖時，假設你要實現這個效果，所需要的數據格式，用Canvas 2D還是WebGL，以及流暢度和交互式操作？

首先，每一個城市有自己的配置文件，應該是JSP動態網頁來獲取的，比如New York的配置信息如下：

如上請求的是pm25數據，model是ncep-aqm。根據這些參數，我們能夠獲取如下的url

https://forecast.waqi.info/forecast/aqi/ncep-aqm/best/pm25/conf.json

其對應的json信息如下：

如上也比較容易理解，其中size指該區域的像素寬高，bounds為經緯度範圍，其中在usepa字段下有8.png（圖片）和jsmap（二進制）這兩種形式，可以簡單的認為是PM25的範圍分段。兩者思路相同，網站使用的是jsmap這種形式。

如上，從lut可知pm25值分為17份，範圍是0~500。將lut的17個區間歸類到domain中，domain[i]對應range[i]份。無論是jsmap還是png，規範都一致（png更精細一些）。不同的是files，png對應的是圖片的相對路徑，效果如下。而jsmap是二進制流形式

代碼中會給出一個色帶"#ffffff", "#5ec569", "#b2d744","#f2c500", "#fe8d00", "#fa0067"]，等分為17份，形成漸變色，然後根據jsmap對應的lut構造出一個level-color的分段映射表。保存在this.stream.colors.lut屬性中。

創建好了顏色表，接著就會請求對應時段的數據，url如下：

https://forecast.waqi.info/forecast/aqi/ncep-aqm/best/pm25/jsmap/stream.jsmap

對該數據進行解碼後參與canvas的渲染，解碼的算法和上面的decode相似，最終會解析為一個點串points，裏面有v,x,y,n四個分量，分別是pm25值對應顏色表中的value值，xy是對應該區域的像素偏移量，n標識該值連續的次數。這樣，建立了最終的value-level-color的完整映射關系，通過canvas 2d完整動態渲染的整個過程。

5其他

在技術角度，把AQICN分解的差不多了，不知道大家有什麽收獲，因為篇幅太長，所以本篇就到此結束吧。如果有不對的地方或疑問，不妨留言交流。

下一篇會介紹earth.nullschool這個可視化效果很棒的網站，然後會再來一篇個人對這三個網站的對比和分析，把一些個人的想法拿出來和大家分享。

今天就寫到這，在公眾號中回復“AQICN”，不區分大小寫，可以獲取本文的Demo。

可視化之AQICN