基于SVG的WebGIS动态符号的设计与实现

基于SVG的WebGIS动态符号的设计与实现

胡新

中国建筑材料工业地质勘查中心江西总队江西上饶334000

摘要：传统的WebGIS大多采用静态格式对图形进行描述，为提高网络电子地图的质量、显示效果和可读性，本文基于SVG结合DOM(DocumentObjectModel)及动态地图技术，深入探讨建立WebGIS动态地图及地图交互显示的过程。

关键词：SVG；WebGIS；动态符号；动态地图

传统WebGIS的客户端对图像及符号的描述主要采用静态图像格式那样逐像素进行描述，不能满足用户对地理现象的演化过程进行可视化和动态分析和模拟的需求。本文综合分析动态符号的参量描述，并结合DOM和JavaScript对动态地图进行进一步的研究和探索，并对动态符号的概念进行了延伸和扩展。

1动态符号与动态地图

1.1动态符号的参量描述

动态符号作为动态地图的表现形式和接口控制工具，可以帮助用户了解时空数据的变化状况。包括4个动态参量：发生时长、变化速率、变化次序、节奏，考虑到地图符号的非时态变化，将其分为时间域和空间域上的变化。时间域上的变化可分为发生时刻、速率、发生时长、频率、变化次序；空间域上的变化分为出现/消亡、状态变化（数量、性质）、运动。

1.2动态地图

动态地图是指基于用户读图角度，可以从中获取关于地理实体空间位置、属性特征运动变化的视觉感受的地图，其功能主要表现在过程再现、实时跟踪以及运动模拟。动态地图直观的将实体的运动规律和运动趋势呈现给用户，并且提供给用户交互式的操作，用户可根据自己的需求对模拟时间进行控制，这种可重复性极大提高了控制观察的准确性和主动性。

2SVG引入WebGIS动态地图符号设计的优势

SVG（ScalableVectorGraphics）是基于XML标准的用来描述二维矢量图形和矢量/点阵混合图形的置标语言。SVG动画可以通过脚本语言访问其接口来实现，这种方法提供了对图形所有元素及其特征属性的访问和动态更改的途径。不仅可以实现动画，而且可以通过事件触发提供强大的交互功能。

SVG文件的大小很小，下载浏览便捷，采用客户机本地解释生成图形的方式，既充分利用了客户机的资源，又减轻了服务器端的负担。由于SVG是解释性语言，所以在浏览时遇上很大的图形文件，可以以图形元素为单位，接收多少，显示多少。SVG具有强大的动画交互功能和丰富的滤镜效果，填补了大多数基于XML的置标语言规范对复杂图形和动画描述的空白，使网页浏览效果更加生动丰富，带给浏览者全新的感受。

3基于SVG的动态符号的设计与实现

3.1时态动画符号

对于纯时间动画符号和具有绝对规律性的地物符号，如红绿灯、飞行飞机实时运动模拟，可以事先给符号设定规则，以时间段（如帧）的形式，在不同的时间表现出不同的样式，从而实现动态的效果，包括发生时刻、发生时长、频率、速率和次序等视觉变量的变化。对于复杂的动态符号，可采用多重变换组合的动态设计，在符号动态设计时，建立动态符号的关键帧，每一帧由若干个层组成，通过各符号层的变换组合从而完成该复杂动态符号的设计。

SVG的动画效果包括set、animate、animateFlipbook、animateMotion、animateColor、animateTransform，它们都是使某一元素的属性或形式随时间变化，分别对应符号元素的非数值性改变、淡入淡出、弹跳、移动、颜色改变以及缩放旋转偏斜等效果。

<def><symbolid="symbol">

<circleid=”CircleElement”cx="20"cy="20"r="10"fill="red">

<animateattributeName="r"to="20"dur="0s"begin=”3s”repeatCount="indefinite"/>

<animateColorttributeName="fill"rom="red"to="green"dur="1s"begin=”2s”repeatCount="indefinite"/>

<animateMotionpath="M00L100100"begin="2s"dur="1s"repeatCount="indefinite"fill="freeze"/></circle>

</symbol></def>

以上代码定义了一个半径为10的红色圆形符号CircleElement，在发生时刻为0s时其半径和颜色分别逐渐改变成20，时长3s；发生时刻为1s时颜色逐渐改变为绿色，时长2s；发生时刻为3s时沿着直线((0,0),(100,100))运动，其中还隐含了符号的发生次序和频率、速率等动态参量的描述。对于其他效果如闪烁、比例尺变换、坐标变换、旋转、错切、弹跳等皆可实现，任何复杂的动态符号都可利用SVG中的动画效果进行多重变换组合实现。

3.2实时动态符号

这类动态特性由空间数据的变化而引起，不是连续的动画，而是实时的变化，简单的时态动画符号不能满足要求。对于这类符号，可以这样解决：由服务端控制变化，给出具体的变化规则，实时传送发生改变的空间数据信息，通过DHTML特性、Ajax、JavaScript、DOM等技术刷新地图和符号。处理流程如下：

1、数据准备工作：建立基于SVG的空间图形数据库、SVG符号库以及JavaScript脚本库。

2、Web服务器获取地图数据，将SVG数据及符号脚本等集成为html文件，当用户发送请求时，将html文件传送到客户端服务器，同时将所需外部SVG文件及符号、脚本等传送到客户端。

3、客户端服务器在SVGViewer插件的解释下显示地图及利用JavaScript脚本控制地图显示效果。

4、给出一定的规则，在空间数据发生变化时，Web服务器及时的向客户浏览器端传送变化数据，或者采用改变控制脚本的方式，通过DOM改变其在地图中的显示。客户浏览时不断重复此步，直到客户端关闭页面为止。

空间数据一旦发生变化便即刷新的技术简便易行，但由于变化时不断刷新，在数据传输量很大或更新很快的情况下就显得比较困难，如果地图刷新显示的速度跟不上数据变化的速度，就会出现问题，这种情况下必需给定规则或者进行人工调节优化，如规定刷新时间，由于其规律性的进行刷新，在速度和效率上都有优势，但这样就会丢弃了某些应立即刷新显示的数据变化信息；另一方面，规则的描述和存储是设计的难点，有些空间数据变化可能根本不具有某种规则性。因此在实际应用时应该结合两种方案，在空间数据变化不明显时采用即时刷新，在变化较快且具有一般规律性时采用规则刷新。

4结语

本文在基于动态符号和动态地图理论的基础上扩展了动态符号的参量描述，并提出了一种基于SVG实现的动态WebGIS符号设计，提高了符号在突出空间定位、属性时态变化和空间位置的时态变化方面的表达效果，提高了WebGIS在时间维上的表达功能。

参考文献：

【1】汪维华,汪维富.基于SVG的WebGIS的研究与实现[J].计算机工程与设计.2008,29(22):5706-5712.

【2】尹章才,李霖,王铮,申怡.基于SVG的地图符号设计与实现[J].测绘科学.2006，31(5):97-99.