VML繪製WebGis地理信息

SVG和VML的WebGis地理信息系統

WebGIS是Internet與GIS結合的產物,是利用WWW向用戶提供地理空間信息服務的地理信息系統。社會信息化、網絡技術的蓬勃發展爲WebGIS提供了廣闊的發展空間。可是,傳統的Web圖形格式因受到傳輸顯示的影響,不能適應WebGIS的發展須要,而成爲WebGIS面臨的技術瓶頸和挑戰。所以必須在現有的網絡和硬件條件下,從軟件方面解決系統圖形網絡傳輸的速度問題。其中,圖形技術發揮着相當重要的做用,可升級矢量圖像( SVG, Scalable Vector Graphics)和VML (Vector Markup Language)的產生有着十分積極的意義。它具備支持矢量圖和動畫、由文本構成圖形易於操做、對點陣圖形兼容等特色。然而，不一樣瀏覽器對兩種標準的支持並不一致，微軟的IE瀏覽器系列對VML支持比較好，而其餘的瀏覽器軟件對SVG標準支持更完美。這也使得開發基於Web的圖形系統變得更加複雜。

多比圖形控件出現簡化了的這種開發難度，它是一款基於Web的矢量圖形控件，可以檢測瀏覽器類型，自動選擇VML或SVG方案進行作圖， 相似於網頁上的Visio控件。

 

 

1 　多比控件技術概述

1. 1　VML技術

VML (VectorMarkup Language)是XML1. 0 的一個應用,使用VML能夠在IE 5. 0 以上版本中繪製矢量圖形。因爲VML是基於新一帶網絡標記語言XML 標準的,也就是說,表示方法簡單,易於擴展,數據與表現相分離,同時VML 支持高質量的矢量圖形顯示,它基於相鏈接的直線和曲線描述路徑。其次VML 由文本構成,能夠很方便地融合到HTML文件中,可用不多的字節來表示較複雜的圖像,能夠和其它HTML元素同樣使用VML元素,在客戶端瀏覽器顯示圖像。VML可使用DHTML大部分屬性和事件,如id, onmouseover等。最後VML 的功能不僅是繪圖,它能夠在圖形中嵌入文本,並可實現超鏈,經過腳本控制還能夠實現動畫效果。

1. 2　SVG技術

SVG是一種基於XML的開放的矢量圖形描述語言。SVG圖像是與XML110兼容的文檔, SVG元素是指示如何繪製圖像的一些指令,閱讀器(Viewer)解釋這些指令,把SVG圖像在指定設備上顯示出來。使用SVG能夠在網頁上顯示出各類各樣的高質量的矢量圖形,支持不少您想象得出的功能:幾何圖形、動畫、漸變色、濾鏡效果等。最關鍵的是,它也是徹底用普通文原本描述的。也就是說,這是一種專門爲網絡而設計的基於文本的圖像格式。

 

1. 3 多比控件簡介

多比圖形控件出現簡化了的這種開發難度，它是一款基於Web的矢量圖形控件，可以檢測瀏覽器類型，自動選擇VML或SVG方案進行作圖，相似於網頁上的Visio控件，是目前國內外最佳的基於web矢量圖解決方案，能夠用於電力、化工、煤炭、工控組態軟件、仿真、地理信息系統、工做流、複雜報表工業SCADA系統、ERP流程設計系統、圖形管理、圖形拓撲分析、GIS地理信息系統系統、工程製圖等領域。

多比圖形編輯器實現了圖形、圖像和文字的有機統一。它除了支持HTML 中經常使用的標記,如文本、圖像、連接、交互性、CSS的使用、腳本( Scrip t)外,還提供了大量針對圖形、圖像、動畫的特定標記。對SVG圖形文件進行編輯管理的過程爲: SVG圖形文件經XML 解析器打開,並在內存中生成一個對象樹,用鼠標事件來驅動腳本執行,腳本經過DOM接口對對象進行相關的操做,來實現圖形繪製、編輯等功能。

 

現實中的圖形數據多以CAD格式、Map Info等GIS軟件的數據格式存儲,要充分利用這些數據,在生成SVG圖形時, 咱們就須要將這些數據轉換爲SVG格式。

2在網頁中嵌入地圖

要實現SVG在瀏覽器中顯示,須要將SVG圖形對象

嵌入到網頁中,使用以下HTML代碼來實現:

$('#map-3').vectorMap({

                values: gdpData,

                scaleColors: ['#C8EEFF', '#006491'],

                normalizeFunction: 'polynomial',

                hoverOpacity: 0.7,

                hoverColor: false,

                onRegionOver: function(event, code){

                    $("#description div.p").css("display", "none");

                    var country = $("#" + code);

                    if(country.length>0){

                        country.css("display", "block");

                    }else{

                         $("#other").css("display", "block");

                    }

                },

                onRegionOut: function(event, code){},

                onRegionClick: function(event, code){}

});

4　經過JavaScrip t動態操做多比文檔

在瀏覽器中打開地圖文件時, 多比中間件做爲瀏覽器的一個嵌入對象出現,能夠很方便的經過script函數來獲取地圖圖形對象及其內部的圖形屬性。經過獲取這些對象和屬性,就能夠很方便地實現交互功能。多比中間件系統最基本的功能是地圖控制,多比自己提供圖形的縮放功能,但要經過操做鼠標時按指定的功能鍵才能實現,不適合GIS功能的須要,在WebGIS系統中將其屏蔽。但因爲多比中間件提供了豐富的消息觸發及事件響應函數,經過捕捉這些消息,來實現自定義的地圖控制功能。

 

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

4　小結

多比中間件作爲一種矢量圖形格式,能知足WebGIS圖形顯示的要求,在表示圖形的矢量信息時加入了圖形的顯示信息(即以什麼樣的樣式顯示矢量圖形) ,是顯示矢量圖形比較好的格式。並且它們的技術標準已經爲GIS專業軟件商所接受,相信不遠的未來, SVG對WebGIS的發展將會有深遠的影響。