馬寶田MA Bao-tian；薛勇XUE Yong；陳杰CHEN Jie；羅勝LUO Sheng

（①中國電波傳播研究所，青島 266108；②北京特種工程設(shè)計研究所，北京 100028；③瑞測（江蘇）空間信息技術(shù)有限公司，南通 226020）

0 引言

電離層作為地球空間環(huán)境的重要組成部分，監(jiān)測它的動態(tài)變化是一項(xiàng)常規(guī)且重要的任務(wù)。利用全球衛(wèi)星導(dǎo)航系統(tǒng)（GNSS）觀測數(shù)據(jù)來建立電離層模型是一種行之有效的技術(shù)手段，由此而得到的電離層數(shù)據(jù)產(chǎn)品存在維度廣、數(shù)量大、構(gòu)造復(fù)雜的特點(diǎn)。要想更為清晰快速地認(rèn)識和理解電離層態(tài)勢，傳統(tǒng)的二維平面圖表已經(jīng)無法滿足需求，而3DGIS 技術(shù)作為當(dāng)前GIS 技術(shù)與WebGL 技術(shù)的有機(jī)融合，能夠結(jié)合地理信息技術(shù)、多媒體技術(shù)以及網(wǎng)絡(luò)技術(shù)實(shí)現(xiàn)數(shù)據(jù)態(tài)勢的可視化，進(jìn)而能夠?qū)﹄婋x層態(tài)勢進(jìn)行實(shí)時全面的監(jiān)測，讓電離層態(tài)勢呈現(xiàn)更為直觀和容易理解，目前已經(jīng)成為電離層數(shù)據(jù)管理的重要研究方向之一。

由于電離層數(shù)據(jù)采用網(wǎng)格化存儲，且數(shù)據(jù)量較大，常規(guī)方法將電離層數(shù)據(jù)傳到客戶端后，由客戶端進(jìn)行渲染處理會造成傳輸時間長，渲染速度慢，人機(jī)交互效果差等問題，不利于大規(guī)模電離層態(tài)勢的實(shí)時快速更新與效果呈現(xiàn)，所以如何對大規(guī)模電離層格網(wǎng)數(shù)據(jù)進(jìn)行快速可視化渲染是一個亟需解決的問題。

本文基于3DGIS 技術(shù)對大規(guī)模電離層格網(wǎng)數(shù)據(jù)可視化進(jìn)行了研究，進(jìn)而能夠在瀏覽器上無插件實(shí)現(xiàn)大規(guī)模電離層態(tài)勢的交互與展示，為電離層態(tài)勢可視化系統(tǒng)設(shè)計提供一種新的方法。

1 系統(tǒng)設(shè)計

1.1 總體架構(gòu)設(shè)計

本文采用B/S（Browser/Server）架構(gòu)進(jìn)行電離層態(tài)勢可視化系統(tǒng)的架構(gòu)設(shè)計，系統(tǒng)數(shù)據(jù)預(yù)處理在服務(wù)器端完成，電離層數(shù)據(jù)以文件形式存儲在服務(wù)器端，用數(shù)據(jù)庫管理電離層文件編目。系統(tǒng)總體設(shè)計如圖1 所示。

圖1 系統(tǒng)總體設(shè)計圖

服務(wù)器端主要提供Web 服務(wù)、預(yù)處理組件和數(shù)據(jù)庫服務(wù)。其中，Web 服務(wù)主要響應(yīng)客戶端瀏覽器的請求；預(yù)處理組件主要提供電離層文件的解析和預(yù)處理服務(wù)，由于電離層格網(wǎng)數(shù)據(jù)量大，不適于直接發(fā)送到客戶端進(jìn)行渲染處理，為此考慮解析完成后對格網(wǎng)數(shù)據(jù)轉(zhuǎn)換為灰度圖像，灰度圖數(shù)據(jù)量極小，能極大提高系統(tǒng)響應(yīng)效率，為大數(shù)據(jù)量實(shí)時動態(tài)變化監(jiān)測服務(wù)奠定基礎(chǔ)；數(shù)據(jù)庫服務(wù)主要對電離層文件進(jìn)行編目管理，包含文件屬性信息的管理，如文件存儲地址、日期、地點(diǎn)、經(jīng)緯度相關(guān)信息等。

客戶端瀏覽器主要通過請求地址的方式獲取服務(wù)器發(fā)送來的預(yù)處理過的電離層圖像數(shù)據(jù)，根據(jù)圖像灰度信息采用OpenGL 著色語言 （OpenGL Shading Language，GLSL）計算每個網(wǎng)格的顏色紋理，并將計算后的紋理在3DGIS 引擎上進(jìn)行繪制，以此完成電離層格網(wǎng)數(shù)據(jù)的可視化展示。GLSL 是一種用于OpenGL 的高級過程著色語言，它采用類似C 語言的詞法和語法結(jié)構(gòu)，數(shù)據(jù)類型豐富，大量內(nèi)置的函數(shù)組提供了實(shí)現(xiàn)著色算法所需要的許多功能，能夠在OpenGL 的渲染管線中對頂點(diǎn)和片元進(jìn)行自定義處理以達(dá)到滿意的效果，并且處理速度極快。

1.2 電離層格網(wǎng)數(shù)據(jù)轉(zhuǎn)換

電離層格網(wǎng)數(shù)據(jù)文件一般采用文本文件格式存儲。一般會描述該電離層數(shù)據(jù)記錄的時間、范圍（起止經(jīng)緯度和分辨率）和電離層數(shù)值等信息，部分仿真數(shù)據(jù)如圖2 所示。

圖2 部分仿真電離層格網(wǎng)數(shù)據(jù)示例圖

由于電離層數(shù)據(jù)文件記錄時間延長，范圍大，一份電離層格網(wǎng)數(shù)據(jù)通常比較大，從幾十MB 至幾百M(fèi)B 不等，把這樣的數(shù)據(jù)通過網(wǎng)絡(luò)傳輸?shù)娇蛻舳?，其穩(wěn)定性和時效性都沒有保障，需要將格網(wǎng)數(shù)據(jù)進(jìn)行壓縮。壓縮格網(wǎng)數(shù)據(jù)最好的方法就是將格網(wǎng)數(shù)據(jù)轉(zhuǎn)為灰度圖，即矢量數(shù)據(jù)轉(zhuǎn)為柵格圖像，通過轉(zhuǎn)換壓縮為灰度圖，在不損失精度的情況下，數(shù)據(jù)量可以減少到KB 級，而且圖像數(shù)據(jù)也非常有利于網(wǎng)絡(luò)傳輸，具體轉(zhuǎn)換壓縮流程如圖3 所示。

圖3 電離層格網(wǎng)數(shù)據(jù)轉(zhuǎn)換為灰度圖流程圖

一般已知格網(wǎng)起始經(jīng)緯度Start[2]，終止經(jīng)緯度End[2]，格網(wǎng)分辨率R，那么可以通過以下公式計算出格網(wǎng)的寬高，也即圖像的寬高（w，h）：

對于電離層數(shù)值，通過如下公式計算格網(wǎng)數(shù)據(jù)所一一對應(yīng)轉(zhuǎn)換后的灰度圖像像素值：

其中g(shù)rid（i，j）為格網(wǎng)數(shù)據(jù)，max（grid）為格網(wǎng)數(shù)據(jù)的最大值，min（grid）為格網(wǎng)數(shù)據(jù)的最小值；pixel（i，j）為格網(wǎng)數(shù)據(jù)轉(zhuǎn)換后的灰度圖像像素值，灰度區(qū)間[0，255]。

灰度圖像的長寬與格網(wǎng)數(shù)據(jù)尺度保持一致，格網(wǎng)的每個格點(diǎn)一一對應(yīng)映射到圖像的像素點(diǎn)上。通過以上步驟完成格網(wǎng)平面到灰度圖像的轉(zhuǎn)換，圖像壓縮大小不超過200KB，仿真數(shù)據(jù)轉(zhuǎn)換后如圖4 所示。

圖4 仿真格網(wǎng)數(shù)據(jù)轉(zhuǎn)為灰度圖像

1.3 漸變紋理計算

客戶端瀏覽器請求到灰度圖像后，利用瀏覽器WebGL 的線性插值方法，通過GLSL 著色器語言給灰度圖像創(chuàng)建顏色漸變色紋理，最終完成可視化渲染，具體過程如圖5 所示。

圖5 GLSL 著色器創(chuàng)建顏色漸變色紋理流程圖

灰度圖是離散的，可視化效果較差，通過GLSL 進(jìn)行線性插值平滑，利用GPU 高性能計算可以快速獲得灰度平滑紋理，偽代碼如表1 所示，插值效果如圖6 所示。

圖6 GLSL 著色器插值平滑灰度紋理圖

表1 使用GLSL 線性插值平滑灰度圖

采用GLSL 創(chuàng)建顏色漸變紋理是使用canvas 的createLinearGradient 和addColorStop 兩個API 函數(shù)實(shí)現(xiàn)的。canvas 是HTML5 中使用JavaScript 在網(wǎng)頁中圖像繪制的元素標(biāo)記。canvas 元素本身是沒有繪圖能力的，所有的繪制工作必須在JavaScript 內(nèi)部完成。

createLinearGradient 方法需要指定Stop 和顏色值，其中Stop 范圍在[0，1]之間，而灰度圖圖像傳到WebGL 里的顏色在[0，1]之間，因此兩個之間存在明確的轉(zhuǎn)換關(guān)系，即255×stop=grey，通過設(shè)置stop 的漸變顏色再傳到WebGL 著色器里，就能控制灰度像素值的顯示邏輯，偽代碼如表2 所示。

表2 canvas 創(chuàng)建漸變紋理

GLSL 著色器里將灰度紋理和漸變紋理是結(jié)合使用的，偽代碼如表3 所示。

表3 在GLSL 著色器里使用灰度紋理和顏色紋理

直接輸出漸變顏色，得到等值面邊界的模糊可視化效果，根據(jù)起止經(jīng)緯度再疊加地圖信息，結(jié)果如圖7 所示。

圖7 GLSL 著色器融合灰度紋理和顏色紋理圖

2 應(yīng)用實(shí)驗(yàn)

基于前述分析，為進(jìn)一步對電離層進(jìn)行展示和應(yīng)用分析，本文采用WebGL 的前端開源Cesium 框架構(gòu)建了全球電離層可視化系統(tǒng)，將前端計算得到的可視化效果圖像根據(jù)經(jīng)緯度位置疊加到三維地球上，生成的場景如圖8 所示。

圖8 Cesium 框架疊加全球電離層顏色紋理可視化效果

系統(tǒng)驗(yàn)證了大規(guī)模電離層格網(wǎng)數(shù)據(jù)快速可視化渲染方法的可行性，通過GLSL 語言發(fā)揮了GPU 高性能計算的特性，實(shí)現(xiàn)了大規(guī)模電離層態(tài)勢實(shí)時更新，提高了系統(tǒng)的穩(wěn)定性和性能，對構(gòu)建大數(shù)據(jù)環(huán)境下實(shí)時電離層態(tài)勢展示和分析具有重要支撐意義。

3 結(jié)束語

本文介紹了一種基于B/S 架構(gòu)的電離層格網(wǎng)數(shù)據(jù)可視化系統(tǒng)設(shè)計方法，研究了基于WebGL 技術(shù)快速高效創(chuàng)建大規(guī)模格網(wǎng)數(shù)據(jù)可視化的解決方案，為格網(wǎng)數(shù)據(jù)的網(wǎng)絡(luò)可視化提供了借鑒。隨著互聯(lián)網(wǎng)3DGIS 應(yīng)用的發(fā)展，對于海量數(shù)據(jù)的可視化處理和分析值得進(jìn)一步深入探索研究。