基于ＡＳＰ的ＳＶＧ交互技術在電子地圖中的應用

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

關鍵詞：SVG；地圖；JavaScript；SQL；ASP

中圖法分類號：TP311.52文獻標識碼: 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 引言

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

2 系統結構

SVG地圖頁面，查詢系統根據客戶端的查詢需求，查詢條件的判別，和頁面的動態交互等綜合考慮，得到圖1所示系統結構：

2.1 SVG地圖的設計

2.1.1 基本圖形符號設計及其填充

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

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

2.1.2 填充顏色的面符號設計

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

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

2.1.3 地圖標注

地圖符號是根據局部地理信息抽象設計而來，在整幅地圖中需要加上具體地理位置的標注才可以使地圖信息的表達更加完整。

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

2.2 JavaScript在客戶端實現與SVG的交互

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

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

2.2.1 超鏈接

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

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

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

2.2.2 事件響應

SVG圖形元素支持事件響應。常用的有鼠標事件和鍵盤事件，使用最多的是鼠標事件，mouseover， mouseout， mousedown，onclick等。和SVG中的動畫元素結合，可以修改元素自身的屬性和通過引用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支持腳本操作，使用腳本可以實現比事件響應更人性化的交互。SVG支持內嵌腳本，也可以與外部腳本交互。因SVG屬于XML語法，在使用內嵌腳本時要符合XML語法：

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

＜![CDATA[function set_fill(evt)

{var obj=evt.target;

．．．}]]＞

＜/script＞

調用元素對象的getData，getAttribute等方法獲得某種屬性，調用對象的如setAttribute等方法可以實現動態的交互。

在網頁中用＜embed src=\"what.svg\" name=\"none\"…＞ ＜/embed＞標簽來嵌入一個SVG文檔，外部腳本和內嵌腳本在使用的本質上一樣，但需要一些中間環節，必須先定義一個name屬性，然后引用其內部變量。

var doc=document.none.getSVGDocument();

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

以getSVGDocument方法，獲得SVG的DOM文檔，調用getElementById方法獲取文檔內部的”id”標識來元素對象，也可以在文檔中追加或刪除元素對象。

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

當已經獲得鼠標的位置px，py和平移坐標ctx和cty之后，顯示相關信息，關鍵代碼如下：

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\");

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

3 地圖位點信息的數據庫建立

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

4 利用ASP查詢詳細信息

4.1 客戶端查詢信息的驗證

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

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

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

action=\"服務器端文件名\"＞

＜!--webbobot=\"SaveResults\"

//在當前頁面顯示服務器端的返回結果；

U-File=\"返回結果的頁面文件名.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環境中使用JavaScript腳本操作數據庫

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

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

4.3 使用Parameter對象進行參數查詢

由于從客戶端得到的查詢條件可能不止一個，就要考慮使用JavaScript實現多個參數查詢。可以使用ADO中的Command對象中的子對象Parameter對象來實現參數化查詢。使用Parater對象進行參數查詢的時候，采用以下步驟來進行：

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

Select * from mappath where path=?;

2)建立一個Parameter對象：

Var para=command.CreateParrameter

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

調用Parameters集合的Append方法，將該Parameter集合添加到Command對象中的Parameters集合中就可以查詢了。

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

4.4 查詢結果的提取和格式輸出

在ADO的Command對象執行了SQL語句之后，返回的結果需要使用ADO中的Recrdset對象來得到返回值，根據相關的需要設置Recordset的相關屬性，如游標的移動、分頁顯示等，將結果顯示出來。

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

4.5 SVG圖形的查詢定位顯示

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

查詢結果顯示如圖3。

5 結束語

基于符號設計等的SVG地圖的生成，實現了基于ASP的網絡交互和地圖查詢功能，為新的地圖開發提供了一種可能。SVG地圖設計的高度文本化、結構化，很好的解決了目前網絡地圖傳輸的問題，其作為一種新技術，在以后的網絡傳播中，會得到進一步的發展。

參考文獻：

[1] 馬桂峰，王金才，陳景武，劉鵬濤.基于ASP 技術的網絡化實驗教學系統的研究與實現[J].計算機工程與設計，2007，28(7):1735-1737.

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

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

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

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

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

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

[8] David Flanagan. JavaScript權威指南(第五版)[M].李強譯.北京:機械工業出版社，2007:241-562.