用SVG技術實現基於Web的GIS

來源:互聯網
上載者:User
web 引言

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在內的各個方面得到廣泛應用。




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。