摘要 本文在分析了用SVG表示地理空間信息的特點后，將SVG應用到WebGIS中，系統(tǒng)研究的主要內容是使用Asp.net、SVG技術，結合SQL Server后臺數據庫技術動態(tài)的生成SVG圖形；利用腳本語言Javascrīpt和DOM技術，很好的實現了地圖的縮放、平移和還原、圖層的控制等WebGIS客戶端功能。

關鍵詞 Asp.net; SVG; Javascrīpt; DOM; WebGIS

1 引言

WebGIS是 Internet 與GIS的結合產物，也是GIS研究的一個重要方向。然而，在Web上發(fā)布信息量巨大的地理空間信息（主要是以圖形圖像的方式）必將導致Internet網絡傳輸速度降低，而短小靈活的矢量圖形是緩解這個困境的有效手段。SVG就是一種基于 XML 的矢量圖形格式，由于它能良好的將矢量圖形展現在Web上，因而SVG可以成為GIS很好的網絡載體。過去大部分學者是將svg文件以文本的形式放在客戶端的，當圖形比較復雜時，這對客戶端的要求就比較高;本文采用SQL Server數據庫存儲SVG圖形數據，利用Asp.net調用后臺數據庫動態(tài)生成SVG圖形，降低了客戶端的要求，再使用腳本語言Javascrīpt和DOM技術實現圖形的客戶端動態(tài)交互，取得了良好的效果.

2 SVG表示地理空間信息

SVG 是一種文本性的描述語言，提供了17 類80 多種元素，涉及基本圖形、文字、圖像的顯示，以及圖形元素動畫、超鏈接、顏色漸變、透明效果、濾鏡效果等諸多方面。因此完全可以利用SVG 來表現地理數據的空間信息和屬性信息，其中空間信息按其幾何形態(tài)用點對象、線對象、區(qū)域對象和注記對象來組織，而屬性信息可用內嵌法和外聯(lián)法兩種編碼來描述。

2.1 點對象

對于點的表示可以采用填充顏色的圓或矩形，如：

以上代碼表示以點（50，50）為圓心，半徑為3的藍色實心圓，”point”是用于標識這個點。

2.2 線對象

將兩個點連接起來就可以表示一條線，如：

<line id=”line” x1="0" y1="150" x2="400" y2="150" stroke-width="2" stroke="blue"/>
這條代碼表示連接點（0，150）與點（400，150）之間的一條線，這條線的寬度是2，顏色是藍色，line是標識這條線的。

2.3 區(qū)域對象

可以用path或polygon表示，如：

代碼表示節(jié)點為（350，75）（379，175）（335，175）（335，200）（345，175）（321，175）的多邊形，填充顏色是藍色。

2.4 注記對象

可以用text表示屬性數據，如：

上述代碼將在瀏覽器頁面上的點(30，30)處輸出文本“中國”，“text1”用于標識這個注記。如圖1所示：

圖1 SVG表示的點、線、區(qū)域和注記

2.5 屬性數據

對于屬性數據可采用內嵌法和外聯(lián)法兩種編碼方法內嵌法是指將所關聯(lián)的屬性數據與幾何數據放在同一個地物分組元素中，由于SVG未提供對屬性數據的描述標記，因此在這里自定義一個< GeoAttribute>元素來標記屬性數據，各屬性項作為<GeoAttribute>元素的子元素依次列出。由于< GeoAttribute>元素是一個自定義元素，因此一般的SVG文檔瀏覽器(如Adobe的SVG View插件)不會對該元素進行處理，當然對于非常簡單的屬性可以直接利用<desc>元素表示。

外聯(lián)法是指屬性數據通過地物標識號存儲在外部數據庫中，為此，地物標識號需要進行進一步的約定，即地物標識號除了以“F”開始外，還包含地物類別號和目標標識號，其中，通過地物類別號可確定與該類地物對應的屬性關系表，而通過目標標識號來定位屬性表中的記錄號。此外，也可直接通過超連接，將屬性數據頁面(通過ASP.net技術動態(tài)生成)與幾何數據聯(lián)系起來。

3 基于SVG的WebGIS設計模式

WebGIS的實現模型到目前主要有三種：①基于客戶端；②基于服務器端；③基于服務器/客戶端的混合模式。其中第三種模式集成了前面兩種模式的優(yōu)點，是目前比較流行的模式。同理，基于SVG的WebGIS也逃不過這三種模式，一般采用B/S三層體系結構，如圖2所示：

圖2 基于SVG技術的WebGIS的體系結構

首先，客戶在瀏覽器中選擇一些需要查詢的數據，并向服務器端發(fā)出請求，該請求通過HTTP協(xié)議傳送到服務器端。服務器端收到了請求后，就通過數據訪問接口去訪問相關的數據庫，并把從數據庫中檢索到的數據轉換成相應的XML格式、SVG格式和 HTML 格式的文件返回給客戶端，這些功能都是由Asp.net技術來完成的。對于地圖圖層控制、縮放、漫游等各種相對簡單的GIS功能放在客戶端操作，通過DOM 和Javascrīpt進行開發(fā)，Web服務器只用于給客戶提供數據，這些數據被保存到客戶端，這樣就不需要每次處理時都訪問服務器，極大地減少了網絡數據傳輸量和服務器的負擔。客戶也可以對原始數據進行分析、提取數據、解析。而對于一些復雜的操作如空間分析、圖層編輯等，則需要與服務器進行交互實現。中間件主要完成SVG/XML數據模式和傳統(tǒng)的DBMS的數據庫模式間轉換工作。

4 實例

該系統(tǒng)采用SQL Server存儲SVG圖形數據，利用Asp.net調用后臺數據庫動態(tài)生成SVG圖形，再使用腳本語言Javascrīpt和DOM技術實現圖形的動態(tài)交互，圖3是系統(tǒng)的主界面。

4.1 地圖的縮放、平移和還原

在SV G 中，通過修改SV G 根元素的view box 屬性，可以改變地圖的顯示范圍。view box 的屬性由4個參數組成，前2 個表示顯示范圍里最小點的X 坐標和Y 坐標，即顯示范圍的頂點，后2 個表示從該點開始，橫、縱方向上分別前進多少個坐標單位，以構成整個顯示范圍。例如， view box= "0 0 100 100" ，表示顯示范圍是從(0， 0) 點開始，窗口長為100 個坐標單位，寬為100 個坐標單位。進行基本地圖操作時，均可以通過操作view box 得到理想的結果。地圖縮放時將后2 個參數分別乘以(除以) 某個倍數就可以得到縮放后的窗口大小; 地圖平移時，后2 個參數不變，修改前2 個參數，指定新的起點坐標即可。地圖復位時，將view box 恢復為原始值即可完成復位操作。下面是地圖還原功能的代碼：

function OriginView()

{

RecordViewBox();

var docSVG = document.HUNNUWebGIS_SVG.getSVGDocu ment();

var eSVG = docSVG.getDocumentElement();

var ōriginView = "0 0 600 500";

eSVG.setAttribute("viewBox"，originView);

4.2 圖層的控制

由于在SVG地圖瀏覽器中所操作的SVG地圖是以分層的方式進行組織的，在該數據組織模式中，屬于一個圖層的地理特征數據組織在同一個分組元素下，且該分組元素的ID屬性設置為圖層的名稱，這樣對圖層的顯示控制就比較容易。首先通過圖層名稱在SVG DOM樹中找到對應的分組元素，然后將該元素的style屬性值設置為'display:none或display:inline，即可達到對圖層的關閉與顯示，如圖4所示。

function hilite_elem(checkbox， element_name){

var svgobj = document.embeds['HUNNUWebGIS_SVG']. getSVGDocument().getElementById(element_name);

if (!checkbox.checked){

// 隱藏圖層.

svgobj.setAttributeNS(null,'style', 'display:none;fill-rule:evenodd');

} else {

// 顯示圖層.

svgobj.setAttributeNS(null,'style', 'display:inline;fill-rule:evenodd');

}

圖3 系統(tǒng)的主界面

4.3 簡單的屬性查詢

由于每一塊圖形區(qū)域都是用<path>路徑表示的，可以在<path>中加入onclick事件，再用javascrīpt語言編寫onclick事件代碼。當用鼠標單擊圖形區(qū)域時，就會彈出一個對話框，顯示該區(qū)域的屬性信息，如圖5所示。

圖4 城市區(qū)域圖層隱藏效果圖5 屬性查詢

4.4 坐標的顯示

在每個<g>圖層中加入onmousemove="changeText(evt)"，通過javascrīpt編寫changeText(evt)函數，從而實現圖形坐標的顯示。

function changeText(evt)

{

targetXtext=svgDocument.getElementById("XPos");

targetYtext=svgDocument.getElementById("YPos");

var XPos = evt.getClientX();

var YPos = evt.getClientY();

var newXPosText = svgDocument.createTextNode("X 坐標 : " + XPos);

var newYPosText = svgDocument.createTextNode("Y 坐標 : " + YPos);

targetXtext.replaceChild(newXPosText,targetXtext.getFirstChild());

targetYtext.replaceChild(newYPosText,targetYtext.getFirstChild());

}

4.5 測量距離

當圖形中點的坐標捕獲到時，測量兩點之間的距離就很容易實現了，只需要編寫一個函數實現兩點之間距離的數學函數式：，此時得到的距離是只是圖形上的距離，如果要獲得地物之間的實際距離，還需要除以比例尺。

5 結語

系統(tǒng)使用Asp.net、SVG技術，結合SQL Server后臺數據庫技術動態(tài)的生成SVG圖形;利用SVG、Javascrīpt和DOM技術很好實現了WebGIS客戶端功能，結果表明該方法是可行的.對于更復雜的GIS功能實現，如空間分析、圖形編輯等將是筆者以后進一步研究的方向。

參考文獻

[1] 劉嘯，畢永年.基于XML的SVG應用指南[Z].北京科海集團公司，2001，10—12

[2] W 3C. Scalable Vector Graphics 1.1 Specification.

http: //www. w3. org/T R/2003/R EC -SVG11- 20030114/,2003

[3] 宋國民，蔣敏等.基于SVG的地理信息可視化表達及網絡發(fā)布的研究[J].信息仿真學報，2006，18（增刊1）：301

[4] 馮艷杰.基于SVG的WebGIS實現技術[D].武漢：武漢大學，2005

[5] 史同廣，張子民等.WebGIS實現模式及其技術評價[J].山東建筑工程學院學報，2005，20（1）：92

收稿日期：5月18日修訂日期：5月23日

作者簡介： 鄧曉斌（1983—），男，江西鷹潭人，碩士研究生，主要研究方向：WebGIS

基于Asp.net、SVG技術的WebGIS研究與實現

更多文章、技術交流、商務合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義