基于WebGIS的離散時序空間數據動態可視化研究

王 軼，周 迅，周 偉，李 飛

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

基于WebGIS的離散時序空間數據動態可視化研究

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

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

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

WebGIS;離散時序空間數據;動態可視化;OpenGL;

0 引言

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

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

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

1 技術方法

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

2 模塊設計

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

2.1 等值面渲染組件模塊設計

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

2.1.1 離散空間數據網格化

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

2.1.2 數據加載

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

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

2.1.3 設備初始化

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

2.1.4 區域邊界截取和顏色設置

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

2.1.5 多邊形渲染

根據保存在m_Net數組中的網格結構，依次讀取每個網格離散點數據并進行渲染。本文的每個網格包含3個網格點，使用OpenGL中的GLVERTEX2F函數對三角形進行漸進色設置，通過調用GLFLUSH函數刷新內存并保存經過渲染的圖像。

2.1.6 圖像和XML文件輸出

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

2.2 一體化動態可視化模塊設計

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

2.2.1 基于Ajax的等值面渲染組件功能調用

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

2.2.2 XML 解析

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

2.2.3 動態可視化

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

2.3 投影變換模塊設計

投影的數學含義是建立2個點集間一一對應的映射關系［8］。在本研究實踐過程中，多次運用地理坐標系統和屏幕顯示系統之間的投影轉換，有機保證離散點等值面渲染、動態可視化功能與地理底圖在屏幕可視化時保持協調一致的映射關系。

2.3.1 離散點地理坐標與屏幕坐標投影轉換

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

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

2.3.2 等值面渲染圖投影配準

通過尋找控制點的方式，將等值面渲染圖配準投影到地理坐標系中，使之能與地理底圖協調展示，并得到等值面渲染圖左上角和右下角在地理坐標系中的對應位置，用于等值面渲染圖同步投影轉換。在離散點不發生變化的條件下，系統只做一次投影配準。

2.3.3 等值面渲染圖同步投影轉換

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

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為地理坐標下X，Y方向上的距離和屏幕長寬之比，eRight，eLeft，eTop和eBottom為當前地理坐標，單位(°)或 m;zRight，zLeft，zTop 和zBottom為經過GIS放大、縮小及移動操作后的圖像坐標，單位為像素;其他物理量意義如圖2所示。

圖2 投影轉換Fig.2 Projection transformation

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

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

3 應用實例

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

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

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

4 結論

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

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

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

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

［4］劉兆平，楊 進，武 煒.地球物理數據網格化方法的選?。跩］.物探與化探，2010，34(1):93 －97.

［5］郭良輝，孟小紅，郭志宏，等.地球物理不規則分布數據的空間網格化法［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在氣象通信信息系統中的應用與研究［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－)，男，高級工程師，主要從事遙感與地理信息系統方面的應用與研究。E－mail:wangyi@agrs.cn。

(責任編輯:刁淑娟)

10.6046/gtzyyg.2012.02.26

2011－02－12;

2011－03－05