基于SVG的專題地圖與Google地圖混搭研究

馬曉玲，周夢杰，范 偉

（武漢大學 資源與環境科學學院，湖北 武漢430079）

專題地圖的地理要素分為專題要素和地理底圖要素［1］。傳統的專題地圖制作方法是底圖和專題要素同步集成［2－3］。Google地圖開放 API后，混搭成為熱門［4］，將Google地圖作為地理底圖，由用戶定制專題要素成為專題地圖制作的一種新方法。在Google平臺上制作專題地圖有利于實現專題地圖的網絡化，制作簡單，交互性強，易于發布和更新［5］，人人可以參與。但是這也造成網絡專題地圖的魚龍混雜，如何根據底圖來設計專題要素，制作靈活生動精美的網絡專題地圖是值得深入研究的問題。SVG（Scalable Vector Graphics）是一種描述二維矢量圖形的網絡標準［6］，兼容各類瀏覽器，圖形顯示質量高、交互功能強、動畫效果好［7－9］，這些優點決定其用于制作可視化效果好、交互性強的網絡地圖有很大優勢［10－12］。因此，本文基于SVG表達矢量專題要素。

本文重點研究如何根據Google地理底圖特點設計制作精美的專題地圖，介紹基于SVG的專題要素表達方式以及混搭地圖的實現方法，最后以一個簡單的實驗評價專題地圖效果。本文的創新點在于利用SVG表達專題要素，設計專題地圖時顧及底圖特點，研究地理地圖與專題要素一致性表達問題。目前國內外對這方面的研究還比較少［13］。

1 專題地圖要素

專題地圖地理要素包含地理底圖要素和專題要素。矢量專題地圖由不同圖層的疊加構成，地理底圖圖層組置于下層，專題要素圖層組置于上層。

專題要素是專題地圖的主體內容。專題要素根據不同的主題和用途來確定不同的內容、精度和表達方式。根據地圖主體和用途要求的不同，有的只表示一種專題要素，有的可表示多種要素，根據表示方法的不同，專題內容可以很詳細也可以很概略。有的表示方法可以表達專題內容的多重屬性，有的只能表達內容的某一屬性。專題要素的符號表達形式主要包括點、線、面、注記、表格、圖片等。

地理底圖要素具有確定方位的骨架作用，是確定專題要素的控制系統，用于描述專題發生區域地理狀況，主要包括水系、居民地、交通網、地貌、土質、植被及境界等地理基礎要素。每種要素根據幾何特征又可以細分為點、線、面類型，這些要素都由點、線、面符號構成，同時還有一部分注記。

2 基于SVG的專題地圖表示方法

SVG是基于XML的矢量圖形標準，SVG作為符合W3C標準的通用矢量格式，用于制作網絡地圖，具有數據量小、縮放不影響圖形質量的特點和優勢。

2．1 基于SVG的專題地圖文件

SVG地圖文檔主體部分以＜svg＞標簽開頭，以＜／svg＞結尾。標簽內包含所有專題要素。由于本文中地理底圖是Google地圖，因此地理底圖不需要用SVG來表達，主要表達專題要素。

地圖所有圖形元素存在于一個用戶空間中，該用戶空間的大小由widt h和height控制。widt h和height是定義在＜svg＞標簽內的屬性。通過外部腳本語言可以訪問并調整地圖文檔的width和height值，從而放大或縮小地圖。基于SVG的專題地圖可以嵌入ht ml網頁中，也可以插入其他DOM元素中，專題地圖在網頁上的位置由盛放專題地圖的DOM元素位置決定。

2．2 專題地圖分層

地圖中的圖層概念在SVG中用＜g＞標簽來實現，屬于同一圖層的元素放在一組＜g＞和＜／g＞標簽內，id可表示圖層名，圖形元素也可以添加屬性字段和屬性內容。

在本文中，將行政區劃底圖、分區統計圖、統計圖表、圖名、圖例分別放在單獨的圖層。

＜svg id＝”t hematic map”＞

＜g id＝”行政區劃”＞＜pat h id＝”西藏”fill＝rgb（24，25，35）d＝”…z”／＞…＜／g＞

＜g id＝”分區統計圖”＞…＜／g＞

＜g id＝”統計圖表”＞…＜／g＞

＜g id＝”圖名”＞…＜／g＞

＜g id＝”圖例”＞…＜／g＞

＜／svg＞

2．3 專題地圖圖形要素符號和屬性

SVG提供一系列基本圖形元素，包括線（line）、圓（circle）、橢 圓 （ellipse）、面 （polygon）、長 方 形（rectangle）、路徑（path）、文本（text）等。地圖上的點、線、面等地圖圖形元素都可以在SVG中表示。

圖形要素的屬性由屬性字段和屬性內容構成，屬性字段名是自定義的。例如＜pat h id＝”西藏”fill＝rgb（24，25，35）d＝”…z”area＝”…”population＝”…”／＞…＜／g＞

2．4 地圖注記

專題地圖的注記在各個圖層中都會出現，在SVG中用文本（text）元素描述。地圖注記的字體、字大、字色、位置在SVG中分別對應f ont－family，font－size，fill，x和y值。中文字體名稱要轉換為英文代碼才能被SVG識別，如宋體為Si mSun。如果是左斜體和聳肩體等特殊字體，需要通過transf or m進行坐標轉換。

2．5 SVG專題要素與Google地圖混搭的優勢

1）網絡傳輸速度快。SVG地圖加載一次以后就保存在本地。

2）地圖任意縮放不影響圖像顯示質量。

3）動態效果好。SVG提供豐富的動畫效果和交互功能［14］。

4）可以將混搭地圖插入其他網頁中。

3 專題地圖設計

由于本文的專題地圖所用的地理底圖是Google地圖，結合地理底圖討論專題要素的設計要點，以期達到專題要素與地理底圖的和諧統一。

3．1 Google地圖特點

1）瓦片地圖，柵格化；

2）全要素顯示；

3）多種地圖類型，包括地形圖、衛星影像圖、道路圖和地圖與道路混合圖；

4）地圖可縮放，地圖多尺度表達，比例尺越大內容越詳細；

5）可疊加點、線、面及自定義圖層。

3．2 專題要素色彩設計

Google地圖有地形圖、衛星影像圖、道路圖等幾種地圖類型，這幾類地圖本身包含很多地理要素，色調多，在這幾類地圖上疊加專題要素的時候，要針對每一種Google地圖特點設計專題圖顏色，才能達到以Google地圖作底圖重點突出專題要素，底圖與專題要素和諧統一的效果。

衛星影像圖的主色調偏暗，平原和海洋是深綠和深藍色，高原和沙漠為棕灰色和紅棕色。在設計專題要素的時候盡量提高顏色的亮度，減小色彩飽和度，盡量避開藍綠棕色。

道路圖以黃綠色為主，專題要素的顏色應盡量使用黃綠色的鄰近色，如紅色和藍色，既不會使得專題要素太突兀，與底圖格格不入，也不會使專題要素表現不明顯。

地形圖以灰綠色和黃綠色為主，因此設計專題要素的時候盡量避開這些顏色。

面狀的行政區劃符號填充色設為半透明，這樣Google底圖與專題要素之間就形成過渡，兩者顏色不會太沖突，同時面狀符號不會擋住底圖，有利于讀圖者對Google底圖的判讀。

SVG表達顏色的方式有6種：①直接使用顏色名字red，bl ue，black．．．；②使用r gba／r gb值，例如r gba（255，100，100，0．5），前三位是 RGB值，0．5是alpha值，表示顏色透明度，0為完全透明，1為完全不透明；③用十六進制定義的顏色，例如＃ffffff；④漸變色，支持兩種漸變色，線性漸變和環形漸變；⑤使用自定義的圖案作為填充色；⑥利用紋理作為填充色。專題要素的顏色設計可以利用SVG豐富的色彩表現方式，例如漸變色、透明色、紋理填充、圖案填充來提高色彩的吸引力，突出主題。

3．3 專題地圖符號設計

地圖符號是地圖語言中最主要最基本的部分。為了提高專題地圖的吸引力和感受性，地圖符號的設計要考慮6個要素，即亮度、色彩、尺寸、結構、形狀和密度。

3．3．1 點狀符號設計

點狀符號包括幾何符號、藝術符號和透視符號。幾何符號基本圖形是圓形、三角形、方形、菱形、五角形、六邊形及梯形等，通過顏色、方向、結構、變形、組合等變化可以形成豐富多彩的幾何符號。在專題地圖上，幾何符號的特點是簡潔明了；藝術符號形象、逼真、美觀，有很強的自明性，適合在混搭地圖上使用，有較強的感受性和趣味性；透視符號可以增強地圖的立體感，一般可以在統計圖表上設計一些專用透視符號。

Google地理底圖內容豐富，元素較多，為了提高專題要素的感受水平，主題性的符號要有較強的感受效果，最好使用藝術符號和透視符號，顏色要亮麗突出，結構不要太復雜。非主題性的內容適宜用幾何符號，顏色不能過亮，處于次要的感受水平。點符號在SVG中實際上都表達成面狀元素，由輪廓線和填充色構成。為了增強符號的感受性，SVG還可以為點符號設計動畫效果，＜ani mate＞、＜set＞、＜ani matemotion＞、＜ani matecol or＞、＜ani matetransf or m＞定義了動畫的作用對象、動畫屬性、顏色和動畫播放時間等，例如設置煙囪符號的煙持續冒出效果［15］。

3．3．2 線符號設計

專題地圖上的線符號主要包括定性線狀符號和運動線狀符號。定性線符號常用顏色、形狀和結構來反映不同的質量特征。同一大類下不同子類的符號通過改變某一或二個圖形變量來顯示等級或類型差異。等級越高的對象，線符號寬度越寬、結構越復雜、顏色飽和度越高。運動線符號的運動矢狀符號表示運動方向，顏色和結構表示運動物體或現象的構成，寬度表示數量特征。

在Google地理底圖上，定性線符號主要用于境界、道路、河流等線狀地理要素的表示，基本上使用已有規定或者已習慣使用的線狀符號。運動線符號用于表示帶有運動性質的主題元素，在設計的時候可以使用飽和度高的色彩、漸變填充色或者透明色來突出主題。

SVG完全可以滿足專題地圖的線符號表達。SVG線要素由路徑表示，路徑可以表示一般線以及貝塞爾曲線以及多種線的組合，可以設置線寬、線端點繪制樣式、線交叉處繪制樣式、線的虛部實部、顏色漸變、透明度等［14］。

3．3．3 面符號設計

面狀符號主要包括紋理和顏色填充。紋理填充主要包括點填充、線填充和點線混合填充。Google地圖上點狀線狀要素較多，如果專題要素面狀符號使用紋理填充，專題要素容易與Google底圖符號混淆，專題表達不明確。顏色變化主要包括色相、明度和飽和度的變化，顏色填充可以很好地體現分級層次，色相變化表示性質差異，明度和飽和度變化表示等級差異。Google底圖上使用顏色填充面符號可以很好地體現專題要素。專題地圖的面狀符號由輪廓線和填充形式構成。SVG提供多種顏色填充模式，對于表現主題的面符號，可以用漸變色或者飽和度高的色彩，對于次一級感受水平的要素可以使用半透明色。

4 SVG專題要素與Google地圖混搭的實現

4．1 Google地圖疊加SVG圖原理

Google地圖可以疊加點、線、面及自定義圖層，點線面都是由點坐標組成的，疊加復雜圖形需要輸入大量點坐標。本文中選用的方法是將SVG圖形文件作為Google地圖的自定義疊加層疊加到Google地圖上。Google Maps API V3提供用于創建自定義疊加層的Overlay View類。Overlay View是一個基類，提供在創建疊加層時必須實現的若干方法。該類還提供了用于實現屏幕坐標和地圖位置之間轉換的方法。其疊加原理如圖1所示。

圖1 Google地圖疊加SVG地圖原理

4．2 動態效果的實現

SVG文件與Google地圖疊加后，可以實現的動態效果根據用戶是否參與分為：無用戶參與型和用戶交互型。

無用戶參與型動態效果可以直接在SVG文件中設計好，即SVG文件與Google地圖疊加后，SVG文件中設計好的動畫效果依然有效，可以設置圖形和文本的移動、旋轉、淡入淡出、顏色漸變等等。

用戶交互性動態效果需要捕獲鼠標事件。Google Map API V3中，Google地圖放置自定義疊加層的Map Pane（地圖窗格）有6種類型中overlay－Mouse Tar get這種類型的地圖疊加層窗格可以捕獲鼠標事件。因此將SVG專題地圖放在overlay－Mouse Target這一地圖疊加層窗格內，對SVG元素設置 DOM 鼠標事件監聽“add Event Listener”。“add Event Listener”是DOM元素綁定事件處理函數的標準方式。

4．3 實驗

4．3．1 制作SVG專題地圖

在SVG中繪制圖表比較復雜，有很多編輯SVG圖形的軟件如SVG Editor等可以直接編輯SVG圖形。還有很多軟件支持SVG格式文件的輸出，如Arc Gis，Corel Draw。Arc Gis是處理地理數據和制作地圖的專業工具，因此用Arc Gis制作初期的專題地圖再導出SVG格式。本文選用的數據是西藏各地區人口分布統計數據。在Arc Map中制作好專題地圖，查看地圖文檔的地理坐標范圍并記錄。將地圖文檔導出為SVG文件，在SVG中輸入各城市的屬性字段和屬性信息，編輯動畫效果。

4．3．2 SVG專題地圖與Google地圖混搭

在ht ml文件中輸入SVG文件的邊界地理坐標以及SVG文件地址，設置專題地圖的交互功能。在瀏覽器中運行HT ML文件可看到SVG專題地圖與Google地圖的混搭效果如圖2所示。專題要素與Google底圖基本上實現了一致性表達，效果比較理想。

圖2 西藏各地區人口分布圖

5 結束語

Google地圖API的出現使得混搭專題地圖的應用越來越廣泛，本文將SVG專題地圖與Google地圖結合制作網絡專題地圖，主要研究在Google平臺上以Google地圖作為地理底圖、基于SVG表達專題要素的網絡專題地圖的設計和制作要點，將專題要素與公共地理底圖進行有機融合。這種地圖結合SVG可伸縮性矢量圖形格式的優點和公共網絡地圖的優點，地圖內容豐富、交互性強、生動活潑并富有吸引力。

在以后的研究中還要深入研究混搭專題地圖的多尺度表達問題。專題地圖的動態生成也有待進一步研究。

［1］ 黃仁濤，龐小平，馬晨燕．專題地圖編制［M］．武漢：武漢大學出版社，2003．

［2］ 李軍利．基于專題地圖中地理底圖的設計思考［J］．測繪技術裝備，2012，14（3）：52－53．

［3］ 馬永立．專題地圖地理底圖的探討［J］．地理科學，1982，2（1）：33－39．

［4］ Michael Batty，Andrew Hudson－Smit h，Richar d Milton，Andrew Crooks．Map mashups，Web 2．0 and the GIS revolution［J］．Annals of GIS，2010，16（1）：1－14．

［5］ 李翔，丁嘉鵬，劉鑫夫．基于 Google Map API的Mashup專題地圖的設計與制作［J］．測繪工程，2012，21（6）：63－67．

［6］ Neumann A．Use of SVG and Ec maScript technology f or E－lear ning pur poses［A］．In：Pr oceedings of ISPRS Workshop Tools and Techniques for E－Learning［C］．Potsdam，Ger many，2005：1－12．

［7］ Neumann A Winter A M．Ti me f or SVG towards high quality interactive web－maps［J］．Inter national Cartographic Association，2001：1－9．

［8］ Juliana Williams，Andreas Neu mann．Interactive Hiking Map of Yosemite National Par k［A］．In：Pr oceedings of the 22ndInternational Cartographic Conference［C］．A Cor u？a，Spain，2005：1－12．

［9］ Raoul Kamadjeu，Her man Tolentino．Web－based public health geographic inf or mation systems for resources－constrained environment using scalable vector graphics technology：a proof of concept applied to the expanded program on i mmunization data［J］．Inter national Jour nal of Health Geographics 2006（5）：1－8．

［10］Fried mannova，L．，Konecny，M．，Stanek，K．SVG BASED “SMART”THEMATIC MAPS DESIGN［A］．In：Proceedings of the 21st Inter national Cartographic Conference［C］．Durban，South Africa，2003：2181－2184．

［11］韓雙旺．SVG的矢量 WEBGIS專題地圖功能實現［J］．測繪科學，2010，35（5）：233－235．

［12］張壘，沈玉利，蔣明亮，等．SVG動態地理信息統計專題圖系統方法研究［J］．計算機技術與發展，2011，21（5）：190－194．

［13］Antoniou V，Morley J．Web Mapping and Web GIS：do we act ually need to use SVG？［A］In：Pr oceedings of SVG Open 2008：6th Inter national Conference on Scalable Vector Graphics［C］．Nurember g，Ger many，2008：1－10．

［14］翟亮，李霖，童雪娟．在Web地圖發布中使用可伸縮矢量圖形［J］．測繪通報，2004（5）：38－41．

［15］尹章才，李霖，王錚，等．基于SVG的地圖符號設計與實現［J］．測繪科學，2006，31（5）：97－99．