來源：SVG中國(CHINASVG.COM)
摘要:討論了基于SVG的網絡地圖符號的設計與顯示問題;首先介紹了常用地圖符號的描述模型和SVG的概念;然后根據地圖符號的結構特征和SVG的自身特點,提出基于SVG的地圖符號描述模型;重點進行了點、線和面3種類型的基于SVG地圖符號設計,為地圖符號的結構化描述和符號庫共享提供了一種通用的實現方法,這些地圖符號可以在WebGIS中得到充分應用。獲得的結論對于相關技術及專業的應用研究具有一定的借鑒作用。
關鍵詞:SVG;地圖符號;WebGIS
圖形符號,也就是常說的地圖符號和圖表是地圖符號系統的主體,包括點狀符號、線狀符號和面狀符號[1]。SVG能描述任意復雜的圖形,但由于地圖符號的復雜性,在將地圖符號用SVG格式描述時,還有許多問題有待解決。SVG目前僅支持一些基本的圖形元素,但遠不能滿足應用的要求。為了能夠有效地通過SVG來對地圖符號進行描述,就必須將地圖符號按照SVG標準進行設計。
地圖符號的描述模型通常表現為3個層次:一是地圖符號圖元,是構成地圖符號的基本要素;二是地圖符號模板,由圖元按照一定的規則構成;三是地圖符號,按照一定的配置規則將空間信息用符號模板進行符號化。配置規則是一種操作,點、線和面操作分別對應于平移、映射和填充。文中操作是將文字配置在參考位置上,參考位置可以是點、線或面。當為參考點時,將文本平移到點位置;當為線時,將文本映射到線上,使得文本沿線配置;當為面時,可以將面分解為中心點、中軸線或邊界線,再在點或線上配置文本。符號模板包括點、線、面模板以及注記,并聲明了一系列形式化參數[2]。
SVG是W3C制定的基于XML開放標準的文本式標記語言,支持矢量圖形,如矩形、圓形、橢圓形、多邊形、貝塞爾曲線等。同時,SVG還引入了平面設計中路徑和剪裁路徑的概念,使得SVG與其他XML應用的協作變得十分簡單,因此其擴展性很強,可以表達任意復雜的圖像[3]。還有靈活的坐標控制手段,可以將用戶自定義的符號加入其中,可以說它是圖形、圖像和文字的有機統一。它提供了6種類型的對象,其中包括矢量圖形、圖像、漸變填充、濾鏡操作、可重復單元和文本。它對于圖形對象可進行組合、添加樣式、幾何變換、復合等操作。特征集包括嵌套變換、剪切路徑、Alpha蒙版、濾鏡效果、模板對象和動畫效果,這些都極大地豐富了圖形圖像的顯示效果。
在理論上,這些SVG對象的組合可以構筑任意復雜的圖形/圖像。根據功能不同,SVG的主
要對象可以歸為基本要素對象(矩形、圓、橢圓、直線、折線、曲線和多邊形)和頁面描述功能對象(文字、圖像、路徑、交互事件)兩大類[4]。這兩種對象可以組合成各種地圖符號模板,地圖符號模板經過環境配置(填充、平移、重復、變形、變長、漸變、隨機和自定義屬性)構成了地圖符號。描述模型如圖1所示。
圖1 SVG地圖符號描述模型
基于SVG的地圖符號的具體設計符號模板是由圖元對象和頁面描述對象相結合構成的,在SVG圖像顯示中是可重用的。通常做法是在文檔的定義部分(作為<defs></defs>元素的一部分)指定以后可在圖像主體中調用的標識來創建。地圖符號是按照一定的規則,將符號模板配置在相應的位置上顯示地理信息的。
3.1點狀符號
點狀符號是由不同形狀的幾何圖形單元組合構成的,通過對點狀符號的幾何形狀特征進行分析,可以將構成點狀符號的幾何圖形單元分為:點、圓、圓弧、橢圓、矩形、多邊形、直線、折線等基本圖元。SVG提供了<circle>、<ellipse>、<line>、<polyline>、<rect>、<polygon>等6種基本的圖形元素,可以很好地對構成點狀符號的基本圖元描述,從而實現對點狀符號描述。
點狀符號都有明確的定位點和方向性。根據點狀符號的方向性,可以將點狀符號分兩類:一類為固定方向的,如GPS點、三角點等,另一類為不固定方向的,如不依比例尺的車站、橋梁等,如圖2所示。
圖2 SVG點狀符號
具體方法如下(部分代碼):
<defs>
<polyline id="qiao" points="5,20"/>
</defs>
<use xlink:href = "# qiao" transform = "rotate(180) translate
(-80,-80)"/>
對于符號方向不固定的,方向的控制可以在調用該符號時,通過設置圖形分組元素的屬性“rotate”(旋轉)來實現。
3.2線狀符號
線狀符號用來表示空間上1維的地理現象,它有一個顯著的特點是都有一條有形或無形的空間定位線。根據線狀符號的分解特性和圖形的對稱特性,將線狀符號分為兩類。一類為普通的線狀符號,如等高線、等深線等,如圖3所示。另一類為模式化的線狀符號,這類符號以定位線為基準,以某一基本圖形單元為循環體沿定位線生成,如高速公路、鐵路等,如圖3所示。
SVG文檔中的大多數可視化元素都可以使用“style”(樣式)屬性來定義圖形的渲染方式。
“style”的參數多種多樣,幾乎涵蓋了從文字到圖形、從色彩到濾鏡等各個方面[5]。其中,參數fill說明圖形的填充樣式;參數stroke說明描邊線條的顏色。下面的幾個參數都是“stroke”的附加參數。
stroke-width:說明描邊線條的寬度;
stroke-linecap:說明描邊線條端點的繪制樣式,有“butt”(正常)、“round”(圓形)和“square”(方形)3種;
strokelinejoin:說明描邊線條拐角處的過渡形狀,有“miter”(正常)、“round”(圓弧)和“bevel”(斜面)3種;
strokedasharray:說明描邊線條的線型,用來定義虛線;
stroke-dashoffset:說明描邊模板(如虛線)的起始偏移量,缺省是從起點開始。
對第一類線狀符號而言描述比較簡單,使用折線<polyline>或路徑<path>描述,設置相應的線色、線寬等參數即可。
第二類線狀符號的描述較復雜,不能直接使用<polyline>或<path>來實現。目前,都是用path和polyline描述線狀符號[3,6],實際上只提到了第一類線狀符號的描述,都沒有涉及到第二類線狀符號的描述。對于第二類線狀符號,從圖3可以看出,這類線狀符號的構圖都以一個基本單元為基礎循環配置而成。文中描述這類符號的方法是:預先描述一個基本模板,然后在具體畫線時引用這個基本的模版,具體采用GIS中線狀符號的配置方法。
圖3 SVG線狀符號
具體方法如下(部分代碼):
<symbol id="symbolized">
<polyline points="5,20"/>
</symbol>
<use xlink:href="#symbolized" mce_href="#symbolized" fill = "none" stroke = "
black" stroke-width="16"/>
3.3面狀符號
面狀符號都有一個或多個有形或無形的封閉邊界線,為了區別地物的性質和地理現象空間分布的數量、質量等特征,面狀符號常采用一定的填充方式。根據填充方式的不同,面狀符號可分為3類:第一類是用顏色填充的面狀符號,如依比例尺的湖泊、河流等;第二類是用暈線填充的面狀符號,如依比例尺的沼澤地、鹽田等;第三類是用點狀符號填充的面狀符號,如草地、森林等。
對于第一類面狀符號只需設置填充顏色即可實現;對于第二類和第三類可以采用模式填充的方法實現,文中主要針對后兩類面狀符號的描述進行闡述。后兩類面狀符號描述的方法是:首先定義填充的模式(pattern),也就是定義用于填充的圖案,定義模式的元素是<pattern>,并設置該模式的“id”屬性;然后,在被填充區域渲染時引用該模式,模式的引用格式是url(#id)。模式的定義原理是:首先,定義一個矩形區域作為基本的填充單元,然后,按面狀符號的構圖規律描述填充的圖案,如圖4所示。
圖4 SVG面狀符號
具體方法如下(部分代碼):
<pattern id="pattern1" ">
<pathd="M2.52 L2.54"/>
</pattern>
<g>
<path style="fill:url(#pattern1)" d="M9.522 z"/>
</g>
SVG作為一種圖形標記語言,不僅具有描述圖形的功能,還可以直接顯示圖形符號,這是其他標記方法不能實現的。地圖是傳遞地理信息的工具,地圖符號則是傳遞地理信息的手段,最終地理信息都要以地圖符號的形式表現出來。因此,這就涉及到地圖的符號化,簡而言之,就是地圖符號的使用。實際上,可以把每一種點狀符號看作是一個基本的圖形單元、把每一種線狀符號看作是一種線型樣式、把每一種面狀符號看作是一種模式填充的方式,這樣,地圖符號的引用,可以歸結為對基本圖形單元、線型樣式和模式填充方式的引用。一幅SVG格式的鄭州市地圖實現如圖5所示。
圖5 WebGIS中的SVG應用
具有統一的標準和開放性是SVG優點所在,統一的標準便于加強交流與共享,開放性有利于自身發展強大。另外,體積小、可縮放、可鏈接等特點使SVG成為未來網上圖形傳輸發展方向。通過SVG地圖符號描述地理信息,相信它必將成為推動WebGIS和空間信息技術發展的動力。
和萬禮,崔鐵軍,劉興科 信息工程大學測繪學院,河南鄭州 450052
陳應東 68029部隊,甘肅蘭州 730020)
- 參考文獻:
[1]華一新.地理信息系統[M].北京:解放軍出版社,2001:267290.
[2]尹章才,李霖.基于SVG的地圖符號描述模型研究[J].武漢大學學報(信息科學版),2004,(6)
:544547.
[3]孫少紅,邊馥苓.SVG網絡圖像標準支持下的地圖顯示[J].測繪信息與工程,2002,(8):1516.
[4]周強中,談俊忠.SVG在WebGIS中的應用[J].計算機應用研究,2003,(1):108121.
[5]劉嘯,畢永年.基于XML的SVG應用指南[M].北京:北京科海集團公司,2001:3943.
[6]周文生,胡鵬,賈永紅.Web環境下SVG地圖瀏覽器的設計與實現[J].測繪學院學報,2003,(2)
:4347.