基于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．