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

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

對(duì)于點(diǎn)的表示可以采用填充顏色的圓或矩形，如：

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

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

將兩個(gè)點(diǎn)連接起來(lái)就可以表示一條線，如：

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

可以用path或polygon表示，如：

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

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

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

<text id="text1" x="30" y="30">中國(guó)</text>

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

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

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

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

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

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

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

在SV G 中， 通過(guò)修改SV G 根元素的view box 屬性， 可以改變地圖的顯示范圍。view box 的屬性由4個(gè)參數(shù)組成， 前2 個(gè)表示顯示范圍里最小點(diǎn)的X 坐標(biāo)和Y 坐標(biāo)， 即顯示范圍的頂點(diǎn)，后2 個(gè)表示從該點(diǎn)開(kāi)始， 橫、縱方向上分別前進(jìn)多少個(gè)坐標(biāo)單位， 以構(gòu)成整個(gè)顯示范圍。例如， view box= "0 0 100 100" ， 表示顯示范圍是從(0， 0) 點(diǎn)開(kāi)始， 窗口長(zhǎng)為100 個(gè)坐標(biāo)單位，寬為100 個(gè)坐標(biāo)單位。進(jìn)行基本地圖操作時(shí)，均可以通過(guò)操作view box 得到理想的結(jié)果。地圖縮放時(shí)將后2 個(gè)參數(shù)分別乘以(除以) 某個(gè)倍數(shù)就可以得到縮放后的窗口大小; 地圖平移時(shí)， 后2 個(gè)參數(shù)不變， 修改前2 個(gè)參數(shù)， 指定新的起點(diǎn)坐標(biāo)即可。地圖復(fù)位時(shí)， 將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地圖是以分層的方式進(jìn)行組織的，在該數(shù)據(jù)組織模式中，屬于 一個(gè)圖層的地理特征數(shù)據(jù)組織在同一個(gè)分組元素下，且該分組元素的ID屬性設(shè)置為圖層的名稱，這樣對(duì)圖層的顯示控制就比較容易。首先通過(guò)圖層名稱在SVG DOM樹(shù)中找到對(duì)應(yīng)的分組元素，然后將該元素的style屬性值設(shè)置為'display:none或display:inline，即可達(dá)到對(duì)圖層的關(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語(yǔ)言編寫onclick事件代碼。當(dāng)用鼠標(biāo)單擊圖形區(qū)域時(shí)，就會(huì)彈出一個(gè)對(duì)話框，顯示該區(qū)域的屬性信息，如圖5所示。

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

在每個(gè)<g>圖層中加入onmousemove="changeText(evt)"，通過(guò)javascrīpt編寫changeText(evt)函數(shù)，從而實(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)圖形中點(diǎn)的坐標(biāo)捕獲到時(shí)，測(cè)量?jī)牲c(diǎn)之間的距離就很容易實(shí)現(xiàn)了，只需要編寫一個(gè)函數(shù)實(shí)現(xiàn)兩點(diǎn)之間距離的數(shù)學(xué)函數(shù)式： ，此時(shí)得到的距離是只是圖形上的距離，如果要獲得地物之間的實(shí)際距離，還需要除以比例尺。

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

[1] 劉嘯，畢永年.基于XML的SVG應(yīng)用指南[Z].北京科海集團(tuán)公司，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] 宋國(guó)民，蔣敏等.基于SVG的地理信息可視化表達(dá)及網(wǎng)絡(luò)發(fā)布的研究[J].信息仿真學(xué)報(bào)，2006，18（增刊1）：301

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

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

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

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