|
本文主要對基于SVG的WebGIS的客戶端實(shí)現(xiàn)的一些基本知識(shí)及實(shí)現(xiàn)技術(shù)作一個(gè)簡單介紹。
SVG（Scalable Vector Graphics）是一種基于XML 的用來描述二維矢量圖形和矢量/點(diǎn)陣混合圖形的置標(biāo)語言，是一種全新的矢量圖形規(guī)范。 SVG規(guī)范定義了SVG的特征、語法和顯示效果，包括模塊化的XML命名空間（namespace）和SVG文檔對象模型(DOM)。 SVG的繪圖可以通過動(dòng)態(tài)和交互式方式進(jìn)行，在實(shí)際操作中，則是以嵌入方式或腳本方式來實(shí)現(xiàn)的。SVG不僅提供超鏈接功能，還定義了豐富的事件。由于SVG支持腳本語言（script），可以通過Script編程，訪問SVG DOM的元素和屬性，即可響應(yīng)特定的事件，從而提高了SVG的動(dòng)態(tài)和交互性能。 SVG實(shí)現(xiàn)了圖形、圖象和文字的有機(jī)統(tǒng)一。 SVG除了支持HTML中常用的標(biāo)記，如文本、圖象、鏈接、交互性、CSS的使用、腳本（Script）外，還提供了大量針對圖形、圖象、動(dòng)畫的特定標(biāo)記。這就為實(shí)現(xiàn)GIS提供了可能。
作者根據(jù)實(shí)際工作需要，在Web瀏覽器中采用SVG及相關(guān)技術(shù)實(shí)現(xiàn)了Web的GIS管理系統(tǒng)(以下簡稱WebGIS)，取得了很好的效果。此系統(tǒng)包括服務(wù)端及客戶端的設(shè)計(jì)，服務(wù)器端出要處理數(shù)據(jù)的存儲(chǔ)及數(shù)據(jù)的動(dòng)態(tài)裝載，客戶端主要完成SVG數(shù)據(jù)的顯示及交互。本文主要對基于SVG的WebGIS的客戶端實(shí)現(xiàn)的一些基本知識(shí)及實(shí)現(xiàn)技術(shù)作一個(gè)簡單介紹。
SVG瀏覽插件
要實(shí)現(xiàn)SVG圖形的顯示，必須要在客戶端安裝SVG瀏覽器，Adobe開發(fā)的SVG Viewer功能強(qiáng)大，顯示效果好，是網(wǎng)絡(luò)上使用最多的，其最新的版本是3.0?？梢缘紸dobe的網(wǎng)站（ http://www.adobe.com/svg/viewer/install/main.html）上去下載，為了保證中文能正確顯示，請下載簡體中文版本。下載后安裝程序，第一次使用時(shí)回彈出用戶許可信息，點(diǎn)擊"接受"即可。
在網(wǎng)頁中嵌入SVG
將實(shí)現(xiàn)基于瀏覽器的GIS系統(tǒng)，需要將SVG圖形對象嵌入到網(wǎng)頁中，使用如下HTML代碼來實(shí)現(xiàn)：
[code]<embed width="640" height="560" type="image/svg-xml" id="svgmapctrl"
pluginspage="http://www.adobe.com/svg/viewer/install/" src="default.svg" ></embed>[/code]
其中embed標(biāo)簽指定為一個(gè)嵌入的對象，width,height分別指定該對象的寬度、高度，type指定類型為image/svg-xml ,src指定為svg數(shù)據(jù)文件的URL地址，指定這樣的標(biāo)簽并在瀏覽器中打開，瀏覽器便回調(diào)用SVG Viewer在指定區(qū)域進(jìn)行顯示。此處，src指定的是一個(gè)svg文件，在GIS系統(tǒng)中，要求根據(jù)不同的請求獲取不同的數(shù)據(jù)，則可以將其改為動(dòng)態(tài)的url，如服務(wù)端的Java Servlet，由服務(wù)端動(dòng)態(tài)生成。需要注意的是,SVG目前不支持GB編碼，在使用中文字符時(shí)，請使用UTF-8編碼。
SVG圖形對象簡介
SVG提供了豐富的圖形對象，包括直線（line）、路徑(path)、圓(circle)、圖標(biāo)(symbol)文字(text)、圖像(image)等，滿足了GIS系統(tǒng)的需要。這些圖形對象可以通過設(shè)置不同的屬性、顯示樣式來達(dá)到不同的顯示效果。對象在SVG文件中以XML標(biāo)簽的形式存在，而對象屬性以標(biāo)簽的屬性來存取，可以通過訪問SVG的DOM對象的方法來方便的存取這些對象及屬性。同時(shí)SVG中還提供了組的管理(<g>標(biāo)簽),定義(defs)及引用等功能。這些特征在GIS中得到了廣泛的應(yīng)用。
SVG的事件簡介
SVG提供了豐富的消息觸發(fā)及事件響應(yīng)函數(shù)，獲取用戶消息。如在地圖上移動(dòng)、點(diǎn)擊鼠標(biāo)等。事件的相應(yīng)可以定義到整個(gè)文檔對象中，也可以定義在單個(gè)圖形對象上。如要給某個(gè)路徑(path)定義鼠標(biāo)一定事件，可以這樣<path onmousemove="mouseMoved(evt)" …../>, onmousemove指定事件觸發(fā)的條件（即鼠標(biāo)在path上移動(dòng)時(shí)），mouseMoved為要觸發(fā)的響應(yīng)函數(shù)，evt表示事件本身，可以通過evt獲取與當(dāng)前事件相關(guān)的信息，用戶可以在script中定義響應(yīng)函數(shù)，進(jìn)行相應(yīng)的處理。同樣，SVG也提供豐富的狀態(tài)事件，如數(shù)據(jù)裝載完畢，就可以觸發(fā)onload事件，作一些初始化的處理。
地圖的交互及控制
在瀏覽器中打開SVG文件時(shí)，SVG圖形作為瀏覽器的一個(gè)嵌入對象出現(xiàn)，可以很方便的通過script函數(shù)來獲取SVG圖形對象及其內(nèi)部的圖形屬性。通過獲取這些對象和屬性，就可以很方便地實(shí)現(xiàn)交互功能。
GIS系統(tǒng)最基本的功能是地圖控制，SVG Viewer本身提供圖形的縮放功能，但要通過操作鼠標(biāo)時(shí)按指定的功能鍵才能實(shí)現(xiàn)，不適合GIS功能的需要，在WebGIS系統(tǒng)中將其屏蔽。但由于SVG提供了豐富的消息觸發(fā)及事件響應(yīng)函數(shù)，通過捕捉這些消息，來實(shí)現(xiàn)自定義的地圖控制功能。一個(gè)放大地圖的實(shí)現(xiàn)流程是：用戶點(diǎn)擊地圖，觸發(fā)onmousedown事件，調(diào)用消息響應(yīng)函數(shù)，在消息響應(yīng)函數(shù)中將地圖的變換矩陣以當(dāng)前點(diǎn)擊的點(diǎn)為中心放大1.1倍，更新顯示圖形。消息響應(yīng)的函數(shù)如下：
Function zoom(evt, scale)
{ // scale = 1.1;表示放大1.1倍
point = new GDPoint();
point.x = evt.clientX;
point.y = evt.clientY; //point為當(dāng)前點(diǎn)擊的坐標(biāo)點(diǎn) 為屏幕坐標(biāo)
absPoint = pointInvert(point);//轉(zhuǎn)換為絕對最表
scale = curTransform.scale*scale; //設(shè)置當(dāng)前的縮放系數(shù)
curTransform.scale = scale;
point1 = pointApply(absPoint);//絕對坐標(biāo)應(yīng)用當(dāng)前的變換系數(shù)
curTransform.x += point.x-point1.x;
curTransform.y += point.y-point1.y;//縮放中心平移到當(dāng)前點(diǎn)擊的位置
matrix= trans2String(curTransform);//生成新的變換矩陣
maproot.setAttribute("transform",matrix);//應(yīng)用新的變換矩陣
}
其他的如地圖縮小、全圖顯示、區(qū)域放大、局部定位等功能與之類似，這里就不一一作介紹。
圖層管理
SVG采用基于XML的DOM文檔管理結(jié)構(gòu)，很方便實(shí)現(xiàn)層次管理，其組<g>對象就可以將其下面的所有圖形管理起來。節(jié)點(diǎn)中的childNodes屬性可以獲取所有的子節(jié)點(diǎn)的集合，getElementsByTagName()方法可以獲取某種類型對象的列表，如要獲取某組（g）下的所有路徑(path)對象的集合，就可以調(diào)用getElementsByTagName("path")。 作者通過采用組對象來實(shí)現(xiàn)圖層管理功能，不同圖層的對象包含在不同的組中。通過設(shè)置組的屬性，就可以實(shí)現(xiàn)如可見性、顏色、透明度等設(shè)置以及選中、刪除所有對象等操作。SVG中的對象的樣式屬性具有繼承性，如果下一級(jí)沒有某樣式屬性，則直接使用其上一級(jí)的屬性，以此類推，直到頂級(jí)為止。如：對某層設(shè)置某個(gè)顯示透明度，則其下級(jí)元素顯示時(shí)，均采用該透明度，除非其下級(jí)元素指定了透明度屬性。
下面的圖顯示GIS系統(tǒng)中的圖層控制界面。
圖標(biāo)管理
圖標(biāo)表示的是信息點(diǎn)的信息，在GIS系統(tǒng)中廣泛使用圖標(biāo)來標(biāo)志信息點(diǎn)，其特點(diǎn)是圖標(biāo)引用相同的預(yù)定義的圖形組。增加新的圖標(biāo)只是在不同的位置增加一個(gè)引用而已。在不增加實(shí)際的繪圖數(shù)據(jù)。減少了數(shù)據(jù)量；同時(shí)，如果要修改某類信息的顯示圖標(biāo)，只要修改預(yù)定義的圖標(biāo)即可，方便了管理。在WebGIS系統(tǒng)中定義了很多類型的圖標(biāo)。下圖表示用一個(gè)圓和一個(gè)路徑對象定義的圖標(biāo),其名稱為symbol_1,并定義在defs標(biāo)簽內(nèi)，供圖標(biāo)對象引用：
<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>
下圖為圖標(biāo)的實(shí)例，這兩個(gè)圖標(biāo)引用上面定義的symbo_1的圖標(biāo)：圖標(biāo)在地圖上的實(shí)際位置為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" />
如果要增加圖標(biāo)，只要添加新的引用(use)對象即可。這些對象可以有自己的屬性，表示不同的信息點(diǎn)，但其顯示的形狀是預(yù)定義的，如果修改了預(yù)定義的形狀，這些圖標(biāo)的顯示結(jié)果同樣改變。下圖為在WebGIS中定義的幾種圖標(biāo)及顯示效果(藍(lán)色的為圖標(biāo))。
地圖屬性的定義
SVG圖形數(shù)據(jù)本身只包含用來實(shí)現(xiàn)矢量圖形顯示的信息，如坐標(biāo)點(diǎn)、變換矩陣、顯示樣式等信息，不能滿足GIS系統(tǒng)的需要。但由于SVG是基于XML格式的，除了使用其內(nèi)置的屬性外，可以對其屬性進(jìn)行任意擴(kuò)充，以實(shí)現(xiàn)自定義的功能。在SVG圖形中，對象的屬性id是用來標(biāo)志唯一對象的編號(hào)，可以通過SVG文檔對象的getElementById()函數(shù)來獲取指定的對象。WebGIS采用id好作為圖形內(nèi)在的標(biāo)示，而自定義其他的屬性如名稱(name),提示信息(tip)等來存儲(chǔ)其GIS屬性。獲取或賦值這些屬性的方法是調(diào)用getAttribute及setAttribute函數(shù)。如在WebGIS中一個(gè)路徑是這么定義的。
<path id="ROAD:101" Name="解放大道" Tip=" 解放大道（東）" d="<M……"/>
那么通過ID "ROAD:101" 獲取路徑對象后，就可以獲取其屬性Name及Tip的信息，執(zhí)行顯示提示信息等功能。
本文對用SVG技術(shù)實(shí)現(xiàn)基于Web的GIS的關(guān)鍵技術(shù)做了簡單的介紹，通過對SVG技術(shù)的把握和應(yīng)用，作者成功地開發(fā)了WebGIS系統(tǒng)，說明SVG技術(shù)完全能勝任某些行業(yè)GIS應(yīng)用的需要，從長遠(yuǎn)來看，SVG技術(shù)代表網(wǎng)絡(luò)矢量化圖形的發(fā)展方向，必將在包括 GIS在內(nèi)的各個(gè)方面得到廣泛應(yīng)用。
關(guān)于作者：
林恩德 軟件工程師 有4年的Java、兩年的J2EE開發(fā)經(jīng)驗(yàn), | 
