来源：SVG中国(CHINASVG.COM)
摘要:讨论了基于SVG的网络地图符号的设计与显示问题;首先介绍了常用地图符号的描述模型和SVG的概念;然后根据地图符号的结构特征和SVG的自身特点,提出基于SVG的地图符号描述模型;重点进行了点、线和面3种类型的基于SVG地图符号设计,为地图符号的结构化描述和符号库共享提供了一种通用的实现方法,这些地图符号可以在WebGIS中得到充分应用。获得的结论对于相关技术及专业的应用研究具有一定的借鉴作用。
关键词:SVG;地图符号;WebGIS
图形符号,也就是常说的地图符号和图表是地图符号系统的主体,包括点状符号、线状符号和面状符号[1]。SVG能描述任意复杂的图形,但由于地图符号的复杂性,在将地图符号用SVG格式描述时,还有许多问题有待解决。SVG目前仅支持一些基本的图形元素,但远不能满足应用的要求。为了能够有效地通过SVG来对地图符号进行描述,就必须将地图符号按照SVG标准进行设计。
- 1 常用地图符号的描述模型
地图符号的描述模型通常表现为3个层次:一是地图符号图元,是构成地图符号的基本要素;二是地图符号模板,由图元按照一定的规则构成;三是地图符号,按照一定的配置规则将空间信息用符号模板进行符号化。配置规则是一种操作,点、线和面操作分别对应于平移、映射和填充。文中操作是将文字配置在参考位置上,参考位置可以是点、线或面。当为参考点时,将文本平移到点位置;当为线时,将文本映射到线上,使得文本沿线配置;当为面时,可以将面分解为中心点、中轴线或边界线,再在点或线上配置文本。符号模板包括点、线、面模板以及注记,并声明了一系列形式化参数[2]。
- 2 基于SVG的地图符号描述模型
SVG是W3C制定的基于XML开放标准的文本式标记语言,支持矢量图形,如矩形、圆形、椭圆形、多边形、贝塞尔曲线等。同时,SVG还引入了平面设计中路径和剪裁路径的概念,使得SVG与其他XML应用的协作变得十分简单,因此其扩展性很强,可以表达任意复杂的图像[3]。还有灵活的坐标控制手段,可以将用户自定义的符号加入其中,可以说它是图形、图像和文字的有机统一。它提供了6种类型的对象,其中包括矢量图形、图像、渐变填充、滤镜操作、可重复单元和文本。它对于图形对象可进行组合、添加样式、几何变换、复合等操作。特征集包括嵌套变换、剪切路径、Alpha蒙版、滤镜效果、模板对象和动画效果,这些都极大地丰富了图形图像的显示效果。
在理论上,这些SVG对象的组合可以构筑任意复杂的图形/图像。根据功能不同,SVG的主
要对象可以归为基本要素对象(矩形、圆、椭圆、直线、折线、曲线和多边形)和页面描述功能对象(文字、图像、路径、交互事件)两大类[4]。这两种对象可以组合成各种地图符号模板,地图符号模板经过环境配置(填充、平移、重复、变形、变长、渐变、随机和自定义属性)构成了地图符号。描述模型如图1所示。
图1 SVG地图符号描述模型
- 3
基于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>
- 4 结语
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.