杜景林+喻亞楠

摘 要： 為了增強(qiáng)用戶對(duì)WRF氣象模式數(shù)據(jù)的直觀性認(rèn)識(shí)，設(shè)計(jì)一種基于SSH框架的NC數(shù)據(jù)可視化系統(tǒng)。該系統(tǒng)允許用戶和數(shù)據(jù)之間進(jìn)行交互讀取，使用顏色映射函數(shù)將具體數(shù)據(jù)值映射成直觀的顏色，結(jié)合WebGL繪圖技術(shù)實(shí)現(xiàn)氣象數(shù)據(jù)的形象顯示，同時(shí)設(shè)計(jì)以時(shí)間、高度為變量的動(dòng)畫(huà)展示。利用NCL編碼語(yǔ)言，對(duì)NC數(shù)據(jù)進(jìn)行二次可視化，將兩次可視化結(jié)果進(jìn)行對(duì)比，完成系統(tǒng)驗(yàn)證。實(shí)驗(yàn)結(jié)果表明，該系統(tǒng)的可行性可極大地提高氣象工作人員對(duì)NC數(shù)據(jù)動(dòng)態(tài)變化的直觀把握，有利于其做出相關(guān)決策。

關(guān)鍵詞： NC數(shù)據(jù)； WebGL； SSH框架； 可視化； NCL； 系統(tǒng)驗(yàn)證

中圖分類號(hào)： TN911?34 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 1004?373X（2018）02?0166?04

Abstract： In order to enhance the user′s intuitive understanding of WRF meteorological mode data， an NC data visualization system based on SSH framework is designed. The system allows interactive reading between users and data. The color mapping function is used to map specific data values into intuitive color elements. The images are displayed on the screen by combining WebGL drawing technology. An animation exhibition which uses time and height as the variables is designed. The NCAR command language （NCL） is adopted to realize the secondary visualization of NC data. The two visualization results are compared to accomplish the system verification. The experimental results shows that the feasibility of the system is proved， and meteorological staff′ intuitive control for dynamic changes in NC data is greatly improved which is conducive to making relevant decisions for meteorological staff.

Keywords： NC data； WebGL； SSH framework； visualization； NCL； system verification

0 引 言

隨著氣象領(lǐng)域的發(fā)展，氣象資料服務(wù)的需求日益擴(kuò)大。目前，國(guó)內(nèi)主要?dú)庀髷?shù)據(jù)都用NC格式進(jìn)行輸出存儲(chǔ)管理，同時(shí)緊隨著NC數(shù)據(jù)的廣泛使用，誕生了很多NC數(shù)據(jù)的分析處理軟件，如Excel的插件NETCDF.xlsmNC，該插件可以直接讀取NC數(shù)據(jù)，但也只能橫向地顯示數(shù)據(jù)值，無(wú)法動(dòng)態(tài)地顯示數(shù)據(jù)之間的關(guān)聯(lián)，用戶無(wú)法直觀地感受數(shù)據(jù)意義。還有一些專業(yè)的處理軟件，比如Graphics，但都需要專業(yè)人士滿足一定的專業(yè)技能才能使用，用戶的體驗(yàn)感不好。

為了提高用戶的互操作性，以及對(duì)數(shù)據(jù)的直觀認(rèn)識(shí)，本文設(shè)計(jì)了基于SSH框架的NC數(shù)據(jù)可視化驗(yàn)證系統(tǒng)，主要涉及NC數(shù)據(jù)解析讀取，存入數(shù)據(jù)庫(kù)，設(shè)計(jì)顏色映射函數(shù)，分析WebGL繪圖技術(shù)，調(diào)用NCL繪圖對(duì)可視化結(jié)果進(jìn)行對(duì)比驗(yàn)證，同時(shí)為了進(jìn)一步滿足用戶的需求，設(shè)計(jì)了時(shí)間和高度動(dòng)畫(huà)，動(dòng)態(tài)地顯示不同高度不同時(shí)間的氣象要素動(dòng)態(tài)變化特點(diǎn)，有助于相關(guān)人員分析研究。本系統(tǒng)后臺(tái)采用Java語(yǔ)言結(jié)合SSH框架進(jìn)行開(kāi)發(fā)，前端使用HTML，JQuery，CSS語(yǔ)言，繪圖部分采用WebGL 3D繪圖標(biāo)準(zhǔn)。

1 相關(guān)技術(shù)

1.1 NC文件介紹

NC數(shù)據(jù)格式是由美國(guó)大學(xué)大氣研究協(xié)會(huì)下Unidata項(xiàng)目科學(xué)家針對(duì)科學(xué)數(shù)據(jù)的特點(diǎn)[1]，提出的一種結(jié)構(gòu)化數(shù)組數(shù)據(jù)。NC數(shù)據(jù)全稱為（Network Common Data Format），中文譯名為“網(wǎng)絡(luò)通用數(shù)據(jù)格式”。NC數(shù)據(jù)格式由于自身的易用性、可追加性、平臺(tái)無(wú)關(guān)性、高可用性等特點(diǎn)而受到氣象領(lǐng)域的追捧。它本身的格式不固定，能夠根據(jù)使用者自身的需求去定義。一個(gè)NC數(shù)據(jù)集包含維（dimensions）、變量（variables）和屬性（attributes）三種描述類型，每種類型都會(huì)被分配一個(gè)名字和一個(gè)ID，這些類型共同描述了一個(gè)數(shù)據(jù)集。變量存儲(chǔ)實(shí)際數(shù)據(jù)，維給出了變量維度信息，屬性則給出了變量或者數(shù)據(jù)集本身的輔助信息屬性[2]。目前，隨著NC數(shù)據(jù)格式的推廣，NC數(shù)據(jù)存儲(chǔ)格式已經(jīng)能夠用于大氣科學(xué)，地球物理，海洋水文等諸多領(lǐng)域[3]。

1.2 WebGL繪圖

WebGL是一個(gè)用于在Web上生成三維圖形的應(yīng)用編程接口。這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過(guò)增加OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開(kāi)發(fā)人員就可以借助系統(tǒng)顯卡來(lái)在瀏覽器里更流暢地展示3D場(chǎng)景和模型 [4]，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺(jué)化。WebGL工作流程圖如圖1所示。

1.3 NCL繪圖驗(yàn)證endprint

NCL（The NCAR Command Language）是一種專門(mén)為科學(xué)數(shù)據(jù)處理以及數(shù)據(jù)可視化設(shè)計(jì)的高級(jí)語(yǔ)言，在氣象領(lǐng)域科研工作者一般都選擇NCL腳本的繪圖方法[5]。其中NCL腳本內(nèi)置了很多用于解決氣象領(lǐng)域問(wèn)題的調(diào)用函數(shù)，因此可以方便相關(guān)專業(yè)人員進(jìn)行數(shù)據(jù)操作，同時(shí)也因?yàn)樗南鄬?duì)專業(yè)性，使得普通用戶的操作體驗(yàn)并不友好。本系統(tǒng)采用NCL繪圖結(jié)果與WebGL繪圖形成對(duì)比，體現(xiàn)本系統(tǒng)操作的嚴(yán)謹(jǐn)性。在NCL語(yǔ)言編程中，一般使用命令行交互式或者批處理模式對(duì)數(shù)據(jù)進(jìn)行操作。以下是NCL編程5個(gè)主要步驟：加載庫(kù)函數(shù)；導(dǎo)入數(shù)據(jù)；打開(kāi)繪圖區(qū)；編輯可視化圖顯示效果；調(diào)用繪圖函數(shù)繪圖。

1.4 SSH框架

SSH框架是比較經(jīng)典的Web應(yīng)用程序開(kāi)源集成框架[6]，從職責(zé)上分為表示層、業(yè)務(wù)邏輯層、數(shù)據(jù)持久層，系統(tǒng)的基本業(yè)務(wù)流程是：在表示層中，首先根據(jù)JSP頁(yè)面實(shí)現(xiàn)客戶交互，負(fù)責(zé)發(fā)送請(qǐng)求（Request）和接收服務(wù)器響應(yīng)（Response）[7]；然后Struts根據(jù)配置文件（struts?config.xml）將ActionServlet接收到的Request委派給相應(yīng)的Action處理。在業(yè)務(wù)層中，管理服務(wù)組件的Spring IOC容器負(fù)責(zé)向Action提供業(yè)務(wù)模型（Model）組件和該組件的協(xié)作對(duì)象數(shù)據(jù)處理（DAO）組件完成業(yè)務(wù)邏輯[8]，同時(shí)Spring容器提供事務(wù)處理，緩沖池等容器組件以提升系統(tǒng)性能和保證數(shù)據(jù)的完整性。而在持久層中，則依賴于Hibernate的對(duì)象化映射和數(shù)據(jù)庫(kù)交互[9]，完成對(duì)持久化對(duì)象的操作，并且返回相應(yīng)的處理結(jié)果。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)功能

該系統(tǒng)在前臺(tái)設(shè)計(jì)相關(guān)展示頁(yè)面，然后根據(jù)用戶選取的數(shù)據(jù)文件，選擇的物理量（主要包括QVAPOR（水汽混合比），QRAIN（雨水混合比），QCLOUD（云水混合比）等，以及時(shí)間維度（1～24），高度維度（1～49））將可視化結(jié)果顯示在網(wǎng)頁(yè)端。由于不同物理量之間的屬性不同，所以需要根據(jù)前臺(tái)用戶點(diǎn)擊的需求數(shù)據(jù)在后臺(tái)進(jìn)行調(diào)用，進(jìn)而傳遞給顏色傳輸函數(shù)進(jìn)行映射，最終在前臺(tái)進(jìn)行可視化顯示。為了方便用戶將對(duì)不同的氣象要素進(jìn)行對(duì)比，前臺(tái)設(shè)計(jì)中考慮了多窗口不同要素之間同時(shí)進(jìn)行顯示。同時(shí)考慮到用戶能更直觀地感受同一氣象要素在不同時(shí)間或不同高度維度情況下的區(qū)別，設(shè)計(jì)了時(shí)間動(dòng)畫(huà)和高度動(dòng)畫(huà)進(jìn)行連續(xù)展示。在前臺(tái)調(diào)用數(shù)據(jù)庫(kù)進(jìn)行WebGL繪圖展示的同時(shí)，可以通過(guò)右擊鼠標(biāo)彈出NCL繪圖驗(yàn)證模塊，將WebGL繪圖結(jié)果與NCL繪圖結(jié)果形成印證對(duì)比，驗(yàn)證整個(gè)系統(tǒng)的可行性。

2.2 NC數(shù)據(jù)流程

由于NC數(shù)據(jù)不能直接進(jìn)行繪制，首先需要對(duì)NC格式數(shù)據(jù)進(jìn)行解析，然后將解析后的數(shù)據(jù)存入數(shù)據(jù)庫(kù)，用戶點(diǎn)擊具體物理量顯示時(shí)，根據(jù)Request請(qǐng)求傳遞的物理量，在后臺(tái)對(duì)物理量進(jìn)行區(qū)分，匹配出相應(yīng)的物理量數(shù)值，將物體的數(shù)值傳遞給顏色映射方法進(jìn)行映射，映射結(jié)束后的數(shù)據(jù)以Json格式傳入WebGL的頂點(diǎn)數(shù)據(jù)緩沖區(qū)（編寫(xiě)頂點(diǎn)索引）以及顏色緩沖區(qū)完成相應(yīng)繪圖，最后將數(shù)據(jù)以可視化圖的形式顯示到網(wǎng)頁(yè)端。

2.3 顏色映射函數(shù)

在NC數(shù)據(jù)中，每一個(gè)不同的氣象要素變量都是以離散網(wǎng)格數(shù)組的形式存在的，數(shù)組中的數(shù)據(jù)值一般比較連續(xù)，用戶無(wú)法直觀地感覺(jué)出數(shù)據(jù)值之間的差異[10]。因此，本系統(tǒng)中設(shè)計(jì)了顏色映射函數(shù)，將輸入的每個(gè)具體的數(shù)據(jù)值轉(zhuǎn)換為具體的可視顯示的像素點(diǎn)，將所有的像素點(diǎn)連接在一起以帶有顏色的圖顯示出來(lái)就可以直觀地判斷數(shù)據(jù)之間的變化。以下是顏色映射函數(shù)設(shè)計(jì)思路，圖2是具體的顏色映射函數(shù)流程圖。

1） 在顏色映射函數(shù)中，先根據(jù)每個(gè)變量數(shù)據(jù)的索引下標(biāo)取出每一個(gè)數(shù)據(jù)值，遍歷所有索引找出每一個(gè)變量的最大最小值，并記錄下對(duì)應(yīng)的索引值，將最大的數(shù)據(jù)值減去最小的數(shù)據(jù)值得出的結(jié)果平均分成255段，這里的每一段都代表一種具體顏色。

2） 根據(jù)RGB標(biāo)準(zhǔn)定義紅橙黃綠藍(lán)靛紫七種顏色。

3） 重新遍歷數(shù)據(jù)值，并對(duì)數(shù)據(jù)值大小進(jìn)行判別，將每一個(gè)具體的數(shù)據(jù)值進(jìn)行歸類，在歸類同時(shí)記錄下相對(duì)應(yīng)的數(shù)據(jù)索引值，從而匹配不同的顏色數(shù)據(jù)值。

2.4 系統(tǒng)架構(gòu)

本文系統(tǒng)采用經(jīng)典的SSH框架搭建整個(gè)系統(tǒng)平臺(tái)，分別是數(shù)據(jù)持久層、業(yè)務(wù)邏輯層、表示層，采用MVC分層思想將數(shù)據(jù)處理、邏輯控制、數(shù)據(jù)顯示三個(gè)功能模塊分離，使整個(gè)系統(tǒng)結(jié)構(gòu)清晰，耦合性低，便于后期維護(hù)。

2.4.1 數(shù)據(jù)持久層

數(shù)據(jù)持久層主要封裝NC變量數(shù)據(jù)的讀取，利用NC文件提供的Java語(yǔ)言接口對(duì)數(shù)據(jù)進(jìn)行解析，將所有的持久化物理變量映射到底層數(shù)據(jù)表，然后通過(guò) Hibernate提供的session接口執(zhí)行被持久化對(duì)象的增刪改查等系列操作，極大地減少了程序員對(duì)底層數(shù)據(jù)庫(kù)的直接交互。

2.4.2 業(yè)務(wù)邏輯層

業(yè)務(wù)邏輯層主要根據(jù)用戶請(qǐng)求，將具體的請(qǐng)求傳遞給Stuts.xml配置文件，配置文件匹配對(duì)應(yīng)的用戶命令傳遞給不同Action層，Action層通過(guò)調(diào)用Service層，Dao層對(duì)數(shù)據(jù)進(jìn)行處理操作。本系統(tǒng)主要涉及WebGL繪圖顯示以及NCL繪圖驗(yàn)證模塊，根據(jù)用戶選擇的氣象變量請(qǐng)求傳遞給不同的Action層，以及顏色映射函數(shù)處理后的顏色數(shù)據(jù)，通過(guò)Ajax技術(shù)傳遞給WebGL繪圖腳本進(jìn)行繪圖處理，對(duì)于NCL繪圖驗(yàn)證主要涉及將數(shù)據(jù)傳遞給NCL繪圖腳本，并最終發(fā)送到表示層，表示層將這些數(shù)據(jù)進(jìn)行可視化顯示。同時(shí)這里使用了Spring容器，采用注入方法，極大地降低了代碼之間的耦合性，以及為后期程序開(kāi)發(fā)帶來(lái)了極大的便利。

2.4.3 表現(xiàn)層

表現(xiàn)層主負(fù)責(zé)將業(yè)務(wù)邏輯層的數(shù)據(jù)進(jìn)行界面顯示，根據(jù)用戶的需求展示不同的數(shù)據(jù)可視化方案，包括不同要素不同高度不同時(shí)間的WebGL繪圖顯示，高度動(dòng)畫(huà)控制，時(shí)間動(dòng)畫(huà)控制，NCL繪圖驗(yàn)證顯示。endprint

圖3顯示為系統(tǒng)架構(gòu)圖，圖中標(biāo)示了每個(gè)層需要實(shí)現(xiàn)的功能。

3 系統(tǒng)實(shí)現(xiàn)

3.1 系統(tǒng)平臺(tái)

本系統(tǒng)采用 MyEclipse作為開(kāi)發(fā)平臺(tái)。MyEclipse是一個(gè)多語(yǔ)言集成開(kāi)發(fā)平臺(tái)，支持Java，JQuery，CSS等一系列語(yǔ)言開(kāi)發(fā)。MyEclipse同時(shí)具有友好的用戶編程界面，能自動(dòng)對(duì)編寫(xiě)代碼進(jìn)行格式化操作，并伴有代碼提示功能。本系統(tǒng)在MyEclipse上進(jìn)行前臺(tái)頁(yè)面設(shè)計(jì)，后臺(tái)邏輯處理的開(kāi)發(fā)工作，數(shù)據(jù)庫(kù)采用MySQL數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)。

3.2 系統(tǒng)運(yùn)行測(cè)試

圖4是系統(tǒng)界面運(yùn)行的時(shí)間高度均為1的QVAQOR（水汽）變量的WebGL以及NCL對(duì)比圖。

左側(cè)為具體的高度動(dòng)畫(huà)和時(shí)間動(dòng)畫(huà)控制臺(tái)，可以根據(jù)時(shí)間或者高度變量以動(dòng)畫(huà)的形式動(dòng)態(tài)地顯示同一氣象要素在不同高度或時(shí)間的動(dòng)態(tài)變化效果，給用戶更直觀的體驗(yàn)效果。圖4主體部分為水汽值在同一高度同一時(shí)間的WebGL動(dòng)畫(huà)與NCL顯示圖形，兩種方法得到的圖形基本一致，驗(yàn)證了本系統(tǒng)的可靠性。

4 結(jié) 語(yǔ)

圍繞NC格式的氣象數(shù)據(jù)，利用WebGL繪圖技術(shù)，NCL繪圖驗(yàn)證技術(shù)，將它們封裝成不同的繪圖腳本，將數(shù)據(jù)通過(guò)顏色映射函數(shù)映射傳遞給不同的繪圖腳本進(jìn)行繪圖，最后通過(guò)同一高度同一時(shí)間的WebGL以及NCL繪圖結(jié)果的相似性，驗(yàn)證整個(gè)系統(tǒng)的可行性，為相關(guān)氣象工作人員分析NC格式的氣象數(shù)據(jù)提供了動(dòng)態(tài)分析方法，有利于相關(guān)工作人員對(duì)對(duì)應(yīng)的數(shù)據(jù)進(jìn)行更深入的研究。同時(shí)，整個(gè)系統(tǒng)架構(gòu)采用SSH框架封裝，提高了代碼之間的重用性以及降低了代碼之間的耦合性，為后續(xù)系統(tǒng)的開(kāi)發(fā)維護(hù)提供了便利。

參考文獻(xiàn)

[1] 李繼祥，于立，陳龍泉，等.NetCDF格式在Windows及Linux平臺(tái)下的讀寫(xiě)[J].安徽農(nóng)業(yè)科學(xué)，2014，42（33）：11942?11945.

LI Jixiang， YU Li， CHEN Longquan， et al. Read and write NetCDF format files on Windows and Linux platform [J]. Journal of Anhui agricultural sciences， 2014， 42（33）： 11942?11945.

[2] 張弟，吳建平.DotSpatial開(kāi)源GIS軟件擴(kuò)展研究[J].電子世界，2013（19）：234?236.

ZHANG Di， WU Jianping. Research on DotSpatial open source GIS software extension [J]. Electronics world， 2013（19）： 234?236.

[3] 雛亞未.基于GDAL的NetCDF數(shù)據(jù)的信息提取及格式轉(zhuǎn)換[J].江西測(cè)繪，2014（2）：32?35.

CHU Yawei. Information extraction and format conversion of NetCDF data based on GDAL [J]. Jiangxi surveying and mapping， 2014（2）： 32?35.

[4] 周長(zhǎng)江.數(shù)字城市三維景觀建模及可視化技術(shù)研究[D].徐州：中國(guó)礦業(yè)大學(xué)，2014.

ZHOU Changjiang. Research on 3D landscape modeling and visualization technology in digital city [D]. Xuzhou： China University of Mining and Technology， 2014.

[5] 王涵，李玲，孫學(xué)慶，等.CMACast內(nèi)蒙古氣象信息Web平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].氣象科技，2014，42（2）：283?286.

WANG Han， LI Ling， SUN Xueqing， et al. Design and implementation of CMACast Inner Mongolia meteorological information Web platform [J]. Meteorological science and technology， 2014， 42（2）： 283?286.

[6] 周立剛.基于J2EE的外事管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].天津：南開(kāi)大學(xué)，2014.

ZHOU Ligang. Design and implementation of foreign affairs management system based on J2EE [D]. Tianjin： Nankai University， 2014.

[7] 翟高粵.基于J2EE技術(shù)的SSH框架的 改進(jìn)及應(yīng)用[J].計(jì)算機(jī)時(shí)代，2012（10）：24?29.

ZHAI Gaoyue. Improvement and application of SSH framework based on J2EE technology [J]. Computer age， 2012（10）： 24?29.

[8] 趙鐵松，王曉云，李偉，等.基于B/S架構(gòu)和開(kāi)源WebGIS平臺(tái)的氣象觀測(cè)站網(wǎng)可視化系統(tǒng)[J].氣象科技，2013，41（1）：57?61.

ZHAO Tiesong， WANG Xiaoyun， LI Wei， et al. Meteorological observation station network visualization system based on B/S architecture and open source WebGIS platform [J]. Meteorological science and technology， 2013， 41（1）： 57?61.

[9] 林秀芬.基于SSH的招標(biāo)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2014.

LIN Xiufen. Design and implementation of the bidding management system based on SSH [D]. Chengdu： University of Electronic Science and Technology of China， 2014.

[10] 劉培寧，韓笑.基于R語(yǔ)言的NetCDF文件分析和可視化應(yīng)用[J].氣象科技，2014，42（4）：629?634.

LIU Peining， HAN Xiao. NetCDF file analysis and visualization application based on R language [J]. Meteorological science and technology， 2014， 42（4）： 629?634.endprint