基于SVG的旅游地圖符號庫的設(shè)計與實現(xiàn)

王喬俊,何原榮,李佳楠

(1.桂林旅游學(xué)院 旅游與休閑管理系，廣西 桂林 541006;2.廈門理工學(xué)院 計算機與信息工程學(xué)院，福建 廈門 361024;3.貴州財經(jīng)大學(xué) 管理科學(xué)與工程管理學(xué)院，貴州 貴陽 550004)

基于SVG的旅游地圖符號庫的設(shè)計與實現(xiàn)

王喬俊1,何原榮2,李佳楠3

(1.桂林旅游學(xué)院 旅游與休閑管理系，廣西 桂林 541006;2.廈門理工學(xué)院 計算機與信息工程學(xué)院，福建 廈門 361024;3.貴州財經(jīng)大學(xué) 管理科學(xué)與工程管理學(xué)院，貴州 貴陽 550004)

旅游地圖符號是傳播旅游信息,提供旅游服務(wù)的專題性地圖符號，是旅游地理信息系統(tǒng)(TGIS)中重要的組成部分。但傳統(tǒng)方法制作的符號標(biāo)準(zhǔn)不統(tǒng)一，可移植性較差。而SVG是矢量圖像格式，文件體積小，動態(tài)交互性強，便于傳輸和共享。因此，本文借助于SVG設(shè)計并實現(xiàn)旅游地圖符號,提高符號的可移植性,實現(xiàn)符號的規(guī)范化、標(biāo)準(zhǔn)化和實用性，為旅游信息的可視化表達提供基礎(chǔ)的圖形數(shù)據(jù)。

SVG;旅游地圖符號;設(shè)計；實現(xiàn)

旅游地圖符號是傳播旅游信息,提供旅游服務(wù)的專題性地圖符號[1],是旅游地理信息系統(tǒng)(TGIS)中重要的組成部分。但傳統(tǒng)的旅游地圖符號的制作一般通過Photoshop,Coreldraw,MapInfo等軟件繪制,缺少兼容性,可移植性較差。而旅游地圖符號設(shè)計的質(zhì)量將直接影響旅游地圖信息的傳遞效果,以及旅游地理信息可視化的表達和傳遞。因此,本文借助于SVG設(shè)計并實現(xiàn)旅游地圖符號,提高符號的可移植性,規(guī)范化旅游地圖符號，實現(xiàn)程序間的共享,為建立旅游地理信息系統(tǒng)提供基礎(chǔ)的圖形數(shù)據(jù)。

一、SVG繪制旅游地圖符號的格式及其設(shè)計原則

(一)SVG繪制旅游地圖符號的格式

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)，是基于可擴展標(biāo)記語言(XML)，用于描述二維矢量圖形的一種圖形格式[2,3]

Line是標(biāo)注你選擇的圖形要素，對于線要素而言，主要是找到線段的兩個端點值，而(X1，Y1)是起點的坐標(biāo)值，而(X2，Y2)是終點的坐標(biāo)，stroke是對線段的輪廓著色(none代表無色) stroke-opacity是透明度(0表示不透明)。對于標(biāo)簽而言，每個標(biāo)簽都必須有始有終，也就是有開始的<>和結(jié)束的樣式。

(二)設(shè)計原則

1.可移植性

在進行旅游地圖符號設(shè)計時,要考慮到設(shè)計的符號便于不同開發(fā)平臺的訪問和調(diào)用,減少符號的重復(fù)設(shè)計與開發(fā)工作,提高符號庫的使用效率。

2.象征性

在設(shè)計符號時要考慮到使整個旅游地圖符號便于識別和記憶。因此，可以采用一些象征意義的圖來表達，如餐飲點符號可以用刀叉組合符號來表達，酒吧用一個酒杯來表達，購物點可以用一個購物車來表達。

3.美觀藝術(shù)性

旅游地圖符號最終是為游客服務(wù)的,而旅游本身也是一種審美的提升。因此,在設(shè)計旅游地圖符號時要兼顧游客的審美心理,做到既美觀大方,又生動形象；既造型優(yōu)美,又色彩鮮明。

4.實用性

旅游地圖符號的設(shè)計要以實用為原則,不能過于標(biāo)新立異,設(shè)計過于復(fù)雜、深奧,讓人難以理解,不利于記憶，制作和使用也不方便。

二、SVG符號的繪制方法

(一)直接繪制

繪制SVG圖形的常用軟件包括Illustrator、Inkscape和Sketsa等。對于一些由簡單要素對象直接構(gòu)成的地圖符號而言，用軟件繪制操作簡便，不需要制作者具備SVG編程經(jīng)驗，降低了操作難度。如鋁礦和鎢礦等礦產(chǎn)資源類型符號由矩形、圓形和三角形等形狀簡單圖元構(gòu)造。因此，可用軟件直接繪制，繪制效果如圖1所示。

圖1 采用軟件繪制的SVG符號

但是通過軟件繪制并輸出的SVG文件格式并不是完全標(biāo)準(zhǔn)文件格式，缺少兼容性，需要修改文件頭的結(jié)構(gòu)代碼。以銅礦SVG代碼的修改為例：在Sketsa軟件中直接繪制生成的代碼如圖2(a)所示，該文件的格式和標(biāo)準(zhǔn)的SVG文件格式不同，文件頭的描述有些復(fù)雜，因為嵌入了Sketsa軟件自定義的調(diào)用格式。圖2(b)的SVG代碼是修改后的標(biāo)準(zhǔn)SVG文件代碼。一般都是由三個部分組成：文件版本和文件類型定義、文件中將要使用的圖元定義以及使用圖元畫圖。

(a)采用Sketsa軟件繪制并輸出的SVG文件

(b)按標(biāo)準(zhǔn)格式修改的SVG文件

圖2 Sketsa軟件輸出的銅礦點符號SVG文件

(二)編程法

這種方法適合那些能用數(shù)學(xué)表達方式描述的地圖符號，也適用于能夠由基本圖形元素聚集的符號。像珍珠巖和金剛石等，這類符號一般都含有弧形或者曲線等圖元，用軟件繪制準(zhǔn)確表達困難或者復(fù)雜，采用編程法很容易實現(xiàn)，而且代碼簡單，珍珠巖的編碼如下面所示，示意圖如圖1中的c所示。

//通過路徑繪制一個封閉的半圓弧，并填充顏色

(三)混合法

即編程與軟件相結(jié)合的方法。利用這種方法繪制的圖形一般都有一個共性，即圖形可以拆分為兩個部分：一部分是軟件提供的基本圖形組成；另一部分則必須要用編程才能實現(xiàn)的復(fù)雜圖元。如滑坡點、塌陷點、泥石流、崩塌點、噪聲監(jiān)測點、水塔等。

圖3 采用混合方式編制的礦區(qū)環(huán)境監(jiān)測符號

這種方式的優(yōu)點在于可以降低開發(fā)難度，節(jié)省時間，不足之處在于有時代碼稍微復(fù)雜。例如，水塔符號是由一個封閉圓弧和一個梯形組成。梯形可以用軟件提供的多邊形工具繪制，而封閉圓弧必須采用編程來實現(xiàn)，實現(xiàn)代碼如下：

//利用Sketsa軟件繪制梯形

//利用記事本編程繪制一個封閉的圓弧

三、基于SVG的旅游地圖符號的實現(xiàn)

(一)旅游地圖符號的實現(xiàn)流程

旅游地圖符號種類繁多、復(fù)雜，缺乏統(tǒng)一的標(biāo)準(zhǔn)格式。因此，設(shè)計與開發(fā)符號之前要對旅游地圖符號進行統(tǒng)計、分類整理，再按照符號的設(shè)計原則進行設(shè)計，最后用SVG開放式的語言來描述旅游地圖符號，實現(xiàn)的流程如圖4所示。

圖4 旅游地圖符號的實現(xiàn)流程

(二)旅游地圖符號的實現(xiàn)

本文以購物符號、酒店賓館符號、餐飲符號的設(shè)計為例闡述其實現(xiàn)理念和方法。購物符號的設(shè)計以線條和圓形組合成購物車形狀的象征意義的形象標(biāo)識，并以綠色渲染，體現(xiàn)和宣傳綠色、環(huán)保的購物理念，既符合旅游地圖符號的設(shè)計要求，又能體現(xiàn)出其深遠的教育意義功能；酒店賓館符號的設(shè)計以基本的幾何形狀組合而成，形象生動地表達了酒店賓館的內(nèi)涵，又體現(xiàn)了人性化的設(shè)計理念，便于游客理解和記憶；餐飲符號的設(shè)計沿用了普通公認(rèn)的一種設(shè)計標(biāo)識，用刀叉組合表達了整個餐飲的內(nèi)涵，既清晰明了，又具有通識性，而且用紅色來渲染此符號，象征一種活力、熱情和生命力，帶著一種正能量傳遞給游客，帶來更好的旅游體驗。本文用SVG實現(xiàn)一組旅游地圖符號的顯示效果如圖5所示。其中，實現(xiàn)酒店賓館的核心代碼如下：

圖5 旅游地圖符號的SVG設(shè)計效果

//酒店賓館符號

四、總結(jié)

本文研究了一套旅游地圖SVG符號編制方法，應(yīng)用實踐表明編制的SVG旅游地圖符號為旅游信息的可視化表達與網(wǎng)絡(luò)傳播提供了較好的技術(shù)解決方案。而且，SVG圖像具有動態(tài)交互性，能夠融合高亮、聲效、特效、動畫等效果，展現(xiàn)出豐富多彩的地圖符號，且SVG文件中的文字可以被網(wǎng)絡(luò)搜索引擎作為關(guān)鍵詞搜索到，這些為實現(xiàn)TGIS提供強有力的技術(shù)支撐。

[1]蔣春燕,馮學(xué)鋼,凌善金.基于視覺形態(tài)的旅游地圖符號分類探究[J].桂林旅游高等專科學(xué)校學(xué)報,2008,19(3):355～359.

[2]謝智穎,李清泉,左小清，等.基于SVG的開放式LBS系統(tǒng)設(shè)計與實現(xiàn)[J].武漢大學(xué)學(xué)報(信息科學(xué)版),2003,28(1):74～78.

[3]錢瑞偉,孔婷等.基于SVG的實時WebGIS技術(shù)研究[J].計算機科學(xué),2007,34(11):86～88.105.

[4]張旭,尹振江.基于SVG的空間數(shù)據(jù)組織及Web表現(xiàn)的研究[J].計算機應(yīng)用研究,2003,20(5):130～134.

[5]王興玲.SVG與矢量地圖的Web發(fā)布技術(shù)[J].計算機工程與應(yīng)用,2012，(10):1～4.

2095-4654(2015)08-0021-03

2015-04-18

廣西旅游產(chǎn)業(yè)人才小高地人才提升專項研究項目(GXRCGD201407)資助;廣西教育科研項目(201103YB151)

F590

A