杜景林+喻亞楠

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

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

中圖分類號： TN911?34 文獻標識碼： A 文章編號： 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ù)的需求日益擴大。目前，國內(nèi)主要氣象數(shù)據(jù)都用NC格式進行輸出存儲管理，同時緊隨著NC數(shù)據(jù)的廣泛使用，誕生了很多NC數(shù)據(jù)的分析處理軟件，如Excel的插件NETCDF.xlsmNC，該插件可以直接讀取NC數(shù)據(jù)，但也只能橫向地顯示數(shù)據(jù)值，無法動態(tài)地顯示數(shù)據(jù)之間的關(guān)聯(lián)，用戶無法直觀地感受數(shù)據(jù)意義。還有一些專業(yè)的處理軟件，比如Graphics，但都需要專業(yè)人士滿足一定的專業(yè)技能才能使用，用戶的體驗感不好。

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

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

1.1 NC文件介紹

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

1.2 WebGL繪圖

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

1.3 NCL繪圖驗證endprint

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

1.4 SSH框架

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

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

2.1 系統(tǒng)功能

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

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

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

2.3 顏色映射函數(shù)

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

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

2） 根據(jù)RGB標準定義紅橙黃綠藍靛紫七種顏色。

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

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

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

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

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

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

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

2.4.3 表現(xiàn)層

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

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

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

3.1 系統(tǒng)平臺

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

3.2 系統(tǒng)運行測試

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

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

4 結(jié) 語

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

參考文獻

[1] 李繼祥，于立，陳龍泉，等.NetCDF格式在Windows及Linux平臺下的讀寫[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開源GIS軟件擴展研究[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].江西測繪，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] 周長江.數(shù)字城市三維景觀建模及可視化技術(shù)研究[D].徐州：中國礦業(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平臺的設(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è)計與實現(xiàn)[D].天津：南開大學(xué)，2014.

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

[7] 翟高粵.基于J2EE技術(shù)的SSH框架的 改進及應(yīng)用[J].計算機時代，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)和開源WebGIS平臺的氣象觀測站網(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的招標管理系統(tǒng)的設(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語言的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