基于SVG的网络GIS图形编辑系统设计与实现

第 l 9卷第 4期 2 0 0 9年 4月 计 算 机 技 术 与 发 展 C M PUTER T EC HNOl X Y ANr DEVEL PM ENT VoI 1 9 No 4 Ap r 2 00 9 基于 S V G的网络 G I S图形编辑 系统设计与实现 谢 亦才 玄立超 华南师范大学 计算机 学院 广东 广州 5 1 0 6 3 1 摘要 自从 w3 c推 出S V G网络图形发布标准以来 因其图形任意缩放性 所占存储空间与图形大小无关性 易于互操作 性等优点而得到了广泛应用 文中分析了 S V G和 A j a x 技术 的特点 提 出了基 于 S V G的网络 G I S编辑系统的体系结构 设计了存储 S V G的关系数据库表结构 实现 了在线编辑的图形创建 删除 保存 缩放 标注 修改和图层控制等功能 以 广东省空问信息共享服务平台项 目为实验载体 实现了地理数据在线编辑的各种功能 具有响应速度快 易操作等特点 关键词 S V G A j a x 图形编辑 We l I S 中图分类号 T P 3 9 1 4 1 文献标识码 A 文章编号 1 6 7 3 6 2 9 x 2 0 0 9 0 4 0 2 1 3 0 4 De s i g n a nd I mpl e me nt a t i o n o f a Ve c t o r Gr a p hi c Edi t i ng S y s t e m o n W e b GI S Ba s e d o n S VG XI E Yi c a i XUAN Li c h a o S c h o o l o f C o mp u t e r S o u t h C h i n a N o r ma l Un i v e r s i t y G u a n g z h o u 5 1 0 6 3 1 C h i n a Ab s t r a c t Si n c e W3 C d e v e l o p e d SvG i t i s a p p l ie d wi d e l y b e c a u s e o f i t s g r a p h i c s c a l a b l e s ma l l s iz e of s t o r a g e i n t e r a c t i v i t y ma d s 0 O n A n a l y z ed t h e c h a r a c t e r i s t ic s o f S VG a n d A j a x t e c h n o lo g y p r o p o s e d an a r c h it e c t u r e o f t h e v e c t o r g r a p h i c s e d i t in g s y s t e m d e s i g n ed t h e r e l a t io n d a t a b a s e t a b l e s t o s t o r e S VG d o c u me n t s imp l e me n t ed l o t s o f f u nc t io n s s u c h o f gra p h i c c r e a t i n g d e l e t i r g s a v i n g s c a l i n g mo d i f y i n g and l a y e r c o n t r o l l i n g At l a s t c a r r i ed o u t v ari o u s f u n c t i o n s o f g e o g r a p h y d a ta o n l i n e e d i t in g o n t h e p r o j ect o f G u a n g d o ng s p a t ia l i n f o r ma ri o n s h a r i ng K e y w o r d s S V G A j a x g r a p h i c edi t i n g We b GI S 0 引 言 G I S技术与 I n t e r n e t 的结合 产生 了 we b G I S 并 已成为 GI S 发展 的必然趋 势 we b GI S的实 现包括 基 于客户端 实 现和基 于 服 务器 实 现两种 解 决 方案 1 2 J 其中基于客户端的方案具有服务器和网络传输负担 轻 交互性 能好 等特点 更 易实 现 网络在线 制 图 地 图 编辑等 目前有 3 0多种不同的网络制图 编辑 软件包 其 中最著名 的有 E S RI A r c l MS Au t o d e s k Ma p G u i d e G e o Me d i a We b Ma p s e r v e r 和 Ma p l n f o Ma p X t r e me J 但它 们都有 自己专门的数据格式和不同的用户编程语言 有些返回客户端的是诸如 G I F和 J P E G等的图像 而 这些栅格数据不 能被选 择 改变样 式和缩放等 W3 C推 出的一种 网 络矢 量 图形 格式 S VG S c a l a b l e V e c t o r G r a p h i c s 是一种基于 X ML的开放标准的 收稿 日期 2 0 0 8一O 8 1 l 基 金项 目 广东 省百项工程项 目 2 0 0 5 1 3 3 0 8 0 1 0 0 6 作者简介 谢亦才 1 9 8 1 一 男 江西宁都人 硕士研究生 研究方向 为空间信息技术 矢量 图形描述语 言 S V G文件是 文本形 式的 具 有 占 存储空间小 的优 点 同时它 经 S V G Vi e w e r 3 0插件 解 析显示图形后 具有易于互操作等优点 所以尽管基 于 S V G的网络 G I S在线编辑系统是基于客户端技术 的 但相对于基于栅格图像的编辑软件 它给客户端负 担轻得多 J 有鉴于此 广东省空间信息共享服务平 台项目采用 S V G作为地理空间数据存储 传输和显示 的手段 作为该共享平台的一部分 文中设计和实现了 基 于 S vG的 We b G I S 地理数据在线编辑 系统 1 技术与方 法 1 1 S V G技术与实现方法 S V G规范 J 定义了 1 7 类 8 0多种元素 它涉及基 本图形 文字 图像等元素以及图形元素动画 事件处 理 超链接 颜色渐变 透明效果 滤镜效果 剪辑处理 合成和填充 等诸多方 面 还规定 了 X ML命 名空 间 n a me s p a c e 和 S V G文 档 对 象模 型 D 0 M 这样 通 过 S V G就可设计出各种精美的 具有互动性的矢量图 形 2 l 4 计算 机技术与 发展 第 l 9卷 总的来说 S V G有 以下几个特点 j 任意缩放性 文件 占存储空间小 作 为一种矢 量图形 与栅格 图像相 比 由于它可 自由地缩 放 而不 会破坏图形的质量 同时文件的大小与图形的具体尺 寸无关 而仅与图形的复杂程度有关 因此非常适合网 上的传播 易生成 易修改性 作为一种纯文本格式的图 像 S V G文档很容易读懂 不仅可以方便地由各种程 序语言 如 V C J a v a 以及脚本语言等 来动态生成 并 可方便地进行修改和升级 强交互性 由于 S V G完全支持 I X M 文档对 象模型 因此 S V G中 的图形 对象完 全可以通过脚 本 语言 来 接 受 外 部 事 件 的 驱 动 如 鼠标 以实现 自身 或对 其 他 图形对象 的控制和编辑 超链 接 性 S V G 文 档 中的图形对象可直接与其他媒 体 如图像 视频 音频等 进行 链接 使图形元素成为一扇通 向其他信息的大门 是客 户端脚本与 we b服务器交换数据 的 We b 应用开 发方法 它使 we b 页面不用打断交互流程进行重新加 载 就可动态地更新 打破 了页 面重 载 的惯 例技术 将 笨拙的 we b 界面转化成交互性 的 A J A X应用程序 J 文中主要用 a X 技 术来 获取矢 量 图库 中的 图形 和保存当前编辑过的 S V G对象而不用刷新 当前页面 2 基于 S V G的在线编辑体系结构及其实现 基于 S V G的 We I S地理数 据在 线编 辑采用 客 户端技术 其体系结构分为 3个层次 客户端 表现 层 We b眼务层 数据库服务层 数据层 见图 1 中立性 由于 S V G是一个正式定义的国际开 放标准 因此 它不属于任何团体和个人 数据 组织 的分层概念 一个 S V G文档 中可 以 包括若干个元素 该元素中定义了在用户当前 坐标系中的可渲 染矩形 区域 一个 下 又可 以 包含若干个元素 该元素将一批特征类似的元素 定义成一个集合 一个 元素 下又可 以包 含若干 个 S V G内定 义好 的诸如 和 等元素 S V G的这种组织数据的框架很适合于表 达地理数据 7 J 由上述特点可知 S v G可以 以嵌入方 式或脚本访 问 S V G C 0M 的元素和属性来实现交互式的动态绘 图 和编辑图形 文本等 另外 S V G除了支持 H T MI 中 常用的标记 如文本 图像 链 接 交互性 C S S的使用 脚本 S c r i p t P b 还提供了大量针对图形 图像 动画的 特定标 记 这就为实现 We b G I S提供 了可能 J 所 以 文中采用 J a v a S c fi p t 语 言开发 We K I S的各种编辑功 能 这样客户端就可以通过一系列的脚本来实现对地 图的编辑操作 以前的一些需 要与服 务器交互 的操作 现在也 可以完全在客户端进行 1 2 A j a x技术 A j a x 即异 步 J a v a S c r i p t 与 X ML 它是几 种现有技 术的组 合 使 用 用 级 联 样 式 表 S S J a v a S c r i p t X H T ML X ML和可扩展样式语言转换 X S L T 技术 开发外观及操作类似桌面软件的 We b 应用软件 它 数 厍 服 务 器 图 1 基 于 S V G的在线编辑体 系结构 2 1 数 据库服务层 数据库服务层 存储 S VG的关系数据库服务器 存储着 S VG数据映射后的地理空间数据 2 1 1 存储方式选择 S V G基 于 儿 标准 其存储方式可 以建立在 x ML存储技术之上 目前 X ML的存储方式主要有4 种 文件方 式 原生 数据库 方式 面 向对象数 据 库方式和关 系数据库方式 它们各有优缺点 1 o J 文件 方式存储简单易实现 无需存储转换 和重构查询结果 但是存在查询效率低下 文件大小受内存大小的制约 并发性差 安全性低等不足 原生 X ML数据库是将 X ML文档和元素作为基本结构的数据库 具有内容集 中放置 易于搜索和管理 查 询速度快 数据无 损失等 优点 但发展 时间相对较 短 技术还 不够成熟 在安全 性 多用户并发 数据的聚合能力等方面还有待提高 面向对象数据库支持复杂数据类型 能直观地建立 X ML数据的对象模式 可利用对象查询语言 O Q L 实 现数据查询 存储与查询效率较高 但最大的缺点在于 面向对象数据库 自身的不成熟 关系数据库是当今主 流数据库 以坚实的代数理论为基础 具有高效的索引 机制 统一的查询语言 S QI 实用的事务管理和恢复 机制 以及大量工具 的支持 比较 了 4种存储方式 的差 异 S V G空间数据的存储采用关系数据库存储方式 2 1 2 数据库的结构设计 对关系数据库进行结构设计 参考了文献 1 1 的 第 4期 谢亦才等 基于 S V 的网络 I s图形编辑系统设计 与实现 2 1 5 数据 库设 计方 法 在 S V G中 选择 每 一个 作 为 分割点 以便 传输 整个 图层及其 中 的每个 元 素 保证 S V G数据易于存储和重构 查询和修改速度快 文中 设计 了 1 2张表 因篇 幅关 系 给 出两 张表如图 2所示 一 个 s v g E x表存储一个 S V G文档总体信息 文档 i d 号 文档名 文档中的所有 o n c l i c k 事件 包含的 元素 i d 号等信息 s v g 表存储的是文档中一个 元素包含 的信息 元素 i d 号 该元素所在 的文档名等 S1 x D S 1 g i d 曰 i d 1 f i i m vrf i 1 c 丑 mc O c1i c n鼠 r o 丑 rr b 二 d o r v吐苴 一 i d O 巾o n nl oVe t r A l l f o r m 0m1 c T q o 丑 l o a d vi h o I l 7 一 图 2 数据库 的结构表 2 2 We b服 务层 该层 包 括 We b服务 器和 S V G转换 器 2个 部 分 分别放在 2个 S e r v l e t 容器 中 we h 服务器响应客户 端的请求并与数据库联接 S V G转换器完成 S V G数 据模式与传统的关系 D B MS的数据库模式问映射转 换工作 它有两个功能 一是把 S V G文档数据 分解成 关系数据库中的各字段 实现 S V G文档入库 二是从 数据层获取查 询结果集 后 再 转换 成 S V G文 件 提 供 给客户端显示 2 3客户端 客户端包括 We b 浏览 器 S V G插件及 页面 内嵌脚 本 J a v a S c r i p t A j a x 在 We b 浏览器 中向 We b 服务器请 求 主 页 面 及 相 应 的 实 现 地 理 数 据 编 辑 功 能 的 J a v a S c r i p t A j a x的代码到客 户端 通 过 S V G插 件 接受 并解析 S V G 实现 S VG地 图的显示 通 过 S VG的 内嵌 脚本的交互功能向服务器端提交请求并显示返回结 果 目前广泛用 于显 示 S V G 的插 件是 A d o b e开发 的 S V GV i e w e r 3 0 其 功能 强 大 显 示 效 果好 可 以在 网 上 免费下载 文中设计 的地理数据在线编辑 功能都在客户端通 过 J a v a S c r i p t A j a x 实现 主要功 能有 1 相对完善 的图形对象 绘 制功 能 能 够绘 制点 线 圆 圆弧 矩形 多边形 区域 标注文本 等 并具 有处 理图例 即多个图形元素所组成的图形块 的能力 2 相对完善的图形编辑功能 具备图形 的修改 坐标点的修改 删除 保存 复制等各种操作功能 3 颜色 线型 线宽 填充色等参数的设置功能以 及 加标 注 地图符 号等功能 4 图形对象 的各种选取功 能 窗选 圆选 多边 形 选取 等功 能 5 对 图形进行旋转 缩放 拖动等操作 对各 图层 进行控制功能 6 动态加载用户 自定义模块 从而荚现用户 的特 定功能 例如绘制特定复杂的图形 登陆 主 页面 S V G地 图和脚 本加 载到 客户 端后 各种编辑功能可 以通过如下步骤来实现 1 首先单击 选择 按扭 然后把 鼠标 移 到 目标 上 并单击它 则选择 了这个对 象 用 C h o o s e O b j e c t 存储 对 象 的 i d 号 2 然后 点击欲进行的操作的按扭 以 拖动 操 作 为例 此 时触发 相应 的脚本 J a v a S c r i p t 代码 J a v a S c r i p t 代码通过获 区 S VG的 D O M 调用 D O M 中相关 A P I 获 取在第一步 中选 择的对 象结点 一个 S V G元素 修 改 给这个元素 的 o n m o u s e d o wn o n n l o u s e m o v e o n l n o u s e u p o n mo u s e o u t 触发事件名 即用于实现拖动功能的函数 名 然后 点击对象并 拖 动它到 目标位 拖动 的部分 实现代 码如下 f u n c t io n D r a g Ob j e c t i f C h o o s e O b j e c t v a r m o v e S v g Ma i n Ma p D o c g e t E le m e n t B y I d C h o o s c Ob j e c t mo v e s e t A t t r i b u t e o unl o u s e d o w n g e t O b j e c t D r a g e v t m ove s e t At t r i b u t e o n r n o u s e mo v e mo v e Ob j e c t Dr a g e v t m o v e s e t A t t r i b u t e o n mo u s e u p u p Ob j e e t D r a g e v t m o v e s e t A t t r i b u t e o r t t lq o u s e o u t o u t Ob j e c t D r a g e v t e l s e a l e r t 请选择拖动对象 其它编辑修改操作同理 不同的是 触发事件名 函数名 不 同 功 能 函数实现代 码不 同 如果 要 画 图 形 则点 击 画 图形 按扭 此时会 触 发画 图初 始化 代 码 代码功能是在 地图上增加 一个 透明 的覆 盖整个 视 图的矩形作 为画布 这样用 户就感 觉在地 图上 画 图形 一 样 最终 画 的图形 作 为一个 新 的 图层保 存 在 地 图 中 3 应用实例 系统实现后 曾将其作为空间信息应用模块之一 集成于 广东 省空间信息共享服务平台 的基础平 台 中 以广东省矢量地 图为底 图 用 户根据 各 自应 用实现 了对地 图进行相应 的编辑 系统 主界面 如图 3 所示 4 结束语 尽 管 S VG规范 尚未成为正式通用标准 但 它从一 2 I 6 计算 肌技术与 发展 第 l 9卷 图 3 基 于 S V G 的网络 GI S图形编辑 系统主界 面 开始就是严格按照新一代网络标记语言 X MI 来制定 自身的标准 因此这种图形格式是完全公开的 不受 某 个公司单独操作 另一方面 S V G作为一种纯文本形 式表达的矢量图形格式 目前仍处 于标准 的制 定升级 阶段 可以预计将来普通浏览器 I E Ne t s c a p e 等 将会 直接支持 s V G 所以广东省空间信息共享服务平 台 项 目以 S V G作 为图形发布 的标准 以此为基础开 发相 应的网络 G I S功能 文 中以此项 目为平 台设计 与 实现 的地理数据在线编辑 系统具有 很好 的实用价值 达到 了两个效果 1 由于 S vG是用文本形 式表达 的图形 图形文 件小 同样 的地图 相 比于栅格 图像 降低 了图形信 息 网络流量 改善 了基于 网络的图形显示质量 2 S 具有很好 图形界 面交互功 能 所见 即所 得 当底 图到客户端后 在 图上 进行编辑 就像在 自己 的桌面软件上操作一样 再加上 A j a x技术 使得数据 请求和保存都不会有网络延迟 但 由于是在线编辑 仍存在一些 问题没有 得到解 决 比如多个用 户 同时在 线编 辑 同 一 地 图时 协同问题就显得很 突出 否则会导致数据库数据不一致 这 也是下一步工作的主要内容 参考文献 1 张犁等 林辉 李斌 互联 网时 代的地理信息系统 J 测绘学报 1 9 9 8 2 1 9 1 6 2 李青元 张福浩 We b G I S实现技术 探讨 J 中国图象图形学报 1 9 9 8 3 6 4 8 6 4 8 9 3 P e n g Z R T s o u M H G e o g r a p h y Ma r k u p L a n g u a g e M I n t e r n e t GI S C a n a d a J o h n Wi l e y a n d S o n s I nc 2 0 0 3 4 N e L u 1 1 a l m A U s i n g S V G f o r O n l i n e D i g i t i z i n g a n d E d i t i ng o f G o g r a p l c D a t a C 0 L j I n P r o c e e d i n g s o f t h e S V G O p e n 2 0 0 4 C on f e r e n c e 2 0 04 h t t p www s v go p e n o r g 2 0 0 4 p r e e d i ng s e l 1 1 m1 1 I 5 W3 C S c a l a b l e V e c t o r G r a p h i c s S V G 1 1 S p e c i f i c a t i o n E B O L 2 0 0 3 0 1 1 4 1 2 0 0 5 0 7 0 5 h t t p w w w w 3 o r g TR S VG 6 周文生 基于 S V G的 We b G I S研究 J 中国图象图形学 报 2 0 0 2 7 7 6 9 4 6 9 5 7 徐云和 谢刚生 程朋根 等 基于 S V G的空间数据的可视 化 J 计算机应用研究 2 0 0 5 2 4 6 4 7 8 R e a l iz a t i o n GI S Wi t h S VG T ect m o l o g y B a s e d o n We b E B o L 2 0 0 5 0 2 2 7 2 0 0 5 0 7 0 5 h t t p e d u t mn c n h t m t 5 4 5 20 05 2 1 6 1 71 1 7 ht m 9 杨国瑞 张思博 基于 A J A x的 We b应用架构设计 J 现 代电子技术 2 0 0 6 1 5 9 5 9 7 J 0 高 兵 X ML在关系数据库 中存储 和查询方法的研究 D 哈尔滨 哈尔滨工程大学 2 0 0 4 1 1 温健婷 李岩 基于 x MI 一 S v G的空间数据库设计与实 现 J 计算机工程与应用 2 0 0 5 1 8 1 6 9 1 7 5 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 十一 一 一 十一 十一 一 一 一 一 一 一 上接第2 1 2页 方法对 于单模 态 的脑功 能 图像 的时 问序列 图像 的配 4 准 却不失为一种简单高效实用的解决方案 参考文献 1 冯林 颜世鹏 孙焘 图像配准中的一种特定区域轮廓 提取算法 J 计算机技术与发展 2 0 0 6 1 6 3 l l 一1 3 2 B a i t e r J M P e l i z z a r i C A C h e n G T r r c l a t i o li o f p r o e c t io n r a d i o g r a ph s i n r a d i a t i o n t h e r a p y u s i J g p a C U tI v e g me n t s a n d p o i n t s J Me dP h y s 1 9 9 2 1