羅嬌
(徐州市勘察測繪研究院,江蘇徐州 221000)
基于Flex的城市基礎地理數據發布系統的設計與實現
羅嬌?
(徐州市勘察測繪研究院,江蘇徐州 221000)
利用Adobe Flash Builder(Flex編譯軟件)設計實現基于Flex的城市基礎地理數據發布系統。充分利用Flex自身組件的特性,與地圖元素相結合,完成城市地圖的繪制、瀏覽、GIS功能等的設計,成功將原始城市地理數據發布。利用Flex RIA實現Web城市地理數據發布系統具有表現力強、交互性強等諸多優勢。不使用API的基于底層的開發也使系統更具原創性、數據通用性,同時也增加了程序的可拓展性。
Flex;WebGIS;地理數據;發布系統
地理信息系統(GIS)是以地理空間數據庫為基礎,采用地理模型分析方法,適時提供多種空間的和動態的地理信息,為地理研究和地理決策服務的計算機技術系統。近幾年來,隨著計算機技術迅猛發展,計算機網絡技術尤其是Internet迅速普及,這都為GIS的發展帶來了極大便利,同時也為GIS理論及技術研究提供了新的領域。GIS技術與Web技術相結合已成為必然的趨勢,WebGIS就在這種背景下應運而生[1]。而此同時WebGIS也正逐步成為GIS應用的一種重要方式,Google、百度等各大網站相繼推出可以在瀏覽器中實現測量,地圖搜索等功能的Web地圖服務。而用戶對于Web地圖的要求也越來越高,不再滿足于簡單的瀏覽和單調的查詢,豐富的界面視覺效果,良好的操作體驗已成為廣大用戶對于Web地圖的普遍需求。
本文所研究的基于Flex的城市基礎地理信息發布系統能整合現有Web地圖應用成功案例如百度地圖、Google地圖等,Flex應用于Web地圖的成功案例如雅虎地圖等的基本地圖功能,取長補短,并實現便于用戶使用和操作地圖的一些增補功能。在不使用諸如WebGISAPI for Flex,Google Maps API for Flash等Flex Web地圖發布插件和接口的情況下,只利用Flex自身提供的組件設計界面模板,自編各種地圖功能算法,實現基于程序設計語言(Flex)的底層開發的地理數據發布系統,對Flex RIA應用于城市基礎地理數據發布中涉及的諸如Flex組件使用,地圖繪制,地圖功能實現等細節內容有一定的參考價值。為GIS走向大眾化、網絡化提供了一種原創的方法[2,3]。
2.1 城市基礎地理數據
對于一座特定的城市來說,其地理數據是描述其自身特征的最基本的數據。城市基礎地理數據的空間特征數據包括地形信息、地籍邊界、政區界面、道路信息、水系信息、各種點狀地物的位置信息等等,而屬性特征數據則包括規劃、人口、土地、環保、交通、地物名稱等。有了這些數據,就可以繪制一個城市的基本地形,地物以及各種專題地圖,也可以在地圖上進行一些相關的空間分析,屬性查詢,統計等任務。
(1)SHP數據格式
本文所設計的系統最初的數據格式就是SHP格式。
SHP(Shape)格式文件由Esri開發,一個Esri的shape文件包括一個主文件,一個索引文件,和一個dBASE表,其中主文件的后綴就是.SHP。SHP是點陣文件,由固定長度的文件頭和接著的變長度記錄組成。每個變長度記錄由固定長度的記錄頭和接著的變長度記錄內容組成。主文件是一個直接存取,變量記錄長度文件,其中每個記錄描述一個有它自己的vertices列表的shape。在索引文件中,每個記錄包含對應主文件記錄離主文件頭開始的偏移,dBASE表包含一個記錄的feature的特征。幾何和屬性間的一一對應關系是基于記錄數目的。在dBASE文件中的屬性記錄必須和主文件中的記錄是相同順序的。主文件,索引文件和dBASE文件有相同的前綴。前綴必須是由字符或數字(a-Z,0-9)開始,后跟0到7個字符(a-Z,0-9)主文件的后綴是.SHP,索引文件的后綴是.SHX,dBASE表的后綴是.DBF。由ArcGIS矢量化地圖得到的數據就是SHP格式的數據。
(2)XML數據格式
Flex在數據通信方面,無法直接和數據庫進行連接,只有借助HttpService等服務來間接的鏈接數據庫,其交互的數據格式就是XML格式。XML(Extensible Markup Language),即可擴展標記語言,它與HTML一樣,都是SGML(Standard Generalized Markup Language,標準通用標記語言)。但其功能比HTML更強大,兩者的主要區別在于:XML側重描述Web頁面的內容,而HTML側重于描述Web頁面的現實格式。XML是Internet環境中跨平臺的,依賴于內容的技術,是當前處理結構化文檔信息的有力工具。XML也是一種簡單的數據存儲語言,使用一系列簡單的標記描述數據,而這些標記可以用方便的方式建立,雖然XML占用的空間比二進制數據要占用更多的空間,但XML極其簡單易于使用。目前,WWW領域,XML得到了越來越多的重視,它可以成為一種“元語言”,用于定義特定領域的標記語言,同樣在空間信息的Internet發布中,也可以采用XML來定義地理信息的特定語言標記,以容易而一致的方式格式化傳輸數據。
本系統所用某市的城市道路數據的一段XML標記語言如下:

XML文檔由標記、元素和屬性三個部分組成:其中“<”和“>”之間的文本為標記,有開始標記<Polylines>和結束標記</Polylines>;Polylines標簽是XML的根元素,說明這個文檔表示折線圖層。根元素的孩子元素是Polyline,表示這個圖層的每一條折線,石門二路是這個元素的屬性信息。id元素標識折線經過點的信息,其孩子元素L,B標簽表示點的經緯度信息。這個類似于樹狀索引的XML文檔清晰的表達了圖層、道路、道路節點、節點坐標間的從屬關系,非常方便讀取和數據查詢等相關操作。
2.2 發布系統
數據發布,刨除城市基礎地理數據來說,發布就是表示思想、觀點、文章和意見等東西通過報紙、書刊或者公眾演講等形式(現在擴大到電視、網絡等)公之于眾。那么數據的發布就是把包括圖片、文字、動畫等各種各樣的數據形式以一種大家都能接觸到的形式展現出來。發布的內容可以是數據本身,也可以是基于數據展現出的一些圖形,動畫等。對于本文研究的發布系統,數據就是XML格式的空間位置數據和一些文本屬性數據。這些數據是描述一個城市的基本結構的,那么發布的內容就不能僅僅局限于數據本身,而要把數據繪制成圖形,以圖形的形式與用戶進行交互,這樣才能直觀體現數據本身的意義。交互的方式是利用網絡這個國際化的平臺,這也是Flex通過利用Flash Player的巨大裝機量可以實現的。數據發布系統是一些與發布數據相關聯的單元組成的一個整體[4]??梢岳斫鉃橐粋€與用戶交互的平臺,平臺的管理者負責設計平臺,更新、發布數據,維護平臺,客戶利用平臺獲取自己想要得到的信息。既然系統的目的是與客戶或者更廣泛的人群進行交互,那么一個好的發布系統必須具備以下特點:
(1)界面設計方面:友好的可視化界面,協調統一的色彩設計,合理的整體布局,以使整個系統界面布局清晰,簡約大方,風格統一,給人以耳目一新的感覺。
(2)功能設計方面:從用戶的角度出發,設計簡單實用性強的功能;功能工具欄應放在顯眼的位置,使用功能方便快捷,盡量滿足用戶的基本應有需求。
(3)操作方面:從用戶的角度出發,各種功能、窗口切換等的操作應方便快捷,用戶等待程序響應的時間不應長于10 s的限度。使用的組件,尤其是功能性組件應放在便于操作的位置,方便用戶。
(4)后臺數據支持方面:平臺應有強大的數據支持系統,只有好的源數據,才能在平臺上顯示出高質量的發布成果。好的數據格式也便于發布,縮短發布時間。
具備這些基本特點的發布系統,才能真正做到與用戶的交互,發布才能達到其真正的目的,才是一個好的發布系統。
3.1 系統開發環境配置
瀏覽器&插件:IE8.0+Flash Player 10
開發語言:Adobe Flash Builder 4.0(Flex4)
調試器:Flash Player 10 debug for IE
數據轉換:Microsoft Visual Studio 2010
界面美工(圖形資源):Adobe PhotoShop CS5
3.2 系統功能模塊
本系統功能模塊包括地圖控制模塊,查詢模塊,圖層控制模塊,空間分析模塊。
地圖控制模塊:包括地圖平移、縮放、還原等功能。通過鼠標拖動或者點擊面板中的方向按鈕實現地圖平移;通過鼠標滑輪滾動,滑動面板中的滑塊或者點擊面板中的放大縮小按鈕實現地圖縮放;通過點擊面板方向中心按鈕使地圖歸位到屏幕左上角;通過點擊面板中的“原”按鈕使地圖歸為到原有尺寸。
查詢模塊:包括根據屬性查詢各圖層信息等功能。在文本框中輸入要查詢的屬性信息,如道路名稱等,根據下拉面板中的近似選項,選取要查詢的屬性,點擊搜索按鈕,所查詢信息將在地圖中紅色顯示。
圖層控制模塊:控制各圖層顯示與否,調整各圖層顯示形式。
空間分析模塊:包括空間量算,區域分析,統計分析,標注與標注點緩沖區分析等功能。通過點擊面板第一個直尺按鈕后,在地圖中鼠標點擊一系列點,雙擊結束后彈出面板顯示所選擇各段線路的距離信息;點擊面板中的矩形,圓形,橢圓形,多邊形按鈕,在地圖中鼠標拖動選框,松開鼠標后,在彈出面板中顯示選取面積,選區的拓撲關系分析情況,統計選取內各地物的信息等;點擊面板中的最后一個按鈕,在地圖中點擊標記點,在彈出的對話框中添加標記點備注信息,并設置緩沖區半徑,進行緩沖區分析。
3.3 系統設計實現
現有數據為某市的SHP格式矢量數據(由ArcGIS矢量化地圖得到),在ArcGIS中將其逐圖層導出為txt格式的文本數據。使用Microsoft Visual Studio 2010 C#語言,通過StreamReader類將文本文件中的空間數據和屬性數據讀入List動態數組,使用XMLTextWriter類,將數組中的數據按格式寫入XML文件中并保存。該XML格式的數據文件即為系統使用的數據源。
(1)數據讀取與坐標轉換
使用UrlRequest類將外部XML數據讀入后,用UrlLoader類的load方法載入UrlRequest,為UrlLoader的實例添加Event.COMPLETE事件的偵聽,在其讀入完成事件中,將讀取到的數據賦予XML類[8]。遍歷XML,將其中的數據賦予Object對象。Object對象的鍵名有:name(表示地物名稱),data(Vector.<Number>類型,表示直線經過的點信息,若為點要素,其長度為2),commands(Vector.<int>類型,標識該對象的繪制方法),kind(表示地物類型點、線、面),num(表示該地物在此圖層的序號)。一次性批量逐圖層讀入數據,將每個圖層的信息存入Object的數組中,完成數據讀取。
本系統設計的坐標轉化有:大地坐標與高斯投影平面坐標的相互轉換;高斯投影平面坐標與屏幕坐標的相互轉換。其中大地坐標轉化為高斯投影平面坐標采用高斯投影正算電算公式,為限制投影變形,中央經線選取為121.4°(所給數據中心經度)。高斯平面坐標轉換為大地坐標采用高斯投影反算電算公式,中央經線同上。高斯投影平面坐標轉換為屏幕坐標,先將投影平面真實坐標的范圍求出后,將其縮放為400× 420的屏幕像素坐標范圍,然后計算平移量得到二者的轉換關系。反算為其逆運算。坐標轉化函數在數據讀取時調用,直接將XML中的大地坐標轉化為屏幕坐標存入Objcet數組中,作為后續一系列操作的基礎。
(2)地圖繪制與定位
在讀取數據過程中,根據圖層文件的數量,動態添加圖層組件Group,圖層顯示組件CheckBox和圖層顏色選擇組件ColorPicker。在繪制地圖的方法中調用各圖層Group的graphics方法,根據讀取到的Object數組,繪制相應的點、線、面,并為圖層動態添加Label組件,以在地圖上顯示地物的名稱信息[5]。其中,多邊形的名稱顯示位于其中心,顯示角度為0;直線名稱顯示位于其距離最長兩節點的中心,顯示角度為距離最長兩節點的斜率對應的角度;點的名稱顯示位于其坐標位置,顯示角度為0。初始繪制的某市地圖如圖1所示。

圖1 初始地圖繪制
根據鼠標點在地圖中的實時屏幕坐標,通過坐標平移得到此點的高斯投影平面坐標,進行高斯投影反算,得到該點真實的大地坐標,并顯示出來。在地圖坐標轉換的時候,縮放比例可以轉化為地圖的比例尺,也可以作為地圖的基本數據輸出顯示到定位信息中。圖2即為定位顯示的效果。

圖2 地圖定位
(3)地圖控制
在圖層Group組件中添加MouseDOWN事件的偵聽,在MouseDOWN事件中打開MouseMOVE和Mouse-UP事件的偵聽,通過MouseMOVE事件中對圖層組件坐標的更改,實現地圖的平移。在MouseUP事件中取消所有MouseMOVE和MouseUP的偵聽,使地圖固定。實例化一個Zoom效果組件,設計好Zoom的縮放中心,縮放大小等屬性后,將Zoom的target屬性設為圖層背景Image組件,調用Zoom的Play()方法,放大或者縮小Image的大小,根據縮放大小的屬性值,縮放地圖坐標數據的大小后,重繪地圖,實現地圖的縮放功能。最后,在圖層背景Image組件的Move事件中,修改各圖層坐標與Image組件坐標對齊,大小重合。

圖3 地圖放大效果圖
(4)圖層控制
由讀取數據時動態添加CheckBox組件和Color-Picker組件,其一一對應于動態添加的圖層Group組件,通過CheckBox的selected屬性為判斷條件,更改相應圖層Group的visable屬性,實現圖層顯示與否的功能。以ColorPicker組件的selectedcolor屬性為顏色參數,重繪地圖,實現圖層顏色樣式的修改。圖4為去掉其余圖層后道路圖層以紅色顯示的圖形。

圖4 圖層顯示
(5)屬性查詢
查詢搜索面板位于界面左側上部,功能實現:根據用戶輸入的屬性值,在TextInput組件的TextChange事件中,遍歷讀取到的XML數據,在數據中搜索所有與所輸入屬性值相關的全部信息,反饋到List組件中供用戶挑選。在List中,將用戶選擇的元素的文本值傳輸給TextInput組件,點擊搜索按鈕,根據List中獲取到的所選元素對應的對象Object,在地圖相應位置,根據Object中的坐標信息,以紅色線條繪制或填充所搜索目標。效果如圖5搜索“南京西路”。

圖5 搜索“南京西路”
(6)空間分析
距離量算位于界面頂部空間分析面板的第一個按鈕,點擊按鈕后,在按鈕所在ToggleButtonBar的item-Click事件中,為全局變量measureMode賦值為1,發出距離量算指令。為圖層添加鼠標事件的偵聽,在MouseMove事件中刷新圖層Group的graphics,后根據MouseDown事件中存入的坐標數據繪制直線,在MouseDoubleClick事件中結束繪制,并調用距離計算方法,計算好圖上距離后,根據實時地圖比例尺,計算出實際距離顯示給用戶。效果如圖6所示。

圖6 距離量算效果
三種分析的操作面板位于界面頂部的空間分析面板中,點擊按鈕后,在按鈕所在ToggleButtonBar的itemClick事件中,為全局變量measureMode賦值為2,3,4,5,發出空間分析指令。為圖層添加鼠標事件的偵聽,在MouseMove事件中刷新圖層Group的graphics,后根據MouseDown事件中存入的坐標數據繪制相應圖形并半透明填充,在MouseUP事件中彈出選取信息的MXML組件,為用戶顯示選區的面積、選區包含的數據信息、餅狀圖統計信息等,用戶點擊選取區內相應圖層的數據信息時,可以查詢選區內對應的目標,如圖7所示。

圖7 孔洞多邊形選區空間分析效果
(7)標記與標記點緩沖區分析
標記和標記點緩沖區分析位于界面上部的空間分析面板的最后一個按鈕,點擊按鈕后,在按鈕所在ToggleButtonBar的itemClick事件中,為全局變量measure-Mode賦值為6,發出標記指令。為圖層添加鼠標事件的偵聽,在MouseUP事件中繪制標記點,并彈出標注MXML組件,為用戶顯示標記點的大地坐標,還可以由用戶自定義添加標注點的備注信息。用戶在彈出的“創建緩沖區”panel組件中,可以手動輸入緩沖區半徑,以千米為單位,點擊創建按鈕,程序自動彈出緩沖區分析的結果。效果如圖8和圖9。

圖8 標記、創建緩沖區圖

圖9 標記點緩沖區分析
隨著Internet技術的飛速發展,計算機硬件的不斷更新,GIS網絡化已成為必然趨勢。當前,WebGIS、Web地圖發布、地理數據共享已在互聯網中廣泛應用,大眾對其的要求也越來越高,不再滿足于簡單乏味的地圖瀏覽和查詢,人們希望在網絡地圖中得到更多的人機交互體驗和視覺體驗,而Flex RIA技術的出現,恰恰能滿足人們的這一需求[6]。本文在充分研究Flex RIA技術和現有WebGIS技術的基礎上,綜合各大網絡地圖的特點,基于Flex底層設計實現了一個風格簡約,基本功能齊全,用戶體驗感強的城市基礎地理數據的發布系統,為Flex在WebGIS中的應用提供一個可參考的模型系統。
[1] 孟令奎,史文中,張鵬林.網絡地理信息系統原理與技術[M].北京:科學出版社,2005,3(1):127~129.
[2] 黃娟.基于Flex RIA的Web地圖發布技術及其應用研究[D].成都:西南交通大學,2010.
[3] Josbua Noble&Todd Anderson&Gartb Braitbwaite&Marco casario&Ricb Tretola.Flex4 Cookbook[M].May 2010 FirstEdition.Published ByO’Reilly Media,Inc.1005 Gravenstein Highway North,Sebastopol,CA95472,2010(5).
[4] 姜天格.Flex3企業級Web應用系統設計與實現[M].北京:機械工業出版社,2008.
[5] 祝國瑞.地圖學[M].2004年1月第1版.武漢:武漢大學出版社,2009.1:95~100.
[6] Rong Yao,Wang Jiandong,Ding Jianli.RIA-based visualization platform of flight delay intelligent prediction[A].ISECS. 2009(2):94~97.
Design and Im plementation of City Basic Geographic Data Release System Based on Flex
Luo Jiao
(Xuzhou Geotechnical Engineering and Surveying Institute,Xuzhou 221000,China)
The paper is about using Adobe Flash Builder(Flex compiled software)to design and achieve a paragraph of city basic geographic data release system based on Flex.The release system do not use any present Web map APIs (application programming interface).It beginswith the basic development,and releases the city geographic data successfully bymaking full use of the characteristics of Flex’s components and being combined with themap elements,to complete citymap drawing,browsing,GIS functions’design.The research shows that the Flex RIA realize to Web city geographic data release system hasmany advantages such as strong expressiveness,strong interactivity and so on.The system,do not use the APIs and begin with the basic development,which ismore originality,data generally,and also increased the program expanding.This paper’s research has a reference value of Flex RIA applied to the geographic data release system by Web map.
Flex;RIA;WebGIS;Geographic Data;Release System
1672-8262(2013)01-38-06
P208.2 文獻標識碼:A
2012—08—30
羅嬌(1988—),女,助理工程師,研究方向:攝影測量與遙感及三維數字城市建設。
國家自然科學基金資助項目(41101442)