摘要：基于SVG技術(shù)主要面向網(wǎng)絡(luò)應(yīng)用，滿足Web對動態(tài)、可縮放和與平臺無關(guān)地展現(xiàn)復(fù)雜內(nèi)容并實現(xiàn)靈活交互的需求的優(yōu)點，它正逐漸的被廣泛應(yīng)用于網(wǎng)絡(luò)圖形開發(fā)。針對傳統(tǒng)電子地圖在網(wǎng)絡(luò)交互中表現(xiàn)出的不足，結(jié)合ASP技術(shù)，開發(fā)C/S模式的SVG電子地圖查詢系統(tǒng)，以JavaScript作為腳本工具，實現(xiàn)與SVG地圖在網(wǎng)頁中的動態(tài)交互以及使用ASP訪問數(shù)據(jù)庫查詢詳細(xì)的地圖信息。當(dāng)實際地圖信息發(fā)生改變時，可以根據(jù)客戶端需要對地圖具體位置增加或刪除相應(yīng)的元素，或修改地圖元素的屬性，快速并輕松的完成對地圖的更改。

關(guān)鍵詞：SVG；地圖；JavaScript；SQL；ASP

中圖法分類號：TP311.52文獻(xiàn)標(biāo)識碼: A文章編號：1009-3044(2008)28-0226-04

Interactive Technology in Electronic Map Application Based on SVG of ASP

DU Fei，YANG Chun-yao，QUE Yun-hua，HUANG Hao-jie，ZHAO Yue

(Department of Mathematics， Institute of Mathematics and Statistics， Yunnan University Kunming 650091， China)

Abstract: Based on benefits of the SVG technology mainly facing the network application， meeting the demand of dynamic，scalablity and platform-independent and showing flexibility to achieve complex interactive content， it is gradually being widely used in the development of network graphics. Againsting the deficiences shown in interaction of network of traditional electronic map， with the current mature technology of ASP to develop SVG electronic map query system， using JavaScript as script tool to achieve the dynamic interaction to SVG map in Web ，and using ASP technology to access the database for a detailed map information.When the actual map information changed，it will be quick and easy to append or delete the appropriate element of specific map location，or modify the property of the element according to the need of client.

Key words: SVG; map; Javascript; SQL; ASP

1 引言

隨著電子地圖在網(wǎng)絡(luò)的發(fā)展中以及SVG所具有的優(yōu)越性，使用SVG技術(shù)開發(fā)電子地圖越來越多。SVG (Scalable Vector Graphics)作為XML的一個子集，是一種全新開放的矢量圖形及動畫格式的標(biāo)準(zhǔn)，具有良好的數(shù)據(jù)存儲能力、可擴(kuò)展性，更適于網(wǎng)絡(luò)傳輸。利用SVG技術(shù)，根據(jù)地圖信息將地圖分解成若干基本元素和組合元素形成的節(jié)點，地圖符號設(shè)計及顏色填充、可復(fù)用的模式填充，濾鏡效果等，使整幅地圖頁面美觀。對DOM接口的支持，可以通過JavaScript動態(tài)的得到SVG文檔的DOM樹結(jié)構(gòu)，改變或控制地圖所有的元素、屬性、屬性值，實現(xiàn)頁面交互。傳統(tǒng)的地圖只能作為一個整體和腳本實現(xiàn)交互，而且壓縮率小，交互性及網(wǎng)絡(luò)傳輸受到限制。ASP(Active Server Page)是Microsoft公司開發(fā)的WEB 服務(wù)器端腳本開發(fā)環(huán)境，利用它可以生成動態(tài)的、高效的Web應(yīng)用程序，并且它為JavaScript提供了一個運(yùn)行的環(huán)境，通過建立數(shù)據(jù)庫聯(lián)接，在服務(wù)器端根據(jù)條件做SQL查詢和交互，并將結(jié)果返回給客戶端瀏覽器顯示。ASP與SVG技術(shù)結(jié)合，實現(xiàn)了更好的圖形的組織結(jié)構(gòu)化，在服務(wù)器端實現(xiàn)交互，減輕了客戶端的要求。

2 系統(tǒng)結(jié)構(gòu)

SVG地圖頁面，查詢系統(tǒng)根據(jù)客戶端的查詢需求，查詢條件的判別，和頁面的動態(tài)交互等綜合考慮，得到圖1所示系統(tǒng)結(jié)構(gòu)：

2.1 SVG地圖的設(shè)計

2.1.1 基本圖形符號設(shè)計及其填充

基本圖形符號作為地圖設(shè)計的基礎(chǔ)，結(jié)合SVG的文字處理功能，使地圖信息的表達(dá)更生動。SVG六種基本元素、、、、、和圖形符號設(shè)計，將不同的元素按照不同的位置，層次，顏色填充等進(jìn)行組合，以“element sets …”、“element sets… ”和…的方式將其設(shè)計為一個基本地圖符號。

在地圖設(shè)計中使用 或fill=\"url(#name)\" 引用設(shè)計好的圖形符號進(jìn)行填充，不僅能形象地表達(dá)出地圖的基本信息，而且圖形符號的復(fù)用還大量減少了生成圖形代碼的編寫。例如：設(shè)計一個足球場圖形，可以設(shè)計一顆小草作為圖形符號，使用此符號來填充足球場的草場區(qū)域，這樣圖形會更形象美觀，如圖2所示。

2.1.2 填充顏色的面符號設(shè)計

對于平面地圖大多使用顏色填充的面符號設(shè)計，如湖水用深藍(lán)色填充。SVG規(guī)范提供了對基于幾何圖形、路徑和文字進(jìn)行填充操作的通用屬性 “fill” (填充)。“fill” (填充)屬性指定用來填充對象內(nèi)部區(qū)域的顏料。一般情況下，該屬性是一種顏色，但也可以是漸變或圖案。這個值通常是關(guān)鍵字、顏色說明或指向預(yù)定義元素的 URI。另外，“fill” (填充)屬性具有子屬性，也可以設(shè)置子屬性來創(chuàng)建不同的效果。

顏色對于平面地圖極其重要，不同的顏色代表著不同的地理信息。顏色填充可以直接使用0-255之間的RGB 值指定，也可以使用約150個顏色關(guān)鍵字中的一個來間接指定。

2.1.3 地圖標(biāo)注

地圖符號是根據(jù)局部地理信息抽象設(shè)計而來，在整幅地圖中需要加上具體地理位置的標(biāo)注才可以使地圖信息的表達(dá)更加完整。

SVG圖像可以包含文本，對文本的大量控制，可以獲得很好的圖形效果而不必失去真實紋理信息的圖像。SVG提供元素，可以用來在SVG圖象中插入普通的文字，還可以在元素中嵌入、子元素以重新設(shè)置文字的位置、角度等其他參數(shù)，將地圖標(biāo)注文字按照路徑排列文字，其使用方式為：路徑標(biāo)注 。這種地圖標(biāo)注大量使用在標(biāo)注山脈，河流，公路鐵路等，通過地圖標(biāo)注對地圖信息會使地圖更加清楚，如圖2所示。

2.2 JavaScript在客戶端實現(xiàn)與SVG的交互

SVG作為XML的一個子集，是一種適用于網(wǎng)絡(luò)的圖像格式，它擁有體積小，易于修改，可縮放等普通矢量圖形的優(yōu)點，還具有針對網(wǎng)絡(luò)交互的功能?；赟VG對DOM(Document Object Model)的支持，JavaScript腳本通過對SVG的DOM與SVG文檔聯(lián)系在一起，控制修改SVG及內(nèi)部元素的屬性，實現(xiàn)在客戶端的交互。傳統(tǒng)的柵格圖片只能作為一個整體和腳本交互，基于如SVG圖片內(nèi)部元素的交互難以實現(xiàn)的。

SVG的交互性體現(xiàn)在三個方面：超鏈接，事件，腳本交互。

2.2.1 超鏈接

SVG的內(nèi)部元素支持超鏈接，這為實現(xiàn)最基本的交互提供了可能。內(nèi)部元素可以是基本元素，也可以是＜g＞…＜/g＞組合成的圖形。

例如：＜a xlink:href=\"http://www.lib.ynu.edu.cn\" target=\"blank\"＞

＜rect id=… /＞＜text …＞text＜/text＞＜/a＞

2.2.2 事件響應(yīng)

SVG圖形元素支持事件響應(yīng)。常用的有鼠標(biāo)事件和鍵盤事件，使用最多的是鼠標(biāo)事件，mouseover， mouseout， mousedown，onclick等。和SVG中的動畫元素結(jié)合，可以修改元素自身的屬性和通過引用id 的方式控制其它元素的屬性。例：

＜animate attributeName=\"viewBox\"

begin=\"element.click\"

dur=\"1s\" from=\"10 10 810 610\" to=\"10 150 400 150\"

fill=\"freeze\"

accumulate=\"none\"

additive=\"replace\"

calcMode=\"linear\"

restart=\"always\"/＞

2.2.3 腳本交互

SVG支持腳本操作，使用腳本可以實現(xiàn)比事件響應(yīng)更人性化的交互。SVG支持內(nèi)嵌腳本，也可以與外部腳本交互。因SVG屬于XML語法，在使用內(nèi)嵌腳本時要符合XML語法：

＜script type=\"text/javascript\"＞

＜![CDATA[function set_fill(evt)

{var obj=evt.target;

．．．}]]＞

＜/script＞

調(diào)用元素對象的getData，getAttribute等方法獲得某種屬性，調(diào)用對象的如setAttribute等方法可以實現(xiàn)動態(tài)的交互。

在網(wǎng)頁中用＜embed src=\"what.svg\" name=\"none\"…＞ ＜/embed＞標(biāo)簽來嵌入一個SVG文檔，外部腳本和內(nèi)嵌腳本在使用的本質(zhì)上一樣，但需要一些中間環(huán)節(jié)，必須先定義一個name屬性，然后引用其內(nèi)部變量。

var doc=document.none.getSVGDocument();

var docobj=doc.getElementById(\"mainmap\");

以getSVGDocument方法，獲得SVG的DOM文檔，調(diào)用getElementById方法獲取文檔內(nèi)部的”id”標(biāo)識來元素對象，也可以在文檔中追加或刪除元素對象。

以下為腳本應(yīng)用地圖簡略信息的交互顯示實例：

當(dāng)已經(jīng)獲得鼠標(biāo)的位置px，py和平移坐標(biāo)ctx和cty之后，顯示相關(guān)信息，關(guān)鍵代碼如下：

viewtelem.childNodes.item(0).data = txt;

viewrelem.setAttribute(\"x\"， px-ctx);

//計算要顯示的rect框的位置

viewrelem.setAttribute(\"y\"， py-cty-10);

viewtelem.setAttribute(\"x\"， px-ctx+8);

//計算要顯示的text文字的位置

viewtelem.setAttribute(\"y\"， py-cty+1);

viewrelem.setAttribute(\"width\"，

viewtelem.getComputedTextLength() + 12);

//計算rect寬度

viewtelem.setAttribute(\"style\"， \"fill: #48C82B; font-size: 12px; visibility: visible\");

viewrelem.setAttribute(\"style\"， \"fill: #4E5BBB; stroke: #000000; stroke-width: 1.0px; visibility: visible\");

當(dāng)某元素發(fā)生mouseover事件后將其屬性visibility設(shè)置為”visible”.當(dāng)發(fā)生mouseout事件時將其置為”hidden”，即可實現(xiàn)簡略信息的交互。當(dāng)然，也可以在這個過程中將和SVG地圖相關(guān)的一些圖片信息給以顯示，呈現(xiàn)更強(qiáng)的交互性。

3 地圖位點信息的數(shù)據(jù)庫建立

建立地圖信息數(shù)據(jù)庫。以Buildings、Mainroad和Road三個數(shù)據(jù)表來分別存儲建筑物信息、主干道信息和路徑信息。地圖的建立過程，在保證數(shù)據(jù)信息的豐富，完整的基礎(chǔ)上還充分考慮了數(shù)據(jù)冗余，查詢優(yōu)化等因素，使之成為一個高效的數(shù)據(jù)庫。

4 利用ASP查詢詳細(xì)信息

4.1 客戶端查詢信息的驗證

驗證客戶輸入的查詢條件是為了避免錯誤條件的輸入和安全性，因此必須在客戶輸入查詢條件的時候就要檢驗查詢條件的合法性。使用JavaScript腳本來驗證查詢條件，根據(jù)返回值來驅(qū)動事件句柄以響應(yīng)單擊事件 ，若返回值為假，則給出錯誤提示。

當(dāng)客戶端得到正確的查詢條件后向服務(wù)器請求處理相關(guān)的數(shù)據(jù)，服務(wù)器端將處理的結(jié)果按照HTTP協(xié)議再傳到客戶端的瀏覽器。在沒有特別說明的情況下，服務(wù)器將結(jié)果返回到一個新的頁面上來，為了實現(xiàn)查詢信息在當(dāng)前頁面返回，可以使用以下腳本來處理：

＜form method=\"提交方法\"

action=\"服務(wù)器端文件名\"＞

＜!--webbobot=\"SaveResults\"

//在當(dāng)前頁面顯示服務(wù)器端的返回結(jié)果；

U-File=\"返回結(jié)果的頁面文件名.csv\"

S-Format=\"TEXT/CSV\"

S-Label-Fields=\"TRUE\" startspan --＞

＜input TYPE=\"hidden\"

NAME=\"VTI-GROUP\" VALUE=\"0\"＞

＜!--webbot bot=\"SaveResults\"

i-checksum=\"43374\" endspan --＞

＜/form＞

4.2 在ASP環(huán)境中使用JavaScript腳本操作數(shù)據(jù)庫

盡管ASP環(huán)境中有許多內(nèi)置對象支持?jǐn)?shù)據(jù)庫的動態(tài)交互，可是它本身并不能夠直接操作數(shù)據(jù)庫里面提取的數(shù)據(jù)。因此需要在ASP中使用JavaScript腳本通過數(shù)據(jù)庫訪問組件(ADO)來實現(xiàn)數(shù)據(jù)庫的訪問和相關(guān)操作。由于數(shù)據(jù)庫是以元組為單位進(jìn)行操作，是面向集合的處理，而JavaScript編程則是基于變量的處理。為了使二者在處理數(shù)據(jù)時能夠相互協(xié)調(diào)，可以使用JavaScript定義一個緩沖區(qū)來存放從數(shù)據(jù)庫中提取的記錄。

使用ADO數(shù)據(jù)庫組件訪問數(shù)據(jù)庫，首先要建立一個數(shù)據(jù)庫的連接對象。使用ADO的Connection對象來建立數(shù)據(jù)庫的連接對象，它是ADO對象模型的頂層對象，ADO通過該對象與數(shù)據(jù)庫建立連接，其他的ADO對象都要依賴于該連接來實現(xiàn)對數(shù)據(jù)庫的操作。此外，Connection對象還可以通過數(shù)據(jù)庫事務(wù)來保證對數(shù)據(jù)源的操作成功。

4.3 使用Parameter對象進(jìn)行參數(shù)查詢

由于從客戶端得到的查詢條件可能不止一個，就要考慮使用JavaScript實現(xiàn)多個參數(shù)查詢?？梢允褂肁DO中的Command對象中的子對象Parameter對象來實現(xiàn)參數(shù)化查詢。使用Parater對象進(jìn)行參數(shù)查詢的時候，采用以下步驟來進(jìn)行：

1)建立一個用于存儲參數(shù)的Parameter對象，而且在該對象中所存儲的參數(shù)名稱要和SQL語句中的查詢參數(shù)相同。例如：

Select * from mappath where path=?;

2)建立一個Parameter對象：

Var para=command.CreateParrameter

(“path”，adVarChar.adParamInput，”梓苑”)；

調(diào)用Parameters集合的Append方法，將該P(yáng)arameter集合添加到Command對象中的Parameters集合中就可以查詢了。

3)一個問題是關(guān)于查詢參數(shù)類型的處理。在SQL條件查詢條件的參數(shù)類型是字符串類型，所以查詢過程中需要將輸入的查詢的條件用JavaScript中的string()方法將其轉(zhuǎn)化為字符串，這樣在SQL查詢語句中得到的就是查詢條件才是正確的數(shù)據(jù)類型，否則將出錯。

4.4 查詢結(jié)果的提取和格式輸出

在ADO的Command對象執(zhí)行了SQL語句之后，返回的結(jié)果需要使用ADO中的Recrdset對象來得到返回值，根據(jù)相關(guān)的需要設(shè)置Recordset的相關(guān)屬性，如游標(biāo)的移動、分頁顯示等，將結(jié)果顯示出來。

值得一提的是，雖然在ADO的Recordset對象的屬性中有很多關(guān)于返回結(jié)果的屬性，但是對于需要更加靈活的輸出格式或者是指定的輸出區(qū)域，這些屬性不能滿足靈活的要求。這時就可以使用JavaScript和HTML的標(biāo)記來完成指定的輸出格式。使用ADO中的filed 對象來將返回值按照數(shù)據(jù)庫中的字段以指定的格式和位置輸出。

4.5 SVG圖形的查詢定位顯示

在查詢中先獲取SVG的DOM文檔，據(jù)查詢條件關(guān)鍵字通過getElementByid和id來獲取查詢信息的地圖坐標(biāo)，修改SVG的viewbox屬性的數(shù)值，實現(xiàn)圖形的放大，居中定位顯示。

查詢結(jié)果顯示如圖3。

5 結(jié)束語

基于符號設(shè)計等的SVG地圖的生成，實現(xiàn)了基于ASP的網(wǎng)絡(luò)交互和地圖查詢功能，為新的地圖開發(fā)提供了一種可能。SVG地圖設(shè)計的高度文本化、結(jié)構(gòu)化，很好的解決了目前網(wǎng)絡(luò)地圖傳輸?shù)膯栴}，其作為一種新技術(shù)，在以后的網(wǎng)絡(luò)傳播中，會得到進(jìn)一步的發(fā)展。

參考文獻(xiàn)：

[1] 馬桂峰，王金才，陳景武，劉鵬濤.基于ASP 技術(shù)的網(wǎng)絡(luò)化實驗教學(xué)系統(tǒng)的研究與實現(xiàn)[J].計算機(jī)工程與設(shè)計，2007，28(7):1735-1737.

[2] 高峰，談俊忠.JavaScript 在基于SVG的網(wǎng)絡(luò)地圖中的應(yīng)用[J].江西師范大學(xué)學(xué)報(自然科學(xué)版)，2004，28(3):264-265.

[3] 尹章才，李霖，王錚，申怡.基于SVG的地圖符號設(shè)計與實現(xiàn)[J].測繪科學(xué)，2006，31(5):97-99.

[4] 陳曦.基于javascript及Java的SVG交互應(yīng)用[J].科技咨詢，2006，(7):69-70.

[5] 陳瑞紅.基于SVG 的新一代的網(wǎng)頁設(shè)計[J].福建電腦2005，(12):116-117.

[6] 侯曉靜，等.基于SVG的網(wǎng)絡(luò)圖形制作方法研究[J].電力系統(tǒng)通信，2007，(28):43-46.

[7] 涂超.基于SVG的地圖應(yīng)用開發(fā)[J].武漢大學(xué)學(xué)報，2004，37(2):45-48.

[8] David Flanagan. JavaScript權(quán)威指南(第五版)[M].李強(qiáng)譯.北京:機(jī)械工業(yè)出版社，2007:241-562.