基于Asp.net、SVG技術(shù)的WebGIS研究與實(shí)現(xiàn)

基于A、SVG技術(shù)的WebGIS研究與實(shí)現(xiàn)

摘要本文在分析了用SVG表示地理空間信息的特點(diǎn)后，將SVG應(yīng)用到WebGIS中，系統(tǒng)研究的主要內(nèi)容是使用、SVG技術(shù)，結(jié)合SQLServer后臺數(shù)據(jù)庫技術(shù)動(dòng)態(tài)的生成SVG圖形；利用腳本語言JavaScript和DOM技術(shù)，很好的實(shí)現(xiàn)了地圖的縮放、平移和還原、圖層的控制等WebGIS客戶端功能。關(guān)鍵詞;SVG;JavaScript;DOM;WebGIS

1引言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ò)載體。過去大部分學(xué)者是將svg文件以文本的形式放在客戶端的，當(dāng)圖形比較復(fù)雜時(shí)，這對客戶端的要求就比較高;本文采用SQLServer數(shù)據(jù)庫存儲SVG圖形數(shù)據(jù)，利用調(diào)用后臺數(shù)據(jù)庫動(dòng)態(tài)生成SVG圖形，降低了客戶端的要求，再使用腳本語言JavaScript和DOM技術(shù)實(shí)現(xiàn)圖形的客戶端動(dòng)態(tài)交互，取得了良好的效果.

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

點(diǎn)對象對于點(diǎn)的表示可以采用填充顏色的圓或矩形，如：circleid="point"cx="50"cy="50"r="3"style=”fill:blue”/以上代碼表示以點(diǎn)為圓心，半徑為3的藍(lán)色實(shí)心圓，”point”是用于標(biāo)識這個(gè)點(diǎn)。

線對象將兩個(gè)點(diǎn)連接起來就可以表示一條線，如：lineid=”line”x1="0"y1="150"x2="400"y2="150"stroke-width="2"stroke="blue"/

這條代碼表示連接點(diǎn)與點(diǎn)之間的一條線，這條線的寬度是2，顏色是藍(lán)色，line是標(biāo)識這條線的。

區(qū)域?qū)ο罂梢杂胮ath或polygon表示，如：polygonpoints="350，75379，175355，175355，200345，200，345，175321，175"style=”fill:blue”/代碼表示節(jié)點(diǎn)為的多邊形，填充顏色是藍(lán)色。

注記對象可以用text表示屬性數(shù)據(jù)，如：textid="text1"x="30"y="30"中國/text上述代碼將在瀏覽器頁面上的點(diǎn)(30，30)處輸出文本“中國”，“text1”用于標(biāo)識這個(gè)注記。如圖1所示：圖1SVG表示的點(diǎn)、線、區(qū)域和注記

屬性數(shù)據(jù)對于屬性數(shù)據(jù)可采用內(nèi)嵌法和外聯(lián)法兩種編碼方法內(nèi)嵌法是指將所關(guān)聯(lián)的屬性數(shù)據(jù)與幾何數(shù)據(jù)放在同一個(gè)地物分組元素中，由于SVG未提供對屬性數(shù)據(jù)的描述標(biāo)記，因此在這里自定義一個(gè)GeoAttribute元素來標(biāo)記屬性數(shù)據(jù)，各屬性項(xiàng)作為GeoAttribute元素的子元素依次列出。由于GeoAttribute元素是一個(gè)自定義元素，因此一般的SVG文檔瀏覽器(如Adobe的SVGView插件)不會對該元素進(jìn)行處理，當(dāng)然對于非常簡單的屬性可以直接利用desc元素表示。外聯(lián)法是指屬性數(shù)據(jù)通過地物標(biāo)識號存儲在外部數(shù)據(jù)庫中，為此，地物標(biāo)識號需要進(jìn)行進(jìn)一步的約定，即地物標(biāo)識號除了以“F”開始外，還包含地物類別號和目標(biāo)標(biāo)識號，其中，通過地物類別號可確定與該類地物對應(yīng)的屬性關(guān)系表，而通過目標(biāo)標(biāo)識號來定位屬性表中的記錄號。此外，也可直接通過超連接，將屬性數(shù)據(jù)頁面(通過技術(shù)動(dòng)態(tài)生成)與幾何數(shù)據(jù)聯(lián)系起來。

3基于SVG的WebGIS設(shè)計(jì)模式

WebGIS的實(shí)現(xiàn)模型到目前主要有三種：①基于客戶端；②基于服務(wù)器端；③基于服務(wù)器/客戶端的混合模式。其中第三種模式集成了前面兩種模式的優(yōu)點(diǎn)，是目前比較流行的模式。同理，基于SVG的WebGIS也逃不過這三種模式，一般采用B/S三層體系結(jié)構(gòu)，如圖2所示圖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格式的文件返回給客戶端，這些功能都是由技術(shù)來完成的。對于地圖圖層控制、縮放、漫游等各種相對簡單的GIS功能放在客戶端操作，通過DOM和JavaScript進(jìn)行開發(fā)，Web服務(wù)器只用于給客戶提供數(shù)據(jù)，這些數(shù)據(jù)被保存到客戶端，這樣就不需要每次處理時(shí)都訪問服務(wù)器，極大地減少了網(wǎng)絡(luò)數(shù)據(jù)傳輸量和服務(wù)器的負(fù)擔(dān)?？蛻粢部梢詫υ紨?shù)據(jù)進(jìn)行分析、提取數(shù)據(jù)、解析。而對于一些復(fù)雜的操作如空間分析、圖層編輯等，則需要與服務(wù)器進(jìn)行交互實(shí)現(xiàn)。中間件主要完成SVG/XML數(shù)據(jù)模式和傳統(tǒng)的DBMS的數(shù)據(jù)庫模式間轉(zhuǎn)換工作。

4實(shí)例該系統(tǒng)采用SQLServer存儲SVG圖形數(shù)據(jù)，利用調(diào)用后臺數(shù)據(jù)庫動(dòng)態(tài)生成SVG圖形，再使用腳本語言JavaScript和DOM技術(shù)實(shí)現(xiàn)圖形的動(dòng)態(tài)交互，圖3是系統(tǒng)的主界面。

地圖的縮放、平移和還原在SVG中，通過修改SVG根元素的viewbox屬性，可以改變地圖的顯示范圍。viewbox的屬性由4個(gè)參數(shù)組成，前2個(gè)表示顯示范圍里最小點(diǎn)的X坐標(biāo)和Y坐標(biāo)，即顯示范圍的頂點(diǎn)，后2個(gè)表示從該點(diǎn)開始，橫、縱方向上分別前進(jìn)多少個(gè)坐標(biāo)單位，以構(gòu)成整個(gè)顯示范圍。例如，viewbox="00100100"，表示顯示范圍是從(0，0)點(diǎn)開始，窗口長為100個(gè)坐標(biāo)單位，

寬為100個(gè)坐標(biāo)單位。進(jìn)行基本地圖操作時(shí)，均可以通過操作viewbox得到理想的結(jié)果。地圖縮放時(shí)將后2個(gè)參數(shù)分別乘以(除以)某個(gè)倍數(shù)就可以得到縮放后的窗口大小;地圖平移時(shí)，后2個(gè)參數(shù)不變，修改前2個(gè)參數(shù)，指定新的起點(diǎn)坐標(biāo)即可。地圖復(fù)位時(shí)，將viewbox恢復(fù)為原始值即可完成復(fù)位操作。下面是地圖還原功能的代碼：functionOriginView(){RecordViewBox();vardocSVG=_ment();vareSVG=();varoriginView="00600500";("viewBox"，originView);

圖層的控制由于在SVG地圖瀏覽器中所操作的SVG地圖是以分層的方式進(jìn)行組織的，在該數(shù)據(jù)組織模式中，屬于一個(gè)圖層的地理特征數(shù)據(jù)組織在同一個(gè)分組元素下，且該分組元素的ID屬性設(shè)置為圖層的名稱，這樣對圖層的顯示控制就比較容易。首先通過圖層名稱在SVGDOM樹中找到對應(yīng)的分組元素，然后將該元素的style屬性值設(shè)置為‘display:none或display:inline，即可達(dá)到對圖層的關(guān)閉與顯示，如圖4所示。functionhilite_elem(checkbox，element_name){varsvgobj=[‘HUNNUWebGIS_SVG‘].getSVGDocument().getElementById(element_name);if(!){//隱藏圖層.(null,‘style‘,‘display:none;fill-rule:evenodd‘);}else{//顯示圖層.(null,‘style‘,‘display:inline;fill-rule:evenodd‘);}}圖3系統(tǒng)的主界面

簡單的屬性查詢由于每一塊圖形區(qū)域都是用path路徑表示的，可以在path中加入onclick事件，再用javascript語言編寫onclick事件代碼。當(dāng)用鼠標(biāo)單擊圖形區(qū)域時(shí)，就會彈出一個(gè)對話框，顯示該區(qū)域的屬性信息，如圖5所示。圖4城市區(qū)域圖層隱藏效果圖5屬性查詢

坐標(biāo)的顯示在每個(gè)g圖層中加入onmousemove="changeText(evt)"，通過javascript編寫changeText(evt)函數(shù)，從而實(shí)現(xiàn)圖形坐標(biāo)的顯示。functionchangeText(evt){targetXtext=("XPos");targetYtext=("YPos");varXPos=();varYPos=();varnewXPosText=("X坐標(biāo):"+XPos);varnewYPosText=("Y坐標(biāo):"+YPos);(newXPosText,());(newYPosText,());}

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

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

參考文獻(xiàn)[1]劉嘯，畢永年.基于XML的SVG應(yīng)用指南[Z].北京科海集團(tuán)公司，2001，10—12W3C.ScalableVectorGraphics