（计算机应用技术专业论文）基于svg的轻型webgis平台的研究.pdf

基于s y g 的轻型w c b g i s 平台的研究摘要自1 9 9 5 年w e b ( 3 1 s 在美国出现，经过1 0 年的发展，它的应用已经遍布各行各业。当前商业的w e b g i s软件主要有a r c ( 3 1 s 、m a p l n f o 、m g e g c o m e d i a 、m a p t i t u d e 等。它们大都价格昂贵、而且需要大型的空间数据库和复杂的g i s 服务器。在实际应用中，企业往往希望发布个性化的地图服务，它需要一些基本的g i s 功能。如地图浏览、实体定位、测距等，具有一定的空间分析能力，价格低廉，有良好的可扩展性和较快的响应速度，即轻型的w e b g i s 。因此，本文对基于矢量化的w e b 绘图规范s v g 开发轻型w c b g i s 平台进行了研究。由于s v g 并不是专门为开发w e b ( 3 i s 平台制定的，所以通过对传统w e b g i s 的实现模型和实现技术、s v g 、d o m 和a j a x 等进行研究，综合考虑轻型w e b g i s 的可扩展性和响应速度，本文首先提出了基于s v o 的轻型w e b g i s 平台的四层混合型体系结构，并采用面向对象的数据建模技术组织空同数据。接着详述了坐标转换、地图加载、地图操作、空问查询等构建轻型w e b o i s 平台的关键技术。最后，结合油田企业的实际需求，实现了基于s v g 的轻型w e b ( 3 i s 平台应用实例。研究表明，基于s v g 的轻型w c b ( 3 l s 平台可扩展性强，浏览速度快，避免了商用w e b g i s 软件价格昂贵、信息集成能力较差等缺点满足了企业发布个性化地图服务的需求。关键词：w e b ( 3 i s ；s v g ；a j a x ；d o m ；信息可视化；油田r e s e a r c ho nl i g h tw e b g i sp l a t f o r mb a s e do ns v ga b s t r a c ts i n c et h ea p p e a r e n c eo fw e b g i si na m e r i c ai n1 9 9 5 ，i t sa p p l i c a t i o n sh a v es p r e a d e do v e rm o s td e p a r t m e n t so rt r a d e sb yt h et e l ly e c x sd e v e l o p m e n t t h ec o m m e r c i a lw e b g i ss o f e w a r e sm a i n l yi n c l u d ea r e g i s ，m a p l n f o ，m g e g e o m e d i aa n dm a p t i t u d e t h e ya r ee x p e n s i v e ，a n dl a r g e s c a l es p a t i a ld 8 1 a b a s ea n dc o m p l e xg i ss e r v e rn e e d e do nt h ew h o l e i np r a c t i c a la p p l i c a t i o n , e n t e r p r i s e su s u a l l ye x p e o tc u s t o m i z i n gm a ps e r v i c e ，w h i c hn e e d ss o m eb a s i cg i sf u n c t i o n s ，f o re x a m p l em a pb r o w s e ，e n t i t yl o c a t i o n , d i s t a n c em e a s u r e ,a n dh a sl o w e rp r i c e ，c e r t a i ns p a t i a la n a l y s i sa b i l i t y , w e l le x p a n s i b i l i t ya n df a s t e rr e s p o n s e , n a m e l yl i g h tw e b g i s t h e r e f o r e t h e d e v e l o p m e n t o f l i g h t w e b g i sb a s e d o n v e c t o r g r a p h i c c r i t e r i o n i s s t u d i e d b e c a u s es v gi sn o tf o rt h ew e b g i sd e v e l o p m e n ts p e c i a l l y , s ot h r o u g ht h er e s e a r c ho fm o d e la n di m p l e m e n tt e c h n o l o g yo fw e b g l s ，a n ds v gd o m , a j a xt e e l m o l o g y , c o n s i d e r i n gs c a l a b i l i t ya n dr e s p o n s es p e e do fl i g h tw e b g i s t h ep a p e rp r o p o s e saf o u rh y b r i da r c l l i t e c t u o fl i g h tw e b g i sb a s e do ns v o , a n do r g a n i z e ss p a t i a ld a t ab yo b j e a - o r i e n t e dd a t am o d e l i n g t h e nc o o r d i n a t et r a n s f o r m ，m a pl o a d i n g , m a po p e r a t i o na n ds p a t i a lq u e r ya l es t u d i e di nd e t a i l f i n a l l y , b a s e do nt h ea c t u a lr e q u i r e m e n to f o i lf i e l d e n t e r p r i s e s ，a n a p p l i c a t i o ne x a m p l e o f l i g h t w e b g i s b a s e d o n s v g i s i m p l e m e n t e d i t i sp r o v e dt h a tt h el i g h tw e b g i sp l a t f o r mh a sb e t t e re x p a n s i b i l i t y , f a s t e rb r o w s es p e e d , a n da v o i dt h es h o r t c o m i n go fc o m m e r c i a lw e b g i sp l a t f o r mt h a th a sh i g hp r i c ea n dw e a ka b i l i t yt oi n f o r m a t i o ni n t e g r a t i o n ,a n ds a t i s f i e sr e q u i r e m e n to f r e l e a s i n gc u s t o m i z i n gm a ps e r v i c e k e yw o r d s ：w e b g i s ，s v ga j a x ，d o m , i n f o r m a t i o nv i s u a l i z a t i o n ，o i lf i e l di学位论文独创性声魄本人所呈交的学位论文是我在指导教师的指导下进行的研究i - 作及取得的研究成果。据我所知，除文中已经注明引用的内容外，本论文不包含其他个人已经发表或撰写过的研究成果对本文的研究做出重要贡献的个人和集体，均已在文中作了明确说明并表示谢意作者签名：盔连墓日期：薹立：2 ：! 兰学位论文使用授权声明本人完全了解大庆石油学院有关保留使用学位论文的规定，学校有权保留学位论文并向国家主管部门或其指定机构送交论文的电子版和纸质版有权将学位论文用于非赢利目的的少量复制并允许论文进入学校图书馆被查阅有权将学位论文的内容编入有关数据库进行检索有权将学位论文的标题和摘要汇编出版。保密的学位论文在解密后适用本规定学位论文作者签名：巷。撕荡导师签名：日期：谢7 每f 】勰日期：纱u 7 辛；l af1 ：7创新点摘要本文的主要创新点可归纳如下：1 首次将s v g 引入轻型w e b g i s 的实现。s v g 本身不是专门为开发轻型w c b g i s 平台制定的，所以通过对w e b g i s 、s v g 、d o m 等技术进行研究，提出了基于s v g 的轻型w e b ( 3 i s 的体系结构，并实现了轻型w e b g i s 平台中地图展示，空间查询、专题制图等功能。2 将a j a x 技术应用到轻型w e b ( 3 1 s 平台的开发。利用a j a x 技术，实现了“按需取数据”，最大可能地减少了冗余请求和响应对服务器造成的负担，并且无需刷新页面，从而减少了用户的等待时间，提高了响应速度。3 基于s v g 的油田w e b ( 3 1 s 开发数据平台的开发，首次实现了油田企业利用自主开发的w e b ( 3 i s进行信息的集成化、可视化查询，满足了企业实现油田信息图形化、一体化的迫切需求，实现了油田多专业沟通协作的网络化。i v大庆石油学院硕士研究生毕业论文引言随着i n t e r n e t 技术的不断发展和人们对地理信息系统的需求，利用i n t e m e t 在w e b 上发布空间数据，为用户提供空间数据浏览、查询和分析的功能，已经成为g i s 发展的必然趋势。于是，基于i n t e r n e t 技术的地理信息系统b b g i s 就应运而生了。目前，商用的w e b g i s 产品有e s r i 的a r c l m s ，m a p l n f o 公司的m a p l n f op r o s e r v e r 和m a p x t r e m e 等。它们普遍价格昂贵，组成十分庞大且互相依存，即后台往往要有大型的空间数据库和复杂的g i s 服务器，前台可使用库函数进行二次应用开发，前后台之自j ，要有复杂的空间数据传输协议。而且它们偏重于信息的表达，而在信息的整合能力方面相对欠缺。在实际应用中，企业往往希望发布自己的个性化地图服务，仅需要一些简单的地图操作和查询功能，不需要特别复杂的空间分析，价格不能很高，但要有良好的可扩展性和较快的响应速度，也称为轻型w e b o i s 平台l l 】。本文针对该需求，提出了基于s v g 的轻型的w e b g l s平台。s v g ( s c a l a b l ev e g t o rg r a p h i c s ，可扩展矢量图像) 是互联网联盟w 3 c 组织的正式推荐标准，它是一种使用x m l 描述的二维图像语言，目前，广泛使用的是2 0 0 3 年1月1 4 日推出的s v g1 i 规范。s v g 由于采用简单高效的矢量指令，即利用文本描述来绘制图形，所以相对于相同显示效果的位图( 即便经过压缩) ，体积也小很多，因而下载速度大大地提高，有利于成为解决目前网上浏览瓶颈的最佳方案。此外s v g 具有丰富的表现效果，对各种点、线、面实体都能形象地表示。而且s v g 完全支持d o m 技术，从而使s v g 图形对象可以接受外部事件的驱动，实现与用户的交互或对其他图形对象的控制。因此，利用s v g 技术易于实现地图的展示和w 曲g i s 专题制图。由于s v g 在开发w e b g i s 平台方面具有诸多技术优势，所以国际和国内有很多科研单位、高校都在进行相关的研究实践。自2 0 0 2 年以来，国际上每年都举行一次s v g 公开会议( 2 0 0 6 年的会议由于组织者的身体状况问题而被迫取消了) ，探讨当前s v g 的浏览方式、s v g 的最新应用成果以及s v g 发展中存在的问题，以确定下一步的规范研究方向。在会上，使用s v g 进行地图导航是作为一个专题进行讨论的。在2 0 0 5 年8 月份举行的第四次会议中，来自苏黎士e t h ( 瑞士联邦技术研究所) 的j u l i a n a w i l l i a m s 介绍了她开发的交互式的约塞米蒂国家公园徒步旅行地图：同样来自苏黎世e t h 的a n d r e a sn e u m a a n ，探讨了按空间、时间和主题的导航，对可能的导航控制以及不同导航模式和独立显示的互相依赖给出了概述。他同时还展示了采用时间年表导航的早期欧洲文化遗产图和数据库连接。在国内，s v g 的研究起步较晚，但经过一段时间的研究和发展，也逐渐为大家所熟知。国内学者也开始研究基于s v g 的w e b g i s 系统，同时，国内许多高校、科研单位和公司也开发了一些s v g 应用于w e b g i s 的实例，例如中国科学院研究生院的吴彬卓关于引曹“s v g 技术在w e b g i s 中的应用研究”，中国人民解放军信息工程大学的洪霞关于“基于s v g 的数字地图网络发布系统”的研究，武汉大学的冯艳杰关于“基于s v g 的w e b g i s实现技术”的研究以及兰州大学的矫树春“基于s v g 的w e b g i s 设计”的研究等。虽然国际国内都有相关的研究，但是将s v g 用来开发轻型w e b g i s 平台，并将其应用到油田进行油田信息的集成化、可视化查询，目前国际国内还没有。而且现有的研究往往侧重于校园导航、旅游等。对于大多数的大型企业，经过了几十年的信息化建设，积累了大量的不同类型的生产应用和管理数据，要实现这些数据在网络环境中的全面展示和快速查询，且可随时进行扩展，必须建立合理高效的数据模型，并提高数据的传输速度。本文在对s v g 、w e b g i s 、d o m 、a j a x ( a s y n c h r o n o u sj a v a s c r i p + x m l ) 等技术进行深入研究的基础上，提出了合理高效的基于s v g 的轻型的w e b g i s 体系结构，并对空间信息的展示、操作、查询以及w e b g i s 专题制图进行了研究，最后结合油用的实际情况开发了基于s v g 的油田w e b g i s 开发数据平台，实现了油田地面工程数据库和勘探开发数据库信息基于图形化操作的综合查询，方便了油田开发中多专业协同工作和综合分析，对油气田的开发管理提供了有利的信息技术支持。本文所研究的内容受黑龙江省普通高等学校青年学术骨干支持计划项目基于s v g新技术的油田w e b g i s 平台研究的资助。大庆石油学院硕士研究生毕业论文第1 章平台架构技术w e b g i s 是i n t e m e t 技术应用于g i s 开发的产物，g i s 通过w w w 功能得以扩展，真正成为一种大众的使用工具。利用i n t e m e t 在w e b 上发布空间数据，为用户提供空间数据浏览、查询和分析的功能，已经扩展到应用领域的各个方面【2 】f 3 】【4 】。1 1w e b g i s 相关技术w e b g i s 的出现与计算机网络的发展密不可分。i n t e m e t 的出现和蓬勃发展成为g i s新的运行平台，w e b g i s 应运而生。1 9 9 3 年，美国x e r o x 公司的p a l oa l t o 研究中心开发了世界上第一个w e b g i s 的原型系统h t t p ：m a p w e b p a r e x e r o x c o r n m a p ，提供了全球1 ：2 0 0 万的数字线划地图( d i g i t a ll i n eg r a p h i c ，d l g ) 数据让用户浏览。1 9 9 4 年，加拿大b r a n d o np l e w e 公司推出提供世界各地旅游信息的网站h t t p ：l l w w w v i r t u a l t o u r i s t c o r n ，该网站以电子地图的形式提供了全球近3 0 ，0 0 0 个旅游地的风土人情、文化等旅游信息供游客查询。从1 9 9 5 年开始，提供实时地图发布服务的系统开始出现，典型的系统如美国人口调查局的t i g e r 地图服务系统，该系统可以交互式的提供街区道路以及全国人口专题图【5 】1 6 】。应该说，1 9 9 6 年以前出现的这些系统还不能称为w e b g i s ，它们仅仅是地图服务器。1 9 9 6 年以后，随着i n t e r n e t 技术的飞速发展，c s 体系逐步转移到b s 模式，各大g i s厂商推出了真正意义上的w 曲g i s 平台软件。w 曲g i s 继承了g i s 的部分功能，侧重于地理信息与空间处理的共享，以图形、图像方式表现空间数据，是一个基于w e b 计算平台实现地理信息处理与地理信息分布的网络化软件系统。与传统的g i s 系统相比，它具有访问范围广、平台独立、大规模降低系统成本和维护、升级方便等特点。在运行环境上，w e b g i s 基于w e b 计算平台，运行于i n t e r n e t 多用户并发访问的分布式环境；在技术上，w e b g i s 是g i s 发展与组件技术、互操作技术、分布式技术的集成 7 1 。l 1 1w e b g i s 的实现模型w e b g i s 的实现模型大致可以分为服务器端模型、客户端模型和混合模型三种嗍【9 】。服务器端w e b g i s 就是数据操作和空间分析都部署在服务器端，对客户请求的响应只是把执行的结果转换为h t m l 格式( 一般是g i f j p e g 图像) 返回给客户端，客户端只完成数据和信息的显示，具体处理流程如图卜l 所示。第1 章平台架构技术唑兰p 服务器、隔爵面卧圆橱的网页i 响应图1 - 1 服务器端模型客户端w e b g i s 允许一些g i s 分析和处理工作在用户本地计算机执行。它将一部分g i s 应用程序下载或安装到客户端，由这些程序来完成分析处理工作。客户端只有在请求数据或复杂的应用时才向服务器发出请求，其处理流程如图1 2 所示。服务器、。吁橱，图l - 2 客户端模型单纯的服务器端模型和客户端模型都存在明显的不足，对于服务器端模型，当需要进行频繁的数据传输时，系统的执行效率将受到带宽和网络流量的影响；对于客户端模型，系统的执行效率受客户端运算能力的影响，将客户端配置较低时，执行效率会大大降低1 9 3 1 “。实际应用时可采用客户和服务器之间的进程分布处理策略，最大限度地发挥现有计算机的硬件资源利用率，把数据集中和运算量大的任务放在服务器上，而把一些不需要访问数据的操作直接放在客户端执行，这就是所说的混合模型。很明显，这种处理方式可以显著降低对网络带宽的要求，大大提高系统的性能，其具体处理流程如图1 3所示。厂丽磊 请求服务器、- _ r 一，、ij a v i a p p l e t s a c t i v e x苎h 墨h 蔓li ，= ：_1 1 2w e b g i s 的实现技术图l - 3 混合模型目前用来构建w e b g i s 系统的技术方法主要有通用网关接e l 法( c o m m o n g a t e w a yi 姗c e _ g i ) 、服务器应用程序接口法( s e r v e r a p i ) 、插入软件法( p l u g i n s ) 、a c t i v e x构件法和j a v a 编程法等8 】【1 0 1 。这些技术总得来说是基于两个方面，即w e b 服务器端增4大庆石油学院硕士研究生毕业论文强和浏览器客户端增强。w e b 服务器端增强技术是采用c g i 、w e b 服务器特定的a p i程序、服务器端a c f i v e x 组件来增强服务器的功能。浏览器客户端增强技术是采用a c t i v e x 、j a v a a p p l e t s 或p l u g i n s 技术，使浏览器能够向w e b 服务器发送地图请求，并对w e b 服务器返回的地图信息进行缩放、漫游、查询及空间分析等操作。各种技术的优缺点见表i - 1 $ 1 1 埘。表1 1w e b g i s 的常用技术比较技术类型优点缺陷客户端小；处理大型g i s 操作分析的网络传输和服务器的负担重；程序设c g i功能强：充分利用服务器现有资源计较为复杂，系统响应速度慢不像c o l 那样每次都要重新启动，其需要依附于特定的w e b 服务器和计算s e r v e ra p l速度较c o i 快机平台，互联网和服务器的负担重服务器和网络传输的负担轻，客户端需要先下载安装到客户机，与平台和操作系统相关；对于不同的g i s 数据p l u g - i n可直接操作0 1 s 数据，速度快类型，需要相应的o i sp i n g - i n 来支持与操作系统相关；需要下载、安装，执行速度快；具有动态可重用代码模占用存储空问；安全性较差：对于不a c t i v e x同的g i s 数据类型，需要有相应的块a c t i v e x 控件支持与平台和操作系统无关；实时下载运g i s 数据的保存，分析结果的存储和j a v a a p p t e t行，无需预先安装；o i s 操作速度快；网络资源的使用能力有限；处理大的服务器和网络传输的负担轻( 3 1 s 分析任务的能力有限1 2s v g 核心技术s v g 是互联网联盟的正式推荐标准，它是一种使用x m l 描述的二维图像语言。1 9 9 8年4 月a d o b e 、i b m 参与制定的p g m l ( p r e c i s i o ng r a p h i c sm a r k u pl a n g u a g e ) ，微软、m a c r o m e d i a 等提出的v m l ( v e c t o r m a r k u pl a n g u a g e ) 相继提交给w 3 c 。w 3 c 于1 9 9 8年8 月成立了s v g 工作组致力于开发掰的图形标准，于1 9 9 9 年2 月1 1 日发布了第一个工作草案，先后发布了九个工作草案，在2 0 0 0 年8 月2 日成为候选标准( c a n d i d a t er e c o m m e n d a t i o n ) 0 h 1 2 1 。2 0 0 1 年w 3 c 推出了s v g1 0 ，目前，广泛使用的是其在2 0 0 3年1 月1 4 日推出的s v g1 1 规范。s v g 作为可扩展的矢量图形，具备了一些独特的优点【i l 】【1 2 】( 1 ) 能加快下载浏览速度。由于s v g 采用简单高效的矢量指令，即利用点和线的描述来绘制图形，而表现相同显示效果的位图，即便经过压缩后也会比它大得多，这使得集成了s v g 的x m l 文档更小，因而下载速度也大大提高。基于这一显著优势，s v g可以作为解决目前网上浏览瓶颈的最佳方案。( 2 ) 能获得更广泛的硬件支持由于图像在不同分辨率的屏幕上显示效果不同，第1 章平台架构技术且放缩后会出现锯齿和模糊效果，因此无法满足网页浏览的质量要求。而s v g 从较低分辨率的便携式计算机到较高分辨率的台式机，再到高分辨率的打印机，都能提供良好的视觉效果，这将大大提高w e b 应用，也是矢量技术所带来的技术上的突破。( 3 ) 具有丰富的表现效果s v g 中可以引入其它基于x m l 的置标语言的命名空间，从而可方便地使用它们的标记，例如x h n 仉、m a t h m l 、s m i l 等的标记，以提供超出s v g 本身所能提供的丰富的页面表现效果。( 4 ) 具有良好的可重用性由于样式单在s v g 中扮演了重要的角色，它便于矢量对象在不同的页面中，以不同的外观显示，因而大大提高了元素的可重用性、可修改性。( 5 ) 强交互性由于s v g 完全支持d o m ( 文档对象模型) ，因此s v g 中的图形对象完全可以通过脚本语言来接受外部事件的驱动( 如鼠标动作) ，以实现自身或对其他图形对象的控制。( 6 ) 超链接性s v g 文档中的图形对象可直接与其他媒体( 如图象，视频，音频等) 进行链接，使图形元素成为一扇通向其他信息的大门。s v 0 图形技术具有诸多优点，因此基于s v g 开发的轻型w 曲g i s 同样继承了这些优点。使用s v g 可以在礴页上显示出各种各样的高质量矢量图形，包括图像处理中常见的许多功能，如图形、文字、动画、色彩、滤镜效果等。1 2 1 框架元素s v g 的框架元素，就是组成完整s v g 文档的基本元素，它包括 、 、 、 和 元素等【i l 】【1 3 】。 元素是定义s v g 图像必不可少的元素，s v g 文档以 元素开始，首先定义了用户当前坐标系中的一个可渲染的矩形区域，超出这个区域范围，客户端的s v g解释器将不对其进行渲染。这个区域范围n h 元素中的“x ”、”y ”，”w i d t h ”和“h e i g h t ”属性决定。s v g 元素可以嵌套使用川。 元素表示组，可把一批具有类似特征的元素定义成一个集合。当一些元素拥有相同的属性或者样式时，可将其作为子元素定义到一个 元素中，在 中说明样式，这样，说明的样式将会施加在子元素中，从而提高了文档的编写效率。 元素也可以嵌套定义。具体编程时需要注意的是，倘若 中的子元素定义了同 元素相同的属性，则渲染该子元素时，使用它自己定义的属性，而不是 中定义的属性，即在渲染时，对于同样的属性，予节点的优先级别高于父节点的。 元素和 元素相当s v g 文档中的注释。 元素用来定义s v g 文档的标题， 用来说明文档的主要内容，在浏览器中浏览s v g 图像时，两者的内容可能作为浮动提示窗口出现。 元素用来定义被引用的元素，其所有的子元素都在等待引用 1 l l i l 3 1 。6大庆石油学院硕士研究生毕业论文1 2 2s v g 定义的基本图元和其它矢量化图形工具一样，s v g 也有一些预定义的基本形状可供我们使用，s v g定义了6 种基本形状：矩形 、圆 、椭圆 、直线 、折线 、多边形 、路径 l 胂】。例如；上面的语句定义了一个矩形，以 r e c 伊标记开始，定义了矩形的各个属性，x 属性定义了矩形距s v g 用户坐标系y 轴的距离，y 属性定义了矩形距s v g 用户坐标系x 轴的距离，w i d t h 和h e i g h t 属性分别定义了矩形的宽度和高度。s t y l e 属性可以定义s v g 标准支持的c s s 样式属性。其中f i l l 属性定义了矩形的填充颜色，这里采用的是颜色名，s v g 也支持r g b 和十六进制的颜色格式，比如：f i l ：r g b ( o ，0 ，9 0 ) 或f i l l ：# f f 0 0 0 0 ：s t r o k e属性定义边框线，s t r o k e - w i d t h 定义边框线的宽度，s v g 默认边框线宽度为0 t t i i b s ，其效果如图l - 4 所示。s v g 中其他元素的显示方法类似。图i - 4s v g 绘制的矩形图i - 5s v g 中的文字显示1 2 3 网络矢量绘图中文字的显示文字是网络图像中的主角，不管是广告还是按钮往往都有文字作为其效果的修饰和内容的说明，但一般图像中的文字是以点阵图的形式存在的。s v g 则可以嵌入有图像效果的纯文本。它有许多优点：可以按照不同国家的书写习惯方便地实现从上到下，从右到左的编排，文本内容可选择、复制、粘贴，结合s v g 的交互性还可以实现对文字内容、样式的动态修改，同时文字的内容可作为图像的主题被搜索引擎收录。这些特点都是其他图片格式所不具备的【”】【1 3 】【1 6 1 。s v g 提供了较强的文字处理功能，如文字沿路径排列等都能实现，如图1 5 所示。不过目前还不支持文字自动换行，这是其缺点。具体应用时可以通过定义多个 元素以实现换行，也可通过 元素以实现同样的效果。7第l 章平台架构技术1 2 4 色彩渐变色彩渐变是指用两种或两种以上的颜色通过特定方向的过渡绘图的过程，通过使用色彩渐变，可以获得比呆板的单一颜色更生动美观的效果。使用渐变时一般需要先定义一种渐变格式，然后引用它。s v g 中有两种渐变格式线性渐变和放射状渐变i ”】【1 3 】。线性渐变 有水平渐变、垂直渐变和任意角度的渐变三种情况，如果y l 、y 2 属性的值相同，而x 1 、) 【2 属性的值不同，则代表水平渐变；y l 、y 2 不同而x 1 、) 【2 相同，代表垂直渐变；如果x 1 、x 2 ，y l 、y 2 都不同，则是角度渐变。颜色可以是两种或多种颜色的组合，每种颜色都要用 标记来指定，采用s t o p - c o l o r 和s t o p o p a c i t y属性表示颜色和透明度【1 1 】【1 7 1 。例如定义一个线性渐变元素及对它的引用，效果如图1 6所示。 s t o po f f s e t = ”o ”s t y l e ：2 ”s t o p - c o l o r ：y e l l o w ；s t o p - o p a c i t y ：o 6 ”胁 s t o po f f s e t = ”1 0 0 ”s t y l e = ”s t o p - c o l o r ：b l u e ；s t o p - 叩a c i t y ：0 6 ”胁 e l l i p s ec x 掣1 2 0 ”c y = “7 0 ”r 】( = ”8 0 ”r y = ”6 0 ”s t y l e = - ”f i l l ：u r l ( # l g r a d i e n ) 恰放射状渐变由 标记定义，c x ，c y 分别表示放射状渐变圆的圆心的x和y 坐标，r 表示圆的半径。s p r e a d m e t h o d 代表平铺的方式，有p a d ，r e f l e c t 和r e p e a t 三种方式f 。例如定义一个放射状渐变元素及对它的引用，效果如图1 7 所示。 s t o po f f s e t = ”5 ”s t y l e = ”s t o p - c o l o r ：r e d ；s t o p - o p a c i t y ：l ”扮 s t o po f f s e t = ”5 0 ”s t y l e = ”s t o p c o l o r ：g r e e n ；s t o p - o p a c i t y ：1 ”胁 e l l i i p s ei x = ”8 0 ”r y = ”6 0 ”c x 2 ”1 2 0 c y = ”7 0 s t y l e = ”f i l l ：u r l ( # r g r a d i e n t ) ；”卢图1 - 6s v g 中的线性渐变图l - 7s v g 中的放射性渐变大庆石油学院硕士研究生毕业论文1 2 5 滤镜效果滤镜效果是s v g 中最复杂也最具感染力的效果，众多的混合模式与复杂的光源设置、立体变换形式给图像提供了无限的创意空间。各种逼真的滤镜效果可以制作出类似于现实物体的影像，也可以生成手工所不能达到的亮丽效果u q 1 3 1 。使用滤镜也需要先定义再引用，只不过滤镜效果的定义比其他效果定义更复杂。一个完整的滤镜效果往往包括几步甚至十几步、几十步的基本滤镜变换，每一步变换都有一个输入参数，有一个输出参数，许多步变换首尾相连、交叉作用，最后形成完整的滤镜f i l l 【忉。s v g 提供了一些最基本的棱镜变换元素，如光照、偏移、模糊、色彩变换等。下面的语句定义了一个复杂的滤镜【m ，效果如图1 8 所示。 l e g a u s s i a n b l u rr e s u l t = “b l u r r e d a l p h a i n = ”s o u r c e a l p h a 。s t d d e v i a t i o n = ”3 房 f e s p e c u l a r l i g h t i n gr e s u l t = ”b u m p m a p s p e c u l a r ”i n = ”b l u r r e d a l p h a ”s u r f a c e s e a l e = ”5 。s p e c u l a r c o n s t a n t = ”0 5 ”s p e c u l a r e x p o n e n t = ”1 0 ”s t y l e = ”l i 曲t i n g - c o l o r ：r g b ( 2 5 5 ，2 5 5 2 5 5 ) f e d i s t a n t l i g h ta z i m u t h = 1 3 5 ”e l e v a t i o n = 。6 0 伶 f e c o m p o s i t er e s u l 卢“l i t p a i n t ”i n = ”l i t p a i n t ”o p e r a t o r = “a r i t h m e t i c ”k l = ”0 ”k 2 = ”l ”1 3 。”1 ”k 4 2 。0 ”i n 2 2 ”b u m p m a p s p e c u l a r ”，) f e c o m p o s i t er e s u l t = ”l i t p a i n t “i n = ”l i t p a i n t ”o p e r a t o r = ”i n i n 2 = ”s o u r c e a l p h a d f e m e r g e n o d ei n = ”o f f s e t b l u r r e d a l p h a ”侈 f e m e r g e n o d ei 1 1 = ”l i t p a i n t 房图1 8 s v g 中的滤镜效果 p a t hl l a n s f o r l n = ”t r a n s l a t e ( 一1 2 0 ，- 1 5 0 ) ”d - - ”m 2 3 3 。6 4 22 8 8c 2 4 9 92 6 5 7 2 83 1 82 3 1 2 6 63 1 81 9 5 6 1 3c 3 1 81 3 3 8 9 62 4 7 0 6 91 4 8 5 8 12 3 2 9 9 31 7 2 9 5 7c 2 1 8 0 4 11 4 7 8 3 21 4 91 3 7 8 0 51 4 91 9 5 6 1 3c 1 4 92 3 2 1 3 52 1 9 4 2 92 6 5 9 1 l2 3 3 6 4 22 8 89第1 章平台架构技术z ”s t y l e = ”f i l t e r ：u r l ( # e o m p l e x f i l t e r ) ；f i l l ：r e d ”詹q 91 2 6s v g 的事件与交互s v g 作为适用于网络的图形格式，它不但有体积小、可缩放、易修改等优点，还有强大的交互功能。s v g 图像可以使用内嵌脚本和外部脚本实现动态交互f l l 】【1 3 】。 元素用于在s v g 文档中直接内嵌一段脚本。由于脚本语言的程序段不属于合法的x m l 语句，所以需要使用x m l 的实体嵌入方法，其格式为： ! c d a t a 【】 为了便于通用函数的重复使用，很多时候，我们可以把它们放到一个独立的脚本文件中存放，通过 s c r i p tt y p e = t e x t j a v a s e r i p t x l i n k ：h r e f = ” 语句进行调用。此处的u d 可以使用相对路径或绝对路径。通常，s v g 文档会嵌入到网页中，网页中的s c r i p t 语句相对于s v g 文档来说就是外部脚本i l “。一般情况下，本文建议将对s v g 元素进行操作的函数作为内部脚本存放，因为有些函数是s v g 内部脚本所特有的，比如p r i n t n o d o 函数( 打印节点的内容) ，在s v g 文档调试时非常有用，但网页中不支持。外部脚本可以通过访问s v g 的内部脚本，实时传递绘图数据，动态改变s v g 的显示内容。此时，内部函数必须执行语句t o p f u n t i o n n a m e = f u n f i o n n a m e 。这样包含这个s v g 文档的顶级窗口就可以通过f t m t i o n n a m e 0 调用该内部函数了。倘若顶级窗口中有嵌套的框架结构，则各框架通过p a r e n t ，f u n e t i o n n a m e o 也可以调用该内部函数。对于s v gq ， 元素包含的脚本，如果是一段顺序执行的程序( 即没有写到函数中) ，那么脚本文件载入时，这些程序会立刻执行( 此时若调用尚未载入的元素时就会出错，所以建议除了定义全局变量外，最好把语句都放到函数中) 。而更多的时候，需要特定的事件触发一段脚本，即在相应的s v g 元素中声明一个事件，将函数连接到事件处理器上。s v g 中大多数可视化元素都支持事件，作为它的一个属性处理。具体的事件属性包括o n c l i c k 、o n m o u s e d o w n 、o m n o u s e u p 、o n n l o u s e o v e r 、o n m o u s e m o v e 、o i i l i i o u s e o u t 等。对于文档的一级元素( 如 元素) ，有o n l o a d 、o n u n l o a d 等事件属性。对于实现动画的元素，还包括o n b c g i n 、o n e n d 、o n r e p e a t 属性【j i 】【1 3 1f n t 。1 2 7s v g 动画s v o 除了支持动态交互外，还支持动画功能。通过使各种可视化元素的属性或样式按照一定的时间规律进行变化实现动画，动画的中间过程完全靠s v g 的客户端解释程序渲染完成【1 1 】【1 3 1 。1 0大庆石油学院硕士研究生毕业论文具体实现时可以采用在 素中调用样式、属性和使用s v g 的动画元素两种方式。1 2 6 节。s e t t i m e o u t 函数循环地动态改变元素的前者属于动态交互的范畴，具体可参见s v g 动画元素由s v g 规范制作工作组与w 3 c 组织的s y m m ( s y n c h r o n i z e dm u l t i m e d i aw o r k i n gg r o u p ，同步多媒体工作组) 合作推出，有 、 、 、 和 ，共5 个元素】【1 3 】。以下即为利用s v g 动画元素绘制钟表【1 8 1 ，效果如图1 - 9 所示。 i m a g ex l i n k ：h r e f = ”p e t r o l e u m j p g ”x = 2 0 ”y - = ”2 0 ”w i d t h = 1 6 0 ”h e i g h t = ”1 6 0 ”f i l l - o p a c i t y = ”0 彦， 1 2 3 4 5 6 7 8 9 1 0 1 l 1 2 q 妒图1 - 9s v g 动画绘制的钟表q 驴 a n i m a t e t r a n s f 0 1 t na t t r i b u t e n a m e = ”t r a n s f o r n l ”t y p e = ”r o t a t e ”d u r = ”3 6 0 0 s v a l u e s = ”0 ；3 6 0 ”r e p e a t c o u n t = - ”i n d e f i n i t e 压q 驴 l 驴q 驴1 3 d o m 技术d o m ( d o c u m e n to b j e c tm o d e l ，文档对象模型) 是w 3 c 组织定义的“允许程序或脚本动态地访问更新文档内容、结构和样式的、独立于平台和语言的规范化接口”i l l l 。1 3 1d o m 技术简介简单的说，d o m 是一组平台和语言中立的应用程序编程接e i ( a p i ) ，它能够描述如何访问和操纵存储在结构化x m l 和h t m l 文档中的信息。依照w 3 cd o m 规范，选用d o c u m e n t o b j e c t m o d e l 这个术语是因为d o m 在传统的面向对象编程的意义上是一个对象模型：文档利用对象被模型化，模型可以描述文档的结构以及文档的行为和文档对象的行为【1 9 1 。d o m 的工作方式是首先将x m l h t m l 文档一次性的装入内存，然后根据文档中定义的元素和属性在内存中创建一个“树型结构”，也就是一个文档对象模型，文档中每个节点对应着模型中的一个对象，可以使用这组对象访问并操作文档。d o m 在内存中是如何创建树型结构视图的，我们可以通过下面这个h t m l 文档来说明。 s a m p l ed o e u m e n t a nh t m ld o c u m e n t t h i si sa s a m p l e 可i d o c u m e n t 这个文档的d o m 树形结构视图如图1 1 0 所示。d o m 把文档表示为节点对象树，节点对象表示了文档中的所有内容，从最顶端的文档元素自身到单独的内容要素，比如属性、注释以及数据等都包括在内。每一个节点都有其专门的接口。1 2大庆石油学院硕士研究生毕业论文图1 1 0h t m l 文档的树形结构视图1 3 2s v g 中应用的典型d o m 接口s v g 是基于x m l 的语言规范，这意味着每个s v g 文件都可以作为x m l 文档处理。它不但继承了x m l 的文档结构