摘 要 本文在分析了用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 點對象
對于點的表示可以采用填充顏色的圓或矩形，如：
<circle id="point" cx="50" cy="50" r="3" style=”fill: blue” />
以上
代碼
表示以點（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是標識這條線的。
這條代碼表示連接點（0，150）與點（400，150）之間的一條線，這條線的寬度是2，顏色是藍色，line是標識這條線的。
2.3 區(qū)域對象
可以用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）的多邊形，填充顏色是藍色。
2.4 注記對象
可以用text表示屬性數據，如：
<text id="text1" x="30" y="30">中國</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
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
