基于SVG的WebGIS的設計與實現

摘 要： SVG具有放縮自如、文本獨立、顯示效果超強、交互控制性強等優點，在WebGIS中有非常強的適用性。先設計了基于SVG的WebGIS系統總體模型，然后對關鍵技術腳本動態操作SVG方式做了詳細分析，最后對此設計模型在交通及物流行業的應用前景做了簡要介紹。

關鍵詞： SVG； WebGIS； 腳本； 交互控制

中圖分類號： TN911.7?34 文獻標識碼： A 文章編號： 1004?373X（2013）17?0137?03

0 引 言

隨著Internet技術與GIS技術的發展， WebGIS為GIS的發展開辟了新的空間，這有助于GIS信息的高度社會化共享盡早實現。不僅如此，也為GIS信息的提供者和使用者提供了便利，從而更加促進了GIS的快速發展。Internet技術的支持也使WebGIS的優勢更加明顯，比如WebGIS的信息更新頻率更快使得消息到達更加及時、發布速度更快并且范圍更廣，這些優點使得WebGIS明顯優于其他傳統地理信息系統。

由于地圖數據復雜且數量大，為了保證在客戶端能夠通過瀏覽器快捷并高效地查看地圖數據，必須在地圖數據的處理及顯示發布方法上做更多的改進，這為WebGIS的實現帶來了更大的挑戰。XML技術為Web地圖矢量數據的顯示發布提供了新的方法，即可縮放矢量圖形SVG，它很好地解決了地圖數據共享及互操作的關鍵問題[1?2]。

SVG在WebGIS應用中最顯著的優點是地圖圖像縮放不失真，且地圖數據存儲文件小。此外，通過結合分布式體系結構，很好地平衡了服務器負載，并充分應用了客戶端的處理功能，從而提高了地圖數據處理的效率。

1 SVG與WebGIS技術介紹

1.1 WebGIS優勢及關鍵技術

WebGIS訪問范圍很廣泛，這是與較為傳統的基于桌面的GIS相比較為明顯的優勢。即使是多個位于不同位置服務器的最新數據，客戶也能夠同時訪問到。這種Internet/Intranet所特有的優勢使得GIS的數據管理避免了不必要的操作，更為便利；除此之外，其軟件成本與維護成本均較低；并且操作簡單，只需瀏覽器操作即可。

分布式系統服務器可分散安裝于多臺機器上，且不受空間限制，只要能通過互聯便可。這種方式的優點是分散單個服務器負載，優化了訪問速度，這便是基于分布式的WebGIS系統。分布式服務體系結構可以很好地使客戶端和服務器端之間的處理負載保持平衡。WebGIS的分布式系統結構如圖1所示。

分布式體系結構在一定程度上很好地分擔了服務器的數據承載量，但是服務器端的數據量仍沒有變化，而基于SVG的WebGIS設計模型則很好地利用了客戶端資源，減少了服務器端的數據量，提高了GIS數據的顯示與發布效率。

1.2 SVG技術

SVG運用XML語言來描述矢量圖形、位圖圖像和文字，它是按照 W3C 標準基于 XML 的成像模型，它使 Web 開發人員、設計人員和用戶能夠擺脫 HTML 的限制，并通過一個簡單的說明性編程模型創建豐富的視覺內容和交互功能。SVG完全支持文檔對象模型，且由程序語言動態生成，并且可以跨平臺作業。

SVG提供了大量針對圖形、圖像、動畫的特定標記，大大豐富了網頁顯示效果，同時減小了文件長度，縮短了傳輸時間。它還支持腳本語言，尤其是可以創建具有動態的、數據驅動的、交互式圖形、圖像。它將對圖形效果的編輯和顯示任務由服務器端移到客戶端，可充分利用客戶端的資源，從而減輕了服務器的負擔。SVG的諸多優點使其非常適合運用于WebGIS[3]。

SVG文檔結構樣式定義了SVG圖元怎樣被渲染，描述了一個對象怎樣被繪制，以及定義了文本參數、坐標系統、SVG視區、視區坐標系和用戶坐標系。 圖形對象有直線（line）、路徑（path）、圓（circle）、圖標（symbol）、文字（text）、圖像（image）等。路徑是一個圖形的輪廓，它的動作有Moveto、lineto、arc等，其交互性通過腳本控制，腳本可以修改對象屬性。

SVG 瀏覽器的上下文環境包含的對象有SVG本身作為 XML 文檔所包含的 DOM 對象，還有因瀏覽器差異而產生的其他對象 [4]。具體對象結構如圖2所示。

SVG主要使用的對象變量共有5個，分別是Window、Document、rootElement、contextMunu、element。Window顧名思義，指的是WebGIS瀏覽器運行窗口，Document主要負責對SVG文檔的操作與處理，通過腳本來完成。contextMenu變量的作用與Document類似，只是擴展了鼠標右鍵操作彈出菜單功能。rootElement和element均是對SVG元素進行操作，只是前者是對根元素進行操作，而后者是對節點元素進行操作。

2 基于SVG的WebGIS系統設計與實現

2.1 系統設計模型

基于SVG的WebGIS系統主要由基于服務器端的WebService和基于客戶端的SVG腳本文件及Web頁面兩部分構成。系統具體結構圖如圖3所示。

服務器端WebService 的主要作用是：從地圖基本信息庫中取得一副圖指定層的數據，然后取得指定圖幅中的層列表、指定圖幅的范圍及元數據，同時可根據地名查找到圖幅位置。地圖基本信息庫數據的來源主要是SVG地圖數據文件和SGY源數據文件。客戶端腳本文件的主要作用是：地圖圖像的顯示控制、圖層控制、地圖數據的下載以及圖幅拼湊。服務器端和客戶端的通信協議主要是HTTP，本地的JSP程序通過HTTP協議向服務器發送請求元數據信息，獲得元數據信息后生成元數據顯示界面，客戶端直接請求元數據頁面并顯示地圖圖像。

由于地圖數據信息量大，因此必須得到GIS數據庫的支持。本文采用的GIS數據庫并不是常用的關系數據庫，而是SVG文檔。客戶端與服務器端通過HTTP協議連接后，服務器端解析客戶端的數據請求，并通過讀取SVG文檔獲得地圖矢量數據，然后服務器端將客戶端請求的矢量地圖輸入嵌入式Web頁面，最后回復給客戶端瀏覽器。

2.2 腳本動態操作SVG

采用腳本動態操作SVG文檔是開發基于SVG的WebGIS系統需要重點解決的問題。對于SVG文檔的DOM對象，主要有兩種操作方法[5]：使用JavaScript在SVG文檔內部處理；在Batik環境下，首先通過相關接口獲取當前顯示SVG視圖的DOM對象，然后引用使用Java語言對SVG文檔進行處理。本文采用前一種方式。下面對腳本動態操作SVG的主要函數做簡單介紹。

2.3 應用拓展

基于SVG的WebGIS系統的實現為智能交通及物流信息化發展提供了契機。WebGIS系統與導航系統結合，再加上云計算服務，可制定動態導航系統。用戶能在Web頁面查看到當前的交通狀況，根據WebGIS界面做出預測，選擇交通暢通的道路行駛，這將為智能交通行業的發展起到很大的促進作用。現在已經有很多科研機構開始著手研究WebGIS在城市交通中的應用，比如同濟大學研究了WebGIS下的城市智能交通實時發布系統[6]。同時在物流行業， WebGIS方便的監測物流配送情況為信息化物流提供了技術保證[7]。

3 結 語

SVG作為WebGIS實現的新方法，很好地平衡了服務器負載，并充分地利用了客戶端資源，相比于傳統WebGIS的實現方式有著明顯的優勢。基于SVG的WebGIS系統將在各個領域得到廣泛應用，特別是在智能交通及物流行業，將會迎來新的發展機遇。

參考文獻

[1] 韓雙旺.基于SVG的矢量WebGIS實現技術研究[J].測繪科學，2010（1）：124?126.

[2] 練容進.基于SVG與GML的WebGIS設計與實現[J].測繪與空間地理信息，2010（5）：45?47.

[3] 林峰，郭朝珍.基于SVG的WebGIS交互協同機制的設計與實現[J].東南大學學報：自然科學版，2010，40（z1）：202?206.

[4] 張壘，沈玉利，蔣明亮，等.SVG動態地理信息統計專題圖系統方法研究[J].計算機技術與發展，2011（5）：190?194.

[5] 呂鳳濤.SVG與GML技術在地圖服務系統中的應用[J].測繪與空間地理信息，2011（6）：89?91.

[6] 謝思銘，劉春，辛飛飛，等.基于WebGIS的城市交通信息的實時發布架構與實現[J].測繪與空間地理信息，2010（5）：114?116.

[7] 王澤來，穆小亮，李曉紅，等.基于WebGIS的第四方物流跟蹤及應急系統設計與實現[J].計算機應用研究，2009（7）：2640?2645.

作者簡介：徐 婧 女，1982年出生，博士，副研究員。研究方向為交通運輸、物流信息化規劃與政策。

張天宮 男，1982年出生，碩士，工程師。研究方向為交通運輸、物流信息化規劃與政策。

車曉東 男，1980年出生，碩士，工程師。研究方向為交通運輸、物流信息化規劃與政策。