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

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

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

<circle id="point" cx="50" cy="50" r="3" style=”fill: blue” />

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

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

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

可以用path或polygon表示，如：

<polygon points="350，75 379，175 355，175 355，200 345，200，345，175 321，175" style=”fill: blue”/>

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

可以用text表示屬性數(shù)據(jù)，如：

<text id="text1" x="30" y="30">中國</text>

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

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

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

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

圖2 基于SVG技術(shù)的WebGIS的體系結(jié)構(gòu)

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

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

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

function OriginView()

{

RecordViewBox();

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

var eSVG = docSVG.getDocumentElement();

var ōriginView = "0 0 600 500";

eSVG.setAttribute("viewBox"，originView);

由于在SVG地圖瀏覽器中所操作的SVG地圖是以分層的方式進行組織的，在該數(shù)據(jù)組織模式中，屬于 一個圖層的地理特征數(shù)據(jù)組織在同一個分組元素下，且該分組元素的ID屬性設(shè)置為圖層的名稱，這樣對圖層的顯示控制就比較容易。首先通過圖層名稱在SVG DOM樹中找到對應(yīng)的分組元素，然后將該元素的style屬性值設(shè)置為'display:none或display:inline，即可達到對圖層的關(guān)閉 與顯示，如圖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)的主界面

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

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

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

function changeText(evt)

{

targetXtext=svgDocument.getElementById("XPos");

targetYtext=svgDocument.getElementById("YPos");

var XPos = evt.getClientX();

var YPos = evt.getClientY();

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

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

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

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

}

當(dāng)圖形中點的坐標(biāo)捕獲到時，測量兩點之間的距離就很容易實現(xiàn)了，只需要編寫一個函數(shù)實現(xiàn)兩點之間距離的數(shù)學(xué)函數(shù)式： ，此時得到的距離是只是圖形上的距離，如果要獲得地物之間的實際距離，還需要除以比例尺。

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

[1] 劉嘯，畢永年.基于XML的SVG應(yīng)用指南[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的地理信息可視化表達及網(wǎng)絡(luò)發(fā)布的研究[J].信息仿真學(xué)報，2006，18（增刊1）：301

[4] 馮艷杰.基于SVG的WebGIS實現(xiàn)技術(shù)[D].武漢：武漢大學(xué)，2005

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

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

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