基于WebGIS的離散時序空間數(shù)據(jù)動態(tài)可視化研究

王 軼，周 迅，周 偉，李 飛

(1.中國國土資源航空物探遙感中心，北京 100083;2.河北省遙感中心，石家莊 050021)

基于WebGIS的離散時序空間數(shù)據(jù)動態(tài)可視化研究

王 軼1，周 迅1，周 偉1，李 飛2

(1.中國國土資源航空物探遙感中心，北京 100083;2.河北省遙感中心，石家莊 050021)

人類對地球的監(jiān)測和模擬形成了大量的離散時序空間數(shù)據(jù)，如何有效表達這些數(shù)據(jù)以便為相關(guān)部門提供分析和決策依據(jù)，是眾多信息系統(tǒng)建設(shè)過程中遇到的難題之一。利用網(wǎng)絡(luò)地理信息系統(tǒng)(WebGIS)平臺，綜合應(yīng)用了OpenGL，Ajax和JavaScript等技術(shù)，實現(xiàn)了離散時序空間數(shù)據(jù)的解析、渲染和地理底圖的快速一體化動態(tài)可視化。該技術(shù)方法具有通用性，可以通過網(wǎng)絡(luò)平臺廣泛應(yīng)用于各類離散時序空間數(shù)據(jù)的監(jiān)控(如對環(huán)境污染擴散實測數(shù)據(jù))與預(yù)警(對模型數(shù)據(jù))，為政府科學(xué)決策和應(yīng)急響應(yīng)提供依據(jù)。

WebGIS;離散時序空間數(shù)據(jù);動態(tài)可視化;OpenGL;

0 引言

離散時序空間數(shù)據(jù)是指一組有序的、隨時間變化且具有空間位置信息的數(shù)值序列，數(shù)據(jù)基本表達形式為“X，Y，T，V”。其中，X和 Y對應(yīng)地理橫、縱坐標(biāo)，T為時間參數(shù)，V表示離散點各參數(shù)數(shù)值。離散時序空間數(shù)據(jù)通常來自于觀測點的監(jiān)測數(shù)據(jù)或各類模型模擬的數(shù)據(jù)，相鄰數(shù)據(jù)具有相同的時間間隔。WebGIS是利用Internet技術(shù)來擴展和完善GIS的一項技術(shù)，其核心是在GIS中嵌入HTTP標(biāo)準(zhǔn)的應(yīng)用體系，實現(xiàn)Internet環(huán)境下的空間信息管理和發(fā)布，在有關(guān)地理要素的各類系統(tǒng)建設(shè)中有著廣闊的應(yīng)用前景。

利用WebGIS集成系統(tǒng)實現(xiàn)“監(jiān)測/模擬”結(jié)果動態(tài)可視化具有重要意義，可以讓更廣泛的網(wǎng)絡(luò)用戶實時利用WebGIS系統(tǒng)原有數(shù)據(jù)資源、結(jié)合動態(tài)生成的“監(jiān)測/模擬”結(jié)果來進行分析和決策［1］。由于“監(jiān)測/模擬”結(jié)果數(shù)據(jù)的時空屬性，特別是時間屬性對結(jié)果觀測的重要意義，該應(yīng)用最佳可視化方式是使用時序動畫，方便用戶直觀地了解“監(jiān)測/模擬”結(jié)果的變化過程。目前，國內(nèi)在利用 Google Earth平臺提供的地理信息，運用KML技術(shù)開展疊加本地動態(tài)時空數(shù)據(jù)的可視化研究方面進行了探索［2－3］，但在基于網(wǎng)絡(luò)地理信息系統(tǒng) B/S技術(shù)框架下，還很難實現(xiàn)服務(wù)器端離散時序空間數(shù)據(jù)動態(tài)生成和可視化應(yīng)用。因此，如何實時、快速地生成系列等值線(面)，并在WebGIS中提供給用戶流暢、高效及動態(tài)的一體化動態(tài)可視化技術(shù)，是眾多系統(tǒng)建設(shè)過程中遇到的難題和挑戰(zhàn)之一。

可視化展示的效果和直觀程度直接影響用戶體驗和使用效果，而平滑、連續(xù)的用戶操作是系統(tǒng)實用化的關(guān)鍵點之一。這就需要對涉及的計算機圖形圖像學(xué)、網(wǎng)絡(luò)地理信息系統(tǒng)以及計算機網(wǎng)頁技術(shù)等領(lǐng)域的研究進展進行有機整合，找出解決思路。本文綜合應(yīng)用了OpenGL，Ajax和JavaScript等技術(shù)，在實現(xiàn)基于WebGIS框架下的離散時序空間數(shù)據(jù)快速一體化動態(tài)可視化方面進行了探索和實踐。

1 技術(shù)方法

本文基于WebGIS平臺中通用的ArcIMS體系結(jié)構(gòu)框架，對離散時序空間數(shù)據(jù)進行一體化動態(tài)可視化研究。總體結(jié)構(gòu)設(shè)計分為地圖服務(wù)器端、集成組件中間層和客戶端使用層3個部分。其中，地圖服務(wù)器端負責(zé)通常的系列地理底圖發(fā)布，如遙感影像圖、各種地理矢量圖件等，并接收客戶端用戶響應(yīng)，以及與集成組件中間層的通訊和數(shù)據(jù)交換;集成組件中間層完成離散時序空間數(shù)據(jù)的加載、處理、渲染及輸出等系列功能;客戶端使用層為綜合可視化和用戶操作界面。總體技術(shù)流程如圖1所示。

2 模塊設(shè)計

模塊設(shè)計主要包括等值面渲染組件、一體化動態(tài)可視化和投影變換3個主要模塊的功能設(shè)計。

2.1 等值面渲染組件模塊設(shè)計

本研究在VC++平臺下使用OpenGL技術(shù)實現(xiàn)對離散時序空間數(shù)據(jù)的等值面渲染和輸出，并編譯成DLL組件，供ArcIMS服務(wù)器端進行功能調(diào)用。其功能模塊包含離散空間數(shù)據(jù)網(wǎng)格化、數(shù)據(jù)加載、設(shè)備初始化、區(qū)域邊界截取和顏色設(shè)置、多邊形渲染以及圖像和XML文件輸出等。

2.1.1 離散空間數(shù)據(jù)網(wǎng)格化

將離散空間數(shù)據(jù)形成等值線(面)，首先需要對離散數(shù)據(jù)進行網(wǎng)格化處理。所謂網(wǎng)格化是指采用一定的插值方法，將稀疏、不規(guī)則分布的數(shù)據(jù)插值加密為規(guī)則分布的數(shù)據(jù)［4］。一般是根據(jù)區(qū)域內(nèi)離散點的分布與數(shù)量，采用空間數(shù)據(jù)插值方法將離散數(shù)據(jù)轉(zhuǎn)換為矩陣網(wǎng)格數(shù)據(jù)，或采用空間數(shù)據(jù)剖分方法將離散數(shù)據(jù)轉(zhuǎn)換為三角形網(wǎng)格數(shù)據(jù)。網(wǎng)格化的算法很多［5］，在對實際數(shù)據(jù)進行插值網(wǎng)格化時，需要根據(jù)客觀環(huán)境特征和數(shù)據(jù)本身的特點，選取合適的方法進行相應(yīng)的數(shù)據(jù)分析，科學(xué)、合理地選擇正確有效的插值方法。本文采用Delaunay三角形法［6－7］，按“最大 －最小角”優(yōu)化原則進行數(shù)據(jù)剖分處理。

2.1.2 數(shù)據(jù)加載

數(shù)據(jù)體的大小由離散點數(shù)量、時間頻率和參數(shù)數(shù)量決定。為加快圖形渲染的速度和效率，本文使用如下動態(tài)數(shù)組方式，即

在內(nèi)存中加載和保存實體數(shù)據(jù)。式中:m_Pointx保存所有離散點的投影x坐標(biāo);m_Pointy保存所有離散點的投影y坐標(biāo);m_PointDataNumber為網(wǎng)格點數(shù)量;m_FrameNumber為時間幀數(shù);m_NetDataNumber為網(wǎng)格數(shù)量;m_Pointz保存所有離散點的數(shù)值，該數(shù)值隨著時間變化而變化，因此該數(shù)組的長度為“網(wǎng)格點數(shù)量×?xí)r間幀數(shù)”;m_Net保存所有網(wǎng)格的結(jié)構(gòu)，本文采用三角網(wǎng)格結(jié)構(gòu)，因此需要在內(nèi)存中預(yù)留“網(wǎng)格數(shù)量×3”的長度。需要說明的是，由于計算機數(shù)組編號起始為0，而實際應(yīng)用中編號從1開始計數(shù)，為確保相互之間的對應(yīng)關(guān)系，故上述數(shù)組長度均增加1。

2.1.3 設(shè)備初始化

所有渲染的圖形最終并不是輸出在某個由VC++MFC開發(fā)的界面中，而是輸出成.png圖片，因此，在設(shè)備初始化時使用內(nèi)存設(shè)備暫時渲染和保存圖形，在OpenGL中使用HDC=CreateCompatibleDC(0)函數(shù)創(chuàng)建內(nèi)存設(shè)備。

2.1.4 區(qū)域邊界截取和顏色設(shè)置

由于輸出的圖像為矩形，而在實際應(yīng)用中通常需要將圖像疊加到相應(yīng)的地理底圖中(如遙感影像底圖)，以便直觀展現(xiàn)特定區(qū)域的變化狀況，而區(qū)域邊界一般為不規(guī)則形狀。為避免出現(xiàn)邊界被覆蓋情況，突出展現(xiàn)區(qū)域，需要將輸出圖像按邊界截取。在所有圖像格式中，只有.png格式圖像可以在IE瀏覽器上實現(xiàn)圖像疊加時的透明化處理。因此，在顏色設(shè)置時首先將圖像設(shè)置為白色，再渲染所表現(xiàn)的特定區(qū)域部分。本文將離散點數(shù)值從高到低共分成5個主色，從紅色向黃色、綠色、天藍色和藍色漸變。

2.1.5 多邊形渲染

根據(jù)保存在m_Net數(shù)組中的網(wǎng)格結(jié)構(gòu)，依次讀取每個網(wǎng)格離散點數(shù)據(jù)并進行渲染。本文的每個網(wǎng)格包含3個網(wǎng)格點，使用OpenGL中的GLVERTEX2F函數(shù)對三角形進行漸進色設(shè)置，通過調(diào)用GLFLUSH函數(shù)刷新內(nèi)存并保存經(jīng)過渲染的圖像。

2.1.6 圖像和XML文件輸出

由于OpenGL本身并不直接支持.png圖像輸出，因此首先需要調(diào)用OpenGL庫函數(shù)，設(shè)置相關(guān)參數(shù)，將內(nèi)存中的圖像輸出為位圖文件(.bmp);然后通過在VC++中調(diào)用CxImage類庫，將.bmp圖像轉(zhuǎn)換為.png圖像。在轉(zhuǎn)化過程中，.bmp圖像中的白色底色以透明效果來處理，同時將生成的唯一標(biāo)識的XML文件作為動態(tài)可視化時的索引文件。該文件保存了所有的時間序列以及所對應(yīng)的離散點等值面渲染圖像。

2.2 一體化動態(tài)可視化模塊設(shè)計

JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司的Brendan Eich設(shè)計，是一種動態(tài)、弱類型、基于原型的語言，內(nèi)置支持類。本文基于JavaScript語言開發(fā)在線動畫可視化功能，其原理是在ArcIMS的地圖可視化頁面中新建div，并將該div覆蓋于GIS底圖之上。div中加載等值面渲染組件所生成的離散點等值面渲染圖像和WebGIS中地理底圖一體化顯示，并通過不斷地刷新時間序列和加載不同時間幀的圖像，達到動態(tài)可視化效果。

2.2.1 基于Ajax的等值面渲染組件功能調(diào)用

平滑、連續(xù)的用戶操作是系統(tǒng)實用化的關(guān)鍵點之一。上述等值面渲染組件封裝成的DLL動態(tài)鏈接庫部署在服務(wù)器端，在HTML默認的Web協(xié)議中，當(dāng)客戶端頁面發(fā)送請求調(diào)用服務(wù)器端程序并得到響應(yīng)后，該頁面即被釋放，從而無法實現(xiàn)后續(xù)的一體化動態(tài)可視化功能。本研究采用Ajax技術(shù)實現(xiàn)了用戶的良好體驗。Ajax是異步JavaScript及XML技術(shù)的簡稱，其核心是一種支持異步請求的技術(shù)，即可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。通過Ajax向服務(wù)器端發(fā)送調(diào)用等值面渲染組件請求后，客戶端代理異步等待服務(wù)器端執(zhí)行完成返回結(jié)果的同時，繼續(xù)響應(yīng)用戶事件，觸發(fā)界面響應(yīng)處理過程。

2.2.2 XML 解析

等值面渲染組件生成渲染圖像成功后會在服務(wù)器端生成一個唯一標(biāo)識的XML文件并返回XML文件地址，客戶端通過該地址尋址后定位該XML文件，并調(diào)用Windows自帶XML解析插件進行解析。解析結(jié)果為獲取該時間序列離散點等值面渲染圖像的地址，并按相應(yīng)時間順序排列。

2.2.3 動態(tài)可視化

基于 JavaScript開發(fā)動畫播放類 ImageSlide。ImageSlide就像一個容器，用于盛放離散點等值面渲染圖像。通過解析XML文件，將得到的離散點等值面渲染圖像的地址作為該類實例化后的字符串?dāng)?shù)組屬性保存，并在該類的設(shè)計中包含控件的寬度、高度、播放間隔時間等屬性，以及播放、暫停、加速和減速等方法。其中播放控件功能為按照設(shè)定的間隔時間順序向容器中加載離散點等值面渲染圖像，暫停控件實現(xiàn)暫停播放功能，加速和減速控件可以通過減少和增加時間間隔實現(xiàn)離散點等值面渲染圖像加速和放慢的可視化效果。

2.3 投影變換模塊設(shè)計

投影的數(shù)學(xué)含義是建立2個點集間一一對應(yīng)的映射關(guān)系［8］。在本研究實踐過程中，多次運用地理坐標(biāo)系統(tǒng)和屏幕顯示系統(tǒng)之間的投影轉(zhuǎn)換，有機保證離散點等值面渲染、動態(tài)可視化功能與地理底圖在屏幕可視化時保持協(xié)調(diào)一致的映射關(guān)系。

2.3.1 離散點地理坐標(biāo)與屏幕坐標(biāo)投影轉(zhuǎn)換

在圖形渲染功能中，讀入離散點的數(shù)據(jù)為地理坐標(biāo)系中的X，Y值，在圖形渲染時需要將其轉(zhuǎn)換為屏幕坐標(biāo)，該投影轉(zhuǎn)換在處理離散時序空間數(shù)據(jù)時使用。具體程序如下:

其中:wx，wy為地理坐標(biāo)系下的 x，y值;sx，sy為屏幕坐標(biāo)系下的 x，y 值;m_sl，m_sr，m_st和 m_sb 為屏幕坐標(biāo)系下的左、右、上、下極值，數(shù)據(jù)自動獲取;m_xmax，m_xmin，m_ymax和 m_ymin為地理坐標(biāo)系下的x，y極值，通過讀取離散點數(shù)據(jù)文件獲取;fScale用于判斷當(dāng)前圖形形狀;加0.5目的是保證在屏幕坐標(biāo)都為整數(shù)情況下四舍五入。

2.3.2 等值面渲染圖投影配準(zhǔn)

通過尋找控制點的方式，將等值面渲染圖配準(zhǔn)投影到地理坐標(biāo)系中，使之能與地理底圖協(xié)調(diào)展示，并得到等值面渲染圖左上角和右下角在地理坐標(biāo)系中的對應(yīng)位置，用于等值面渲染圖同步投影轉(zhuǎn)換。在離散點不發(fā)生變化的條件下，系統(tǒng)只做一次投影配準(zhǔn)。

2.3.3 等值面渲染圖同步投影轉(zhuǎn)換

ArcIMS客戶端用戶地圖操作(如放大、縮小、平移等)帶來等值面渲染圖隨之同步的投影轉(zhuǎn)換。該投影轉(zhuǎn)換在客戶端用戶每次進行地圖操作時均會觸發(fā)執(zhí)行。具體實現(xiàn)方式如下:

var iWidth=630;

var iHeight=512

xDistance=Math.abs(eRight－eLeft);

yDistance=Math.abs(eTop－ eBottom);

pixelX=xDistance/iWidth;

pixelY=yDistance/iHeight;

theY=iHeight－zTop;

eTop=pixelY·theY+eBottom;

eRight=pixelX·zRight+eLeft;

eLeft=pixelX·zLeft+eLeft;

theY=iHeight－zBottom;

eBottom=pixelY·theY+eBottom。

其中:pixelX，pixelY為地理坐標(biāo)下X，Y方向上的距離和屏幕長寬之比，eRight，eLeft，eTop和eBottom為當(dāng)前地理坐標(biāo)，單位(°)或 m;zRight，zLeft，zTop 和zBottom為經(jīng)過GIS放大、縮小及移動操作后的圖像坐標(biāo)，單位為像素;其他物理量意義如圖2所示。

圖2 投影轉(zhuǎn)換Fig.2 Projection transformation

當(dāng)系統(tǒng)圖形顯示區(qū)域發(fā)生變化時會觸發(fā)ReLoad()事件，該事件通過屏幕獲取最新iHeight和iWidth。xDistance和yDistance是當(dāng)前顯示范圍內(nèi)、在當(dāng)前地理坐標(biāo)系下X方向和Y方向上的距離;通過對比前臺圖像分辨率和后臺地理坐標(biāo)系，設(shè)立對應(yīng)關(guān)系，將前臺對圖像的GIS操作(放大、縮小、移動)轉(zhuǎn)換為地理坐標(biāo)系下的操作，并通過

算法將轉(zhuǎn)換參數(shù)保存到內(nèi)存中。式中，mapx和mapy是等值面渲染圖的圖像坐標(biāo)，利用ArcIMS庫函數(shù)將地理坐標(biāo)轉(zhuǎn)換為屏幕坐標(biāo)。通過調(diào)用當(dāng)前地圖窗口的xDistance和 yDistance值、eLeft和 eBottom值以及iWidth和iHeight值進行投影轉(zhuǎn)換，從而得到圖像坐標(biāo) picl，picr，pict和 picb(單位為像素)。結(jié)合配準(zhǔn)后得到的等值面渲染圖地理坐標(biāo)，將等值面渲染圖和ArcIMS地理底圖實現(xiàn)在同坐標(biāo)系下的疊加顯示效果。

3 應(yīng)用實例

以對某水庫實時監(jiān)測與預(yù)警應(yīng)用為例。首先，輸入與流域內(nèi)污染事故相關(guān)的參數(shù)，通過污染物模型演算獲得水庫各個時刻的空間離散點污染物濃度值數(shù)據(jù);然后，對該數(shù)據(jù)進行網(wǎng)格化處理，利用OpenGL技術(shù)將數(shù)據(jù)渲染成為一個時間系列的污染物濃度等值面圖;最后，通過在WebGIS前臺開發(fā)的動畫播放組件，實現(xiàn)該等值面渲染圖和WebGIS中地理底圖的一體化動態(tài)可視化(圖3)。

圖3 各時序污染物的擴散可視化Fig.3 The time series of contaminant diffusion visualization

可以看出，通過可視化技術(shù)建立的水環(huán)境監(jiān)測與預(yù)警應(yīng)急系統(tǒng)，能直觀反映突發(fā)性水環(huán)境污染事故所造成的污染物擴散情況，為相關(guān)部門應(yīng)急處置的快速決策提供依據(jù)，對保證人民群眾的生命安全具有重要意義。

4 結(jié)論

本文利用WebGIS平臺，結(jié)合計算機圖形圖像學(xué)、網(wǎng)絡(luò)地理信息系統(tǒng)以及計算機網(wǎng)頁技術(shù)等領(lǐng)域的研究進展，應(yīng)用OpenGL技術(shù)進行離散時序空間數(shù)據(jù)的快速渲染;運用Ajax和JavaScript等技術(shù)進行異步請求并處理響應(yīng)，實現(xiàn)了離散時序空間數(shù)據(jù)的解析、渲染和地理底圖的快速一體化動態(tài)可視化。該技術(shù)方法具有通用性，可以通過網(wǎng)絡(luò)平臺廣泛應(yīng)用于各類離散時序空間數(shù)據(jù)的監(jiān)控(如對環(huán)境污染擴散)與預(yù)警(對模型數(shù)據(jù))，為政府部門的科學(xué)決策和應(yīng)急響應(yīng)提供依據(jù)。

［1］李衛(wèi)東，單新建，張國宏.ArcIMS添加服務(wù)器端動態(tài)圖層技術(shù)的實現(xiàn)［J］.微計算機信息，2008，24(3):148 －150.

［2］周筠珺，李 展，瞿 婞，等.基于Google Earth的氣象多參數(shù)綜合顯示系統(tǒng)［J］.地理空間信息，2010，8(4):16 －19.

［3］李旭文，黎 剛，繆蓓蓓.Google Earth和ArcGIS9.2軟件在太湖水污染及藍藻監(jiān)測數(shù)據(jù)展現(xiàn)中的應(yīng)用［J］.國土資源遙感，2008(1):97－99.

［4］劉兆平，楊 進，武 煒.地球物理數(shù)據(jù)網(wǎng)格化方法的選取［J］.物探與化探，2010，34(1):93 －97.

［5］郭良輝，孟小紅，郭志宏，等.地球物理不規(guī)則分布數(shù)據(jù)的空間網(wǎng)格化法［J］.物探與化探，2005，29(5):438 －442.

［6］Lo S H.Delaunay Triangulation of Non － convex Planar Domains［J］.International Journal for Numerical Methods in Engineering，1989，28(11):2695 －2707.

［7］Macedonia G，PareschiM T.An Algorithm for the Triangulation of Arbitrarily Distributed Points:Applications to Volume Estimate and Terrain Fitting［J］.Computers ＆ Geosciences，1991，17(7):859 －874.

［8］姚 燕，朱 江，薛 蕾.WebGIS在氣象通信信息系統(tǒng)中的應(yīng)用與研究［J］.計算機工程，2008，34(10):271 －273.

A Study of Dynamic Visualization of Discrete Spatial－temporal Data on WebGIS Platform

WANG Yi1，ZHOU Xun1，ZHOU Wei1，LI Fei2
(1.China Aero Geophysical Survey ＆ Remote Sensing Center for Land and Resources，Beijing 100083，China;2.Center of Hebei Remote Sensing，Shijiazhuang 050021，China)

Most earth observation and monitoring data are discrete spatial－ temporal data of massive volumes，and the efficient management，analysis and visualization of these data for decision making support constitute a very challenging task in information system construction.This study combines the latest techniques，such as OpenGL，Ajax and JavaScript on a WebGIS platform to flexibly manage and display various discrete data with fast integrated dynamic mode.The technology developed can be widely applied to monitoring various spatial－temporal discrete data such as environmental pollution diffusion data and making forewarning so as to support emergency decision－making.

WebGIS;discrete spatial－temporal data;dynamic visualization;OpenGL

TP 79

A

1001－070X(2012)02－0143－05

王 軼(1972－)，男，高級工程師，主要從事遙感與地理信息系統(tǒng)方面的應(yīng)用與研究。E－mail:wangyi@agrs.cn。

(責(zé)任編輯:刁淑娟)

10.6046/gtzyyg.2012.02.26

2011－02－12;

2011－03－05