一  前言

      “顏值即正義”的時(shí)代，windy（https://www.windy.com/）是氣象領(lǐng)域2D可視化效果和用戶體驗(yàn)最好的站點(diǎn)，沒有之一，是當(dāng)前氣象可視化領(lǐng)域的標(biāo)桿。windy的成功在于實(shí)際解決了氣象系統(tǒng)中常見的高精度、大范圍格點(diǎn)數(shù)據(jù)文件大導(dǎo)致網(wǎng)絡(luò)傳輸慢、可視化效果保守不夠美觀等問題。windy方案本質(zhì)上的技術(shù)不是很復(fù)雜，因此國內(nèi)氣象公司的windy仿產(chǎn)品紛紛推出，技術(shù)開發(fā)社區(qū)也時(shí)常有關(guān)于windy技術(shù)方案的討論，本篇筆者就此做一些較全面的技術(shù)討論和分析。

windy原版站點(diǎn)

windy仿：中科天機(jī)

windy仿：九方科技

二  技術(shù)實(shí)現(xiàn)

      windy站點(diǎn)給人感覺就是簡(jiǎn)潔，也沒有明顯的網(wǎng)絡(luò)卡頓和渲染延遲，主要是其改進(jìn)了兩個(gè)技術(shù)實(shí)現(xiàn)的，即灰度圖切片和灰度圖渲染技術(shù)，本章節(jié)做些技術(shù)方案簡(jiǎn)要說明，為敘述方便，梳理其基本的數(shù)據(jù)邏輯如下：

windy技術(shù)方案基本數(shù)據(jù)處理邏輯

2.1 格點(diǎn)切片

      傳統(tǒng)氣象業(yè)務(wù)系統(tǒng)通常將整個(gè)格網(wǎng)文件傳輸?shù)角芭_(tái)，隨著格網(wǎng)的地理分辨率變高，格網(wǎng)地理區(qū)域范圍的變大，這個(gè)數(shù)據(jù)文件通常很大，例如，全球南北緯度是-90-90，東西經(jīng)度是-180-180，假設(shè)地理分辨率是1°，那么格點(diǎn)數(shù)量=181*361；如果把地理分辨率從1°改成0.1°，那么格點(diǎn)數(shù)量=1801*3601，不熟悉氣象格點(diǎn)文件的朋友可以將其類比，如gis里的柵格數(shù)據(jù)，如文件系統(tǒng)里的圖片，分辨率越高，文件越大，本質(zhì)一樣。因此，傳統(tǒng)方案中將整個(gè)數(shù)據(jù)文件在bs系統(tǒng)中通過網(wǎng)絡(luò)上傳的方式，首要的問題就是極容易出現(xiàn)帶寬不足，網(wǎng)絡(luò)傳輸瓶頸。   

       為了解決該問題，windy借鑒了類似的WebGIS影像金字塔切片技術(shù)方案原理，對(duì)整張數(shù)據(jù)文件進(jìn)行切片。webgis中的影像數(shù)據(jù)通常都是圖像，一般先根據(jù)zoom級(jí)別建立影像金字塔索引，再以256*256或者512*512大小進(jìn)行圖像切片傳輸給前臺(tái)顯示。windy基于同樣的技術(shù)原理，將格點(diǎn)按照zoom級(jí)別建立金字塔索引，再以自己的切片寬高組織格點(diǎn)切片，由于格點(diǎn)切片本質(zhì)是數(shù)據(jù)，而不是圖像，因此windy自己在切片中塞入了圖例元數(shù)據(jù)，其他廠商可能是257*257等，邊緣多一像素希望在瓦片拼接時(shí)盡量平滑點(diǎn)，格點(diǎn)數(shù)值的切片差異化與webgis里的圖像切片些許不太一樣。

        格點(diǎn)切片方案將龐大氣象格點(diǎn)文件切片化，是解決網(wǎng)絡(luò)傳輸?shù)睦鳌?br>

2.2 格點(diǎn)切片灰度圖化

       格點(diǎn)數(shù)值并不是圖像的像素值，于是windy對(duì)切片中格點(diǎn)值建立與圖像值的映射關(guān)系，即統(tǒng)計(jì)格點(diǎn)切片中格點(diǎn)數(shù)值范圍[min,max]，然后將其映射到圖像像素值的[0,255]區(qū)間。例如溫度Tile，該Tile中最低溫度是0，最高溫度是30，則將0映射到圖像值0，30映射到圖像值255，映射公式如下：

// 格點(diǎn)Tile數(shù)值區(qū)間const minVal = 0, maxVal = 30;const imageValue = Math.round((gridValue - minVal)/(maxVal - minVal)*255.0);

       細(xì)心的讀者會(huì)發(fā)現(xiàn)，這個(gè)映射關(guān)系是一個(gè)有損壓縮，此處暫且不表。但經(jīng)過映射，每個(gè)格點(diǎn)值都有對(duì)應(yīng)的一個(gè)像素值，windy將其編碼到圖像的R通道，所以windy的圖像看著都是紅色的，而其他廠商都編碼到rgb通道，每個(gè)通道值相同，所以圖像看著是灰色的，即所謂的“灰度圖”。

windy的格點(diǎn)切片

  windy仿的格點(diǎn)切片

       對(duì)于風(fēng)這樣的u、v矢量，則將u轉(zhuǎn)碼圖像編碼到r通道，v轉(zhuǎn)碼到圖像編碼到g通道，因此，風(fēng)的格點(diǎn)切片看起來是彩色的如下圖：

uv編碼rg通道

        格點(diǎn)圖像編碼將一方面格點(diǎn)Tile進(jìn)一步將壓縮至只有原先的幾分之一大?。╢loat64轉(zhuǎn)uint8)，進(jìn)一步優(yōu)化了網(wǎng)絡(luò)傳輸能力；另外一方面，圖像對(duì)webgl是很友好的格式，是直接就能認(rèn)的“紋理”數(shù)據(jù)，渲染比較方便。

2.3 數(shù)據(jù)精度問題優(yōu)化

      上一章節(jié)根據(jù)公式已經(jīng)表達(dá)出了格點(diǎn)切片轉(zhuǎn)圖像切片是線性有損壓縮的，即當(dāng)數(shù)值范圍的min與max差距越大，則壓縮后的數(shù)據(jù)誤差會(huì)越大。例如將溫度數(shù)值從-40-50編碼到0-255誤差會(huì)很小，而如果某個(gè)氣象產(chǎn)品的數(shù)值假設(shè)在0-2000之間，將其壓縮到0-255區(qū)間，格點(diǎn)值為9，10，11的數(shù)值都被映射成了1，數(shù)據(jù)傳輸?shù)角芭_(tái)就已經(jīng)失真了。

Math.round((9.0-0)/(2000-0)*255.0)= 1;Math.round((10.0-0)/(2000-0)*255.0)= 1;Math.round((11.0-0)/(2000-0)*255.0)= 1;Math.round((12.0-0)/(2000-0)*255.0)= 2;

        為了在數(shù)據(jù)壓縮和數(shù)據(jù)精度之間做個(gè)平衡，windy采用的是格點(diǎn)tile單獨(dú)編碼方案。地理學(xué)認(rèn)為，彼此距離較近的事物要比距離較遠(yuǎn)的事物更相似，因此，windy根據(jù)地理范圍生成的格點(diǎn)tile，單獨(dú)提取該tile里的格點(diǎn)最小最大值作為編碼依據(jù)，而不是格點(diǎn)數(shù)據(jù)中全局的最小最大值，在減少數(shù)據(jù)誤差，提升數(shù)據(jù)精度上有一些作用，但并不能完全解決這個(gè)問題。

距離越近事物越相似

       如上圖，假設(shè)中國的氣象格網(wǎng)文件，溫度最低是-20，分布在青藏高原附近，最高數(shù)值是40，分布在吐魯番或長江流域（三伏天），那么整個(gè)格網(wǎng)數(shù)據(jù)的數(shù)值范圍是[-20,40]。而windy的分塊單獨(dú)編碼，例如上圖左邊Tile是青藏高原范圍，數(shù)值是[-20,5],上圖右邊Tile的數(shù)值范圍可能是[20,40]。根據(jù)上文提出的，數(shù)據(jù)起始終止值差距越大，誤差越大的結(jié)論，全局?jǐn)?shù)據(jù)編碼值差距是40-（-20）=60，而單獨(dú)編碼分別是5-（-20）=25，40-20=20，分別編碼的值差距都小于全局值差距，對(duì)精度提升是有進(jìn)一步幫助的。

       由于每個(gè)tile是單獨(dú)編碼的，前端為了解碼，就得每個(gè)tile定義不同的元數(shù)據(jù)，windy直接在數(shù)據(jù)圖像上的第一行單獨(dú)編碼了元數(shù)據(jù)圖例：

格點(diǎn)圖像附圖例元數(shù)據(jù)

       目前，國內(nèi)大多windy仿是基于WebGIS的技術(shù)做的，即先全局將格點(diǎn)文件轉(zhuǎn)碼灰度柵格圖像，再基于GIS的切片傳輸?shù)角芭_(tái)，全局的圖像編碼導(dǎo)致數(shù)據(jù)精度的誤差會(huì)放大不少，類似這樣的細(xì)節(jié)處理優(yōu)化問題還有很多，但國內(nèi)的模仿者們并沒有在細(xì)節(jié)上下功夫，國內(nèi)的windy的效果沒有一個(gè)能比得上windy的。

windy仿 step1：預(yù)先全局轉(zhuǎn)碼（誤差會(huì)放大）

windy仿 step2：生成灰度圖切片

2.4 灰度圖渲染

      上文可知，在完成數(shù)據(jù)的基本轉(zhuǎn)換，通過網(wǎng)絡(luò)請(qǐng)求切片，前端得到的是灰度圖切片圖像，圖像里的圖例生成漸變的顏色紋理，圖像里的編碼數(shù)值生成數(shù)據(jù)紋理，基于webgl技術(shù)渲染主要分兩步驟：先采樣格點(diǎn)數(shù)值，再根據(jù)數(shù)值去顏色紋理采樣顏色，完成最終的渲染。

    #version 300 es    uniform sampler2D u_data_texture;    uniform sampler2D u_color_texture;    in vec2 v_uv;    out vec4 outColor;    void main() {        // step1 根據(jù)uv坐標(biāo)采樣格點(diǎn)數(shù)值紋理        float val = texture(u_data_texture, v_uv).r;        // step2 根據(jù)格點(diǎn)數(shù)值去顏色紋理采樣渲染顏色        outColor  = texture(u_color_texture, vec2(val, 0.5));    };

三 優(yōu)點(diǎn)總結(jié)

       windy的數(shù)據(jù)處理方案是對(duì)傳統(tǒng)bs氣象系統(tǒng)的一次顛覆性創(chuàng)新，是web切片技術(shù)尤其是webgis切片技術(shù)與webgl渲染技術(shù)的融合，優(yōu)點(diǎn)非常明顯：

• 數(shù)據(jù)切片：化整為零，解決網(wǎng)絡(luò)傳輸瓶頸。

• 數(shù)據(jù)壓縮：進(jìn)一步壓縮數(shù)據(jù)體積，優(yōu)化網(wǎng)絡(luò)傳輸。

  數(shù)據(jù)渲染：不同于傳統(tǒng)的canvas技術(shù)，webgl渲染更加快速，沒有渲染瓶頸，并且更容易實(shí)現(xiàn)基于gpu的數(shù)據(jù)實(shí)時(shí)插值，在數(shù)據(jù)的時(shí)序動(dòng)畫中更加平滑，而不是輪播圖形式。

  00:04
  時(shí)序數(shù)據(jù)動(dòng)畫渲染

四 技術(shù)局限性

       windy方案看起來非常美好，也有很多氣象公司跟進(jìn)，但是類windy方案直接遷移到氣象內(nèi)網(wǎng)專業(yè)系統(tǒng)里仍會(huì)出現(xiàn)一些問題，這主要是專業(yè)氣象領(lǐng)域與純可視化網(wǎng)站的業(yè)務(wù)要求不同、對(duì)數(shù)據(jù)精度要求不同導(dǎo)致的。

4.1 渲染的業(yè)務(wù)要求不同

       對(duì)于格網(wǎng)面的渲染，目前windy里只支持漸變色渲染，而氣象專業(yè)系統(tǒng)里可能要支持等值面或格網(wǎng)色斑圖。其實(shí)純用漸變色渲染，能比較合理的掩蓋一些數(shù)據(jù)精度不足的問題，畢竟肉眼是不可分辨的；而其他形式的等值面和色斑圖是氣象系統(tǒng)經(jīng)典出圖的表達(dá)形式，一點(diǎn)精度不對(duì)很容易導(dǎo)致地圖上的可視化和專題圖不一致的情況。

windy默認(rèn)漸變渲染   

業(yè)務(wù)要求格點(diǎn)方塊渲染   

4.2 數(shù)據(jù)精度要求不同

       前文已說，類似將float64轉(zhuǎn)uint8的線性有損壓縮，犧牲精度前提下，集中注意力到網(wǎng)絡(luò)傳輸?shù)膬?yōu)化上，對(duì)windy站點(diǎn)本身是可以接受的，主要是因?yàn)閣indy站點(diǎn)氣象產(chǎn)品有限，站點(diǎn)列舉的幾十類，都是線性數(shù)據(jù)，種類不多且沒有指數(shù)級(jí)產(chǎn)品的出現(xiàn)。即使部分產(chǎn)品例如降雨量，圖例也是windy自己的標(biāo)準(zhǔn)，而不是氣象行業(yè)里的標(biāo)準(zhǔn)，所以看起來比較平滑：

windy的降雨量分級(jí)

        實(shí)際氣象業(yè)務(wù)中，例如1h降雨量精度，數(shù)值最低要達(dá)到0mm，無降水，最高是50mm，那么按照windy的歸一化編碼公式0.1mm幾乎差一點(diǎn)被編碼到和無降水的0是一樣的數(shù)據(jù)編碼上，精度的控制極其困難。

// 編碼0 mmlet val_0 = (0-0)/(50-0)*255.0; // 0let val_01 = (0.1-0)/(50-0)*255.0; // 0.51 // 取整,0mm被編碼到像素值0，0.1mm被編碼到像素值1val_0 = Math.round(val_0); // 0val_0 1= Math.round(val_01); // 1// 假如max不等于50，而是等于60，豈不是0和0.1被編碼到同一個(gè)像素上？

業(yè)務(wù)系統(tǒng)里的降水量分級(jí)

       實(shí)際氣象業(yè)務(wù)系統(tǒng)中氣象產(chǎn)品種類非常繁多，經(jīng)常有格點(diǎn)值值域在0至幾千，甚至有指數(shù)級(jí)數(shù)值產(chǎn)品，例如地震的能量指數(shù)級(jí)，類似這種值域差距過大甚至指數(shù)級(jí)數(shù)據(jù)，精度丟失是驚人的。當(dāng)對(duì)有損壓縮的數(shù)據(jù)以格點(diǎn)或者等值面顯示，對(duì)照氣象專業(yè)的出圖工具出的圖，基本就對(duì)不上了。也就是說，國內(nèi)windy仿實(shí)際是很難應(yīng)用于實(shí)際業(yè)務(wù)的，至少不能完全覆蓋。

4.3 圖例精度不足

       windy的渲染分兩步，數(shù)值紋理采樣，顏色紋理采樣，但在某些極端情況，根據(jù)圖例生成的顏色紋理本身就有問題，最終根據(jù)顏色紋理采樣后顯示的顏色肯定就不對(duì)了，本小節(jié)稍微詳細(xì)說明下。

       漸變的顏色紋理通常是基于類似下文的代碼生成的：

function getGradientColorRamp(normalLegend: Map<number, number[]>) {    // eslint-disable-next-line no-undef    const canvas = document.createElement('canvas');    const ctx = canvas.getContext('2d');    const width = 256;    canvas.width = width;    canvas.height = 1;    const gradient = ctx.createLinearGradient(0, 1, width, 1);    for (let [key, value] of normalLegend) {        if (key > 1)            key = 1;        gradient.addColorStop(key, `rgba(${value.join(',')})`);    }    ctx.fillStyle = gradient;    ctx.fillRect(0, 0, width, 1);    return new Uint8Array(ctx.getImageData(0, 0, width, 1).data);}

         正常這段代碼是沒有問題的，但是考慮一下，假如我們要顯示一個(gè)指數(shù)級(jí)產(chǎn)品，圖例給我們的是如下的數(shù)據(jù)內(nèi)容，每個(gè)圖例的key差異比較大：

        let legend = new Map();        legend.set(0, [255, 255, 255]);        legend.set(0.0157, [221, 221, 221]);        legend.set(0.032, [0, 160, 246]);        legend.set(0.0654, [0, 236, 236]);        legend.set(0.133, [0, 216, 0]);        legend.set(0.272, [0, 144, 0]);        legend.set(0.556, [255, 255, 0]);        legend.set(1.13, [231, 192, 0]);        legend.set(2.31, [255, 144, 0]);        legend.set(4.72, [255, 0, 0]);        legend.set(9.64, [214, 0, 0]);        legend.set(19.7, [192, 0, 0]);        legend.set(28.1, [255, 0, 240]);

       根據(jù)該圖例生成的漸變顏色紋理如下：

圖例生成的顏色紋理（寬度放大）

       圖例里要求的數(shù)值0是白色，0.0157是灰色，但在最終生成的紋理圖像里絲毫沒看到白色和灰色的顏色，筆者一開始懷疑是不是數(shù)值過于接近，實(shí)際圖像中有白色和灰色條帶肉眼看不到咧？但是實(shí)際不是的，圖像直接就把這些值舍棄了，因?yàn)閳D例精度不夠。

        示例中，圖例的key值域在[0,28.1]，歸一化，并計(jì)算顏色紋理所在的像素值位置，其結(jié)果依次是：

圖例值       歸一化               顏色紋理像素位置0             0                     00.0157    0.0005587188612099644     00.032     0.0011387900355871886     00.0654    0.0023274021352313167     10.133     0.004733096085409253      10.272     0.009679715302491104      20.556     0.019786476868327404      51.13      0.04021352313167259      102.31      0.08220640569395017      214.72      0.1679715302491103       439.64      0.34306049822064055      8719.7      0.701067615658363        17928.1      1                        255

       由于顏色紋理長度是256，根本塞不下這個(gè)圖例，導(dǎo)致前三個(gè)圖例值都對(duì)應(yīng)同一個(gè)顏色紋理位置0處，因此，實(shí)際上前2個(gè)圖例已經(jīng)沒有了，一個(gè)像素不可能被賦予三個(gè)顏色，最終只有最后一個(gè)顏色被保留了。雖然通過不斷的增加canvas的長度從而能完整保留圖例，但是基本沒有廠商去處理圖例精度問題，畢竟實(shí)際用的少，問題都沒碰到，當(dāng)然更談不上去解決了。

4.4 前端可視化切片邊緣切割感

       由于windy是格點(diǎn)切片，前端webgl會(huì)對(duì)每個(gè)切片單獨(dú)渲染，熟悉webgl的人應(yīng)該知道，紋理渲染要設(shè)置采樣策略，如插值策略是線性還是最近鄰，邊緣是重復(fù)還是clamp，每個(gè)tile都是單獨(dú)渲染，所以tile邊緣的連接處由于采樣的緣故就很不光滑自然，有明顯的“刀切一樣的割裂感”，這種現(xiàn)象windy自己也有，但是經(jīng)過多次優(yōu)化已經(jīng)不太明顯，由于“血脈傳承”的關(guān)系，windy有的問題，windy仿們一個(gè)不落，由于windy仿們細(xì)節(jié)處理嚴(yán)重不足，看起就特別不明顯和不舒服，割裂感如下圖所示：

windy原廠：切片邊緣的割裂感

windy仿：切片邊緣的割裂感

windy仿：切片邊緣的割裂感

五 總結(jié)

       本文分析了windy方案的基本數(shù)據(jù)處理邏輯，總結(jié)了優(yōu)點(diǎn)和類windy方案的不足，最后做個(gè)個(gè)人關(guān)于windy方案的簡(jiǎn)單小節(jié)：

• windy方案并不是通用的解決方案。通常數(shù)值范圍差距不大且線性數(shù)據(jù)是比較好用，反之就不能用，例如指數(shù)級(jí)產(chǎn)品。

• 僅用于專業(yè)性較弱的場(chǎng)景下可視化。windy的圖例分級(jí)是為了美觀自定義的，而專業(yè)領(lǐng)域?yàn)榱藴?zhǔn)確是嚴(yán)格標(biāo)準(zhǔn)的，所以不能完全替代專業(yè)性較強(qiáng)的業(yè)務(wù)場(chǎng)景。有些在windy里好看，移植到專業(yè)氣象系統(tǒng)上可能很難看。

• 類windy方案存在數(shù)據(jù)精度和圖例精度問題，導(dǎo)致數(shù)據(jù)精度要求極其敏感的場(chǎng)景下出現(xiàn)顯示錯(cuò)誤。

• windy仿的站點(diǎn)，普遍存在細(xì)節(jié)處理能力不足的現(xiàn)象，性能、精度、效果沒有一個(gè)能達(dá)標(biāo)的基本上，不創(chuàng)新就靠仿照，應(yīng)該是出不了“中國版windy”的。

        由于windy自身的不足，想要在性能、精度、效果上超于它并不是不可能的。例如保留數(shù)據(jù)切片和格點(diǎn)金字塔索引思想，但是不轉(zhuǎn)碼圖片，以其他二進(jìn)制自定義格式返回，前端解碼數(shù)據(jù)構(gòu)造浮點(diǎn)型紋理，避免圖像轉(zhuǎn)碼過程中的精度丟失；其他色條精度也改用根據(jù)數(shù)據(jù)實(shí)際圖例動(dòng)態(tài)生成避免精度不夠的丟失等等。

        一味仿照永遠(yuǎn)不會(huì)超過，只有分析別人的問題，思考用什么方案去解決問題，制定新的技術(shù)方案、標(biāo)準(zhǔn)、工藝流程、框架才能在另一個(gè)維度上實(shí)現(xiàn)超越，而我本人正在為此而努力。。。

確定