基于Flex的WebGIS客戶端及其應用

何貞銘，胡小夏，劉學鋒

（1.長江大學 地球科學學院，湖北 武漢 430100）

基于Flex的WebGIS客戶端及其應用

何貞銘1，胡小夏1，劉學鋒1

（1.長江大學 地球科學學院，湖北 武漢 430100）

通過對RIA技術與Flex開發模型的介紹，分析了基于Flex的WebGIS客戶端框架層次結構及其相互之間的關系，并以武漢市直管公房地理信息系統為例，實現了Flex框架下WebGIS客戶端的構建。

WebGIS；Flex；客戶端；RIA

近幾年，在Web領域出現了富互聯網應用（RIA）技術，為WebGIS客戶端的發展帶來新的契機。RIA具有高度互動性、豐富的用戶體驗和功能強大的客戶端，同時也具有桌面應用程序和Web應用程序的雙重特點。Flex通常是指Adobe Flex，是一個用于構建具有表現力的Web應用程序，涵蓋了支持RIA的開發和部署的一系列技術組合，是RIA技術運用的完美體現。基于Flex創建的界面表現能力一流，解決了異步調用、界面無刷新和跨平臺部署的問題，并且對于流媒體技術的支持最好。本文討論以RIA技術為核心的Flex框架代替傳統的客戶端模式在WebGIS客戶端實現中的應用。

1 傳統WebGIS客戶端模式

1.1 CGI模式

CGI是萬維網最重要的技術之一，是外部應用程序與Web服務器之間的接口標準，是在CGI程序和Web服務器之間傳遞信息的規程[1]。依賴CGI技術實現的WebGIS工作模式為：用戶通過對Web瀏覽器的操作，向Web服務器發出請求，運行于Web服務器上的CGI程序依據程序指令將請求發送至GIS服務器或直接在Web服務器上處理，GIS數據的處理主要在GIS服務器上完成，并由GIS服務器將處理好的結果返回給Web服務器，再至客戶端。基于CGI的WebGIS體系結構如圖1所示。

由于基于CGI模式的WebGIS客戶端請求都集中在服務器上進行處理，當大量用戶同時對其發出請求時，CGI程序的反應速度會明顯減慢，Web服務器的速度也受到限制，經常發生頁面白屏現象。

1.2 Plug-in模式

圖1 基于CGI的WebGIS體系結構圖

Plug-in譯為插件，是一種計算機應用程序。基于Plug-in的WebGIS可將少數簡單的GIS數據，直接在客戶端進行處理，無需請求服務器。這種方式減輕了服務器的工作量，也減少了網絡數據傳輸量。插件依賴于主應用程序，不能獨立使用，通常在WebGIS客戶端中運用的插件只是在客戶端增加一個具有圖形識別能力的應用程序，對主應用程序進行一系列的功能擴展，利用這些擴展能力處理用戶部分請求，使客戶端承擔部分負擔來減輕服務器和網絡的壓力[2]。但是，這種模式并不能從根本上解決請求響應速度緩慢的問題，同時由于瀏覽器的不同，開發插件運用的語言不同，不利于用戶在后續使用過程中插件的更新和版本控制。

1.3 JavaApplet 與ActiveX控件

JavaApplet 與ActiveX控件是早期RIA技術運用的體現，都需要嵌入網頁中運行，功能強，但與服務端耦合程度高，初次使用時需下載安裝相應程序[3,4]。這2種技術在WebGIS運用中頗為類似，客戶端瀏覽器向服務器發出GIS數據處理請求，服務器接收到請求后，向客戶端返回GIS相關的JavaApplet 或ActiveX控件和GIS數據，并利用服務器返回的控件處理GIS數據。基于ActiveX控件的WebGIS系統結構如圖2所示。JavaApplet可在Java環境下運用，當用戶使用支持Java瀏覽器訪問Java支持的網頁時，Applet會被下載到本地計算機上執行，因此Applet的執行速度完全不受網絡的影響。但是，由于瀏覽器對JavaApplet的支持有限，使得基于JavaApplet的WebGIS開發和應用也受到了限制。ActiveX控件只適用于Windows平臺，有一定的操作系統限制，且其安全性差，無法滿足良好性能的WebGIS客戶端的實現條件。

圖2 基于ActiveX控件的WebGIS系統結構圖

2 基于Flex的WebGIS客戶端技術與實現

2.1 Flex開發模型

Flex是一個高效、免費、基于組件的開源框架，以RIA技術為核心，著力于表現層的構建，采用GUI界面開發方式，使用基于XML的MXML標記語言。Flex開發框架主要由5個部分組成：用于描述應用程序界面的MXML語言、構建數據模型的ActionScript腳本語言、一個基礎類庫、運行時的即時服務和編譯器。MXML通常被用于用戶界面元素的定義，而使用ActionScript腳本語言來定義客戶邏輯和過程控制。Flex類庫為開發者提供了大量的組件、管理器和行為[5]。把運行中的MXML和ActionScript編譯成Flash應用程序，編譯后的應用程序可直接運行于Flash播放器或含有Flash播放插件的瀏覽器上。Flex開發模型如圖3所示。

2.2 Flex與服務端的通信

基于Flex的WebGIS系統的表現層和邏輯層是完全分離的，故客戶端與服務器的通信依賴于遠程服務訪問。Flex框架下開發的客戶端與服務器之間的數據通信方式有HttpService、WebService和Remoting。在Flex應用程序中調用HttpService對象send方法時，向服務端發出對指定URL的HTTP請求，并返回HTTP響應。Flex支持格式設置為SOAP的消息且通過HTTP傳輸的Web服務請求和結果。SOAP提供基于XML格式的定義，用于Flex應用程序和Web服務之間交換結構化和類型化信息[6]。Remoting通信方式則是通過訪問通道以獲得服務端對象，并將該服務對象通過序列化在客戶端運行[7]。每種數據通信方式都有各自的特點，在運用時可根據環境需要選擇合適的方式。本文中主要選用WebService的通信方式。

2.3 ArcGIS API for Flex

ArcGIS API for Flex是一款由ESRI公司推出的，用于富互聯網應用程序開發的應用程序接口，通過Flex API可將ArcGIS Server提供的地圖資源和其他資源嵌入到Web應用中。Flex API為開發者在開發基于Flex 的Web應用程序過程中，提供了GIS組件，使系統開發的工作具有一個快速、便捷的起點。

2.4 基于Flex的WebGIS客戶端框架與實現

基于Flex的WebGIS客戶端是利用Flex API和Flex開發模型框架來設計與實現的，在邏輯結構上，基本可分為8個主要架構元素，如圖4所示。

圖4 WebGIS客戶端架構圖

ViewerContainer是所有其他架構元素的根節點，作為一個實例化容器管理客戶端頁面上其他組件的實例，從整體框架入口啟動系統程序時，ViewerContainer最先創建實例并初始化。

ConfigManager主要負責整個系統的config文件加載和配置信息的解析，并將解析后的信息存儲于數據結構configData中，通過觸發AppEvent.CONFIG_LOADED將configData統一發布給其他組件使用。

UIManager根據配置文件中描述的客戶端界面風格，配置信息定義一套系統的UI樣式表。

ControlBar主要為客戶端界面的搭建提供一系列常用的組件，如菜單選項、工具欄等。

MapManager是整個框架中地圖管理的核心，地圖管理器負責根據config文件中的配置信息初始化地圖控件、加載地圖圖層，并提供對地圖瀏覽、圖層切換、在線編輯、地圖導航等事件的響應。

WidgetManager是對整個WebGIS應用框架中系統功能模塊的管理。一個Widget封裝了一系列獨立且針對性強的業務邏輯，用戶可通過其完成一系列的任務。

DataManager管理并維護系統內部的公共數據，使得系統中的各組件與Widget均能將公共數據發布到DataManager中或從中獲取其他組件發布的數據，從而實現各組件與微件之間的數據共享。

EventBus為事件總線，是不同組件之間進行信息傳遞的核心，負責整個系統客戶端事件的分發與監聽，實現同級組件、跨級組件之間的數據交互。

基于Flex框架的WebGIS客戶端應用程序從設計到實現大致包括5個步驟：

1） Flash播放器或帶有Flash播放插件的瀏覽器加載并運行系統編譯的swf文件；

2） 客戶端應用框架加載XML格式的配置文件與客戶端界面樣式文件，用于客戶端應用程序；

3） 根據應用程序配置文件中提供的地圖相關服務地址，從GIS服務器上下載并加載地圖信息；

4） 應用程序中微件管理器根據config文件中指定的URL，獲取相關的微件文件，并進行加載；

5） 客戶端各組件加載完畢，等待用戶進行交互。

基于上述架構設計實現的WebGIS客戶端具有低耦合、高內聚的特點[8]。對于系統開發者來說，這種方式不但簡化了代碼的維護和定制，還減小了模塊編寫過程中的阻力。根據職能的不同，將整個框架分為不同的管理模塊，使得系統架構層次清晰明了，有利于后期的程序擴展。

3 應用實例

本文以武漢市直管公房地理信息系統為例，實現基于Flex框架的WebGIS客戶端設計。利用ArcGIS Server發布地圖服務，將發布的地圖服務的URL寫入config配置文件，并在配置文件中指定每個微件的URL，以便獲取地圖和微件的相關信息。在程序中創建一個主頁面FrmMain.mxml，指定為整個程序的入口，統一集中加載、初始化系統的主構架組件。本系統界面主要分為6部分（見圖5）：界面頂端菜單欄中包括了統計分析模塊、樓盤表管理模塊、專題圖模塊和地圖輸出模塊，位于界面右端的地圖基礎操作模塊以及界面左端的優保建筑管理模塊。依據Flex高度支持流媒體的特點，在本系統中嵌入了圖片、視頻等豐富的多媒體文件，增強了界面的表現能力，并基于Flex的強大動畫特效，使得本系統具有良好的用戶體驗。另外，依據RIA技術的特性，整個系統也可部署在網絡的桌面程序中，不需要等待頁面刷新來返回結果，可進行異步響應，用戶可同時進行其他操作，使得用戶操作與界面表達流暢。

圖5 系統界面圖

[1] 張成才，孫喜梅，朱淘業.幾種流行網絡地理信息系統的模式比較研究[J].計算機工程與應用，2002,15:77-79

[2] 施晶晶，馬勁松.基于ActiveX控件的WebGIS設計原理[J].計算機應用，2001(7)：68-69

[3] 鐘廣銳.基于Ajax的WebGIS客戶端解決方案研究[J].測繪科學，2007,32(5)：178-179

[4] 賈靜，耿襯.基于ArcGIS API for Flex的Web應用初探[J].地理空間信息，2012,10(3)：114-118

[5] 劉俊，譚建軍，邵長高. 基于Flex的WebGIS框架設計與實現[J].計算機工程，2010,36(10):242-244

[6] 胡方霞，曾一，高旻.Web Services技術應用與探討[J].計算機科學，2007，34(3):75-77

[7] 高曉川. Flash Remoting淺析[J].計算機與網絡，2006(22):53-54

[8] ESRI. FlexViewer Develope's Guide[EB/OL]. http://game.esrichina-bj.cn/,2008-11-21

Research and Application of WebGIS Client Based on Flex

byHE Zhenming

According to the description of RIA and Flex development model, the hierarchy and relationship of WebGIS client framework based on Flex was analyzed in this paper. And taking geographic information system of state-owned real estate of Wuhan for example,WebGIS client based on Flex framework was achieved.

WebGIS, Flex, client, RIA

P208

B

1672-4623（2014）02-0104-03

10.11709/j.issn.1672-4623.2014.02.036

2013-06-20。

項目來源：國家自然科學基金資助項目（41272136）。

何貞銘，碩士生導師，研究方向為GIS研究及其應用。