用SVG技術實現基於Web的GIS

SVG（Scalable Vector Graphics）是一種基於XML 的用來描述二維矢量圖形和矢量/點陣混合圖形的置標語言，是一種全新的矢量圖形規範。 SVG規範定義了SVG的特徵、語法和顯示效果，包括模塊化的XML命名空間（namespace）和SVG文檔對象模型(DOM)。 SVG的繪圖可以通過動態和交互式方式進行，在實際操作中，則是以嵌入方式或腳本方式來實現的。SVG不僅提供超鏈接功能，還定義了豐富的事件。由於SVG支持腳本語言（script），可以通過Script編程，訪問SVG DOM的元素和屬性，即可響應特定的事件，從而提高了SVG的動態和交互性能。 SVG實現了圖形、圖象和文字的有機統一。 SVG除了支持HTML中常用的標記，如文本、圖象、鏈接、交互性、CSS的使用、腳本（Script）外，還提供了大量針對圖形、圖象、動畫的特定標記。這就爲實現GIS提供了可能。

作者根據實際工作需要，在Web瀏覽器中採用SVG及相關技術實現了Web的GIS管理系統(以下簡稱WebGIS)，取得了很好的效果。此係統包括服務端及客戶端的設計，服務器端出要處理數據的存儲及數據的動態裝載，客戶端主要完成SVG數據的顯示及交互。本文主要對基於SVG的WebGIS的客戶端實現的一些基本知識及實現技術作一個簡單介紹。

基礎知識

SVG瀏覽插件

要實現SVG圖形的顯示，必須要在客戶端安裝SVG瀏覽器，Adobe開發的SVG Viewer功能強大，顯示效果好，是網絡上使用最多的，其最新的版本是3.0。可以到Adobe的網站（http://www.adobe.com/svg/viewer/install/main.html）上去下載，爲了保證中文能正確顯示，請下載簡體中文版本。下載後安裝程序，第一次使用時回彈出用戶許可信息，點擊"接受"即可。

在網頁中嵌入SVG

將實現基於瀏覽器的GIS系統，需要將SVG圖形對象嵌入到網頁中，使用如下HTML代碼來實現：


<embed width="640" height="560" type="image/svg-xml" id="svgmapctrl"
pluginspage="http://www.adobe.com/svg/viewer/install/" src="default.svg" ></embed>



其中embed標籤指定爲一個嵌入的對象，width,height分別指定該對象的寬度、高度，type指定類型爲image/svg-xml ,src指定爲svg數據文件的URL地址，指定這樣的標籤並在瀏覽器中打開，瀏覽器便回調用SVG Viewer在指定區域進行顯示。此處，src指定的是一個svg文件，在GIS系統中，要求根據不同的請求獲取不同的數據，則可以將其改爲動態的url，如服務端的Java Servlet，由服務端動態生成。需要注意的是,SVG目前不支持GB編碼，在使用中文字符時，請使用UTF-8編碼。

SVG圖形對象簡介

SVG提供了豐富的圖形對象，包括直線（line）、路徑(path)、圓(circle)、圖標(symbol)文字(text)、圖像(image)等，滿足了GIS系統的需要。這些圖形對象可以通過設置不同的屬性、顯示樣式來達到不同的顯示效果。對象在SVG文件中以XML標籤的形式存在，而對象屬性以標籤的屬性來存取，可以通過訪問SVG的DOM對象的方法來方便的存取這些對象及屬性。同時SVG中還提供了組的管理(<g>標籤),定義(defs)及引用等功能。這些特徵在GIS中得到了廣泛的應用。

SVG的事件簡介

SVG提供了豐富的消息觸發及事件響應函數，獲取用戶消息。如在地圖上移動、點擊鼠標等。事件的相應可以定義到整個文檔對象中，也可以定義在單個圖形對象上。如要給某個路徑(path)定義鼠標一定事件，可以這樣<path onmousemove="mouseMoved(evt)" …../>, onmousemove指定事件觸發的條件（即鼠標在path上移動時），mouseMoved爲要觸發的響應函數，evt表示事件本身，可以通過evt獲取與當前事件相關的信息，用戶可以在script中定義響應函數，進行相應的處理。同樣，SVG也提供豐富的狀態事件，如數據裝載完畢，就可以觸發onload事件，作一些初始化的處理。

功能實現

地圖的交互及控制

在瀏覽器中打開SVG文件時，SVG圖形作爲瀏覽器的一個嵌入對象出現，可以很方便的通過script函數來獲取SVG圖形對象及其內部的圖形屬性。通過獲取這些對象和屬性，就可以很方便地實現交互功能。

GIS系統最基本的功能是地圖控制，SVG Viewer本身提供圖形的縮放功能，但要通過操作鼠標時按指定的功能鍵才能實現，不適合GIS功能的需要，在WebGIS系統中將其屏蔽。但由於SVG提供了豐富的消息觸發及事件響應函數，通過捕捉這些消息，來實現自定義的地圖控制功能。一個放大地圖的實現流程是：用戶點擊地圖，觸發onmousedown事件，調用消息響應函數，在消息響應函數中將地圖的變換矩陣以當前點擊的點爲中心放大1.1倍，更新顯示圖形。消息響應的函數如下：


Function zoom(evt, scale)
{ // scale = 1.1;表示放大1.1倍
point = new GDPoint();
point.x = evt.clientX;
point.y = evt.clientY; //point爲當前點擊的座標點 爲屏幕座標
absPoint = pointInvert(point);//轉換爲絕對最表
scale = curTransform.scale*scale; //設置當前的縮放係數
curTransform.scale = scale;
point1 = pointApply(absPoint);//絕對座標應用當前的變換系數
curTransform.x += point.x-point1.x;
curTransform.y += point.y-point1.y;//縮放中心平移到當前點擊的位置
matrix= trans2String(curTransform);//生成新的變換矩陣
maproot.setAttribute("transform",matrix);//應用新的變換矩陣
}



其他的如地圖縮小、全圖顯示、區域放大、局部定位等功能與之類似，這裏就不一一作介紹。

圖層管理

SVG採用基於XML的DOM文檔管理結構，很方便實現層次管理，其組<g>對象就可以將其下面的所有圖形管理起來。節點中的childNodes屬性可以獲取所有的子節點的集合，getElementsByTagName()方法可以獲取某種類型對象的列表，如要獲取某組（g）下的所有路徑(path)對象的集合，就可以調用getElementsByTagName("path")。作者通過採用組對象來實現圖層管理功能，不同圖層的對象包含在不同的組中。通過設置組的屬性，就可以實現如可見性、顏色、透明度等設置以及選中、刪除所有對象等操作。SVG中的對象的樣式屬性具有繼承性，如果下一級沒有某樣式屬性，則直接使用其上一級的屬性，以此類推，直到頂級爲止。如：對某層設置某個顯示透明度，則其下級元素顯示時，均採用該透明度，除非其下級元素指定了透明度屬性。

下面的圖顯示GIS系統中的圖層控制界面。





圖標管理

圖標表示的是信息點的信息，在GIS系統中廣泛使用圖標來標誌信息點，其特點是圖標引用相同的預定義的圖形組。增加新的圖標只是在不同的位置增加一個引用而已。在不增加實際的繪圖數據。減少了數據量；同時，如果要修改某類信息的顯示圖標，只要修改預定義的圖標即可，方便了管理。在WebGIS系統中定義了很多類型的圖標。下圖表示用一個圓和一個路徑對象定義的圖標,其名稱爲symbol_1,並定義在defs標籤內，供圖標對象引用：


<defs>
<g id="symbol_1" type="default" style="&_symbol;">
<circle cx="0" cy="0" r="10" />
<path d="M-7.1 7.1,-10 0,-7.1 -7.1,0 -10,7.1 -7.1z" style="fill:#0000ff;fill-opacity:0.6" />
</g>
…
</defs>



下圖爲圖標的實例，這兩個圖標引用上面定義的symbo_1的圖標：圖標在地圖上的實際位置爲transform指定的位置分別是(200,100),(200,200)。


<use id="icon:1" type="A" transform="translate(200,100)" xlink:href="#symbol_1" />
<use id="icon:2" type="B" transform="translate(200,200)" xlink:href="#symbol_1" />



如果要增加圖標，只要添加新的引用(use)對象即可。這些對象可以有自己的屬性，表示不同的信息點，但其顯示的形狀是預定義的，如果修改了預定義的形狀，這些圖標的顯示結果同樣改變。下圖爲在WebGIS中定義的幾種圖標及顯示效果(藍色的爲圖標)。





地圖屬性的定義

SVG圖形數據本身只包含用來實現矢量圖形顯示的信息，如座標點、變換矩陣、顯示樣式等信息，不能滿足GIS系統的需要。但由於SVG是基於XML格式的，除了使用其內置的屬性外，可以對其屬性進行任意擴充，以實現自定義的功能。在SVG圖形中，對象的屬性id是用來標誌唯一對象的編號，可以通過SVG文檔對象的getElementById()函數來獲取指定的對象。WebGIS採用id好作爲圖形內在的標示，而自定義其他的屬性如名稱(name),提示信息(tip)等來存儲其GIS屬性。獲取或賦值這些屬性的方法是調用getAttribute及setAttribute函數。如在WebGIS中一個路徑是這麼定義的。

<path id="ROAD:101" Name="解放大道" Tip=" 解放大道（東）" d="<M……"/>

那麼通過ID "ROAD:101" 獲取路徑對象後，就可以獲取其屬性Name及Tip的信息，執行顯示提示信息等功能。

總結

本文對用SVG技術實現基於Web的GIS的關鍵技術做了簡單的介紹，通過對SVG技術的把握和應用，作者成功地開發了WebGIS系統，說明SVG技術完全能勝任某些行業GIS應用的需要，從長遠來看，SVG技術代表網絡矢量化圖形的發展方向，必將在包括 GIS在內的各個方面得到廣泛應用。