SVG的3D实现论文

2024-05-29

SVG的3D实现论文(精选7篇)

SVG的3D实现论文 篇1

摘要:SVG是一种描述二维图形的语言,其众多的优点受到WebGIS界的广泛关注,然而如何利用空间数据管理引擎来动态发布该格式的图形一直没有得到解决。提出了在Oracle Spatial上发布SVG的解决方案,详细介绍了特殊空间数据对象坐标转换、SDOGEOMETRY与SVG的对应关系及转换思路、投影坐标与屏幕坐标之间的变换等关键技术。

关键词:WebGIS,矢量图形,SVG,Oracle spatial,SDOGEOMETRY

0 引 言

近年来,随着Internet迅速发展及其在全球范围内的普及,基于Internet的网络地理信息系统(即WebGIS)已经成为GIS领域重要的研究方向。目前的WebGIS应用中,地图数据的显示一般采用两种方式:栅格地图或者矢量地图。SVG(Scalable Vector Graphics,可缩放矢量图像)是互联网联盟(W3C)的正式推荐标准,它是一种使用XML来描述二维图形的语言,它具备了一些独特的优点,因此SVG自从其出现就引起GIS界的广泛关注,国内外许多机构和个人对此展开了研究,提出了各种基于SVG的WebGIS的模型框架。但是由于SVG仅仅只是一个完全开放二维矢量图形格式,所以要使用SVG来表达空间数据信息就必须做一些设计与转换。目前有从各种空间数据格式转换成SVG文档的方法和工具,但它们只能实现对静态的SVG文档访问。这种方式是基于文件系统与数据库的混合组织管理方式:它是基于传统的关系数据库系统来存储地理空间对象的属性数据,而以文件方式来存储空间数据。它在数据的一致性维护、并发控制以及海量空间数据的存储管理等方面能力较弱,因而会阻碍SVG在WebGIS界的发展。

1 Oracle Spatial技术

1.1 Oracle Spatial的介绍

目前地理信息系统的空间数据管理采用基于空间数据库的组织管理方式:基于空间数据模型,直接构建用来存储和管理空间数据和属性数据的空间数据库系统来管理数据。Oracle Spatial是Oracle数据库强大的核心特性,包含了用于存储矢量数据类型、栅格数据类型和持续拓扑数据的原生数据类型。

1.2 Oracle Spatial的空间数据的存储

在Oracle Spatial的对象——关系模型中,一个空间实体的空间信息是存在用户定义的数据表中的一行字段名为GEOLOC,字段类型为SDO_GEOMETRY这种新的对象类型记录中的。Oracle Spatial这样定义SDO_GEOMETRY这个字段:

由该字段定义可以看出,SDO_GEOMETRY是一个对象类型的字段,由5个对象属性组成。即:一个空间实体的所有空间信息全部存储在这5个属性中。关于这些属性的含义比较复杂。

SDO_GYTPE:说明该空间实体的类型。是一个4个数字的整数,其格式为dltt,其中d表示几何对象的维数;l表示三维线性参考系统中的线性参考值,当d为3维或者4维时需要设置该值,一般情况下为空;tt为几何对象的类型,Oracle Spatial定义了7种类型的几何类型,目前,tt使用了00到07(包括一种用户自定义类型),另外,08到99是Oracle Spatial保留的数字,以备将来几何对象扩展所用。

SDO_SRID:一个预留属性,Oracle Spatial计划将它作为空间引用的外键。

SDO_POINT:由X、Y、Z 3个NUMBER型的属性构成,如果SDO_ELEM_INFO和SDO_ORDINATES都是NULL的话,该对象便是非空的,X、Y两个值用来表示点实体的坐标。否则,SDO_POINT这个属性将被忽略。

SDO_ELEM_INFO:定义为一个可变长的数组。用来表明如何解释存储在SDO_ORDINATES属性中的坐标信息。一个3元组包含以下3部分的内容:(1)SDO_STARTING_OFFSET表明每个几何元素的第一个坐标在SDO_ORDINATES数组中的存储位置。它的值从1开始,逐渐增加。(2)SDO_ETYPE用于表示几何对象中每个组成元素的几何类型。(3)SDO_INTERPRETATION具有两层含义,具体的作用由SDO_ETYPE是否为复杂元素决定。

SDO_ORDINATES:定义为一个可变长的数组,数组元素类型为NUMBER。用来存储组成空间实体边界的点的坐标值。

2 系统体系结构

本系统采用现在比较通用的3层结构体系设计:客户端的浏览器,中间的应用服务器和后台的数据库服务器。(1)客户层是一个标准的Web浏览器,负责与用户交互,向中间层的Web服务器发出请求,解释Web服务器返回的数据,并显示SVG图形,而且可以实现一般费时较少的简单操作。(2)中间层是Web服务器。(3)数据库服务器利用PL/SQL功能模块实现数据库的访问、解析客户端的请求、SDO_GEOMETRY格式的空间数据与SVG格式的空间数据转换。系统体系结构见图1。

3 SVG的图形表达的关键技术

3.1 特殊元素坐标的表达转换

Oracle Spatial和SVG在有些空间对象类型的坐标表达是类似的,然而Oracle Spatial对“圆 ”的表达是圆上任意三个不同点,而SVG对于圆的表示是由圆心(cx,cy)和半径r来表示,这可以用以下公式来转换:

3.2 SDO GEOMETRY与SVG对应关系

SVG本身就定义了一些与图形相关的元素,如矩形<rect>,圆<circle>,椭圆<ellipse>,线段<line>,多条线<polyline>,多边型<polygon>。这些元素只能表达一些简单的图形对象,对于复杂的空间数据类型不是很适合,因此必须设计一套适合Oracle Spatial的SVG图形表达方式。对于SDO_GEOMETRY中的点元素,我们可以采用SVG的circle进行表示。而对于其他元素就必须设计一个灵活的表达方法,这里用SVG的path来设计表达。SVG的路径(Path)可以是一个形状的外框,也可以是用来剪裁的路径线条,总之就是“一根线”。这根线可以被描边,可以用来表达空间如果封闭的话又可以被填充。路径是用点的集合来描述的。路径所使用的描绘方式有moveto(不进行绘制的动作而把当前点移动到某处)、lineto(从当前点画线段到某处)、curveto(绘制贝塞尔曲线)、arc(绘制圆弧或者椭圆弧)和closepath(封闭路径)等。一个复合路径中还可以含有子路径,形式相当灵活。

Oracle Spatial的SDO_GEOMETRY对象和SVG的Path元素,基本线都是直线和圆弧,在这里SDO_GEOMETRY的SDO_ELEM_INFO对应PATH的命令,SDO_ORDINATES对应PATH命令中的参数。其中对于多边形可能包括洞,SDO_ELEM_INFO的一个三元组只能表达多边形的一个环线。同时对于复合线和复合多边形还包含多个相邻子元素。SDO_GEOMETRY与SVG之间的对应关系如表1。r0表示任意小的数,用于表达点的半径。直线与圆弧线坐标用下标1和a来区别,1表示直线坐标,a表示圆弧线坐标。

3.3 SVG的文档的组织结构

SVG的点元素我们可以用circle,其他类型空间对象用SVG的Path来表达。对于属性数据的编码,直接使用<text>或者<textpath>表达,属性数据可以直接通过SQL查询并写入到SVG文件中。对于地图中的标记,也直接通过<text>或<textpath>表示。对于图层对象,用元素<g>进行组合,用<text>说明其属性信息。地图对象包含地图名称以及所包含的各图层对象两部分。地图名称通过<title>元素进行表示;图层对象是另外的文档,用嵌入的方式组合在一起。

3.4 投影坐标与屏幕坐标之间的变换

SVG图形在客户端显示给用户是的真实世界的坐标系。世界上大多数国家的基本地形图也都采用高斯一克吕格投影,其X轴向北,Y轴向东,下称为(realX,realY),单位m,而SVGDOM有两套坐标系,一为屏幕坐标系,X轴向东(右),Y轴向南(下),下称为(clientX,clientY),单位px,原点(0,0)在SVG DOM视窗的左上角,屏幕坐标系的位置是固定的。另一套坐标为用户坐标系,下称为(userX,userY),初始时,用户坐标系与屏幕坐标系重叠一致。

在SVG DOM我们使用的是用户坐标系,通过对用户坐标系旋转、平移、缩放以能在SVG DOM的矩形视窗范围内显示需要演示的图像。用户坐标系逆时针旋转90度后与投影坐标系一致,因此设定投影坐标系与用户坐标为1:1对应关系。要在SVG DOM中显示投影坐标系比例系数为s(px/m,1真实坐标单位m等于s个屏幕坐标单位px),左上角的投影坐标为(realX0,realY0),则用户坐标系必须做如下顺序变换(1)平移(-realX0,-realY0);(2)放大S倍;(3)旋转(-90)度。

在SVG的规范中,此变换由属性transform描述定义这种坐标变换:

三种坐标的关系为:

几何解释为:SVG DOM当前呈现视图,左上角的位置是投影坐标(realX0,realY0),S个像素(px)相当于一个投影坐标单位(m)。

4 应用实例

本文以镇江市及周边地区的街区、铁路的数据为测试数据,本实验实例完全按照前文所述方法实现。需要指出的是,由于SVG是下一代开放性的网络图像标准,但是目前的浏览器还不能支持,因此客户端要求安装插件,在此推荐的是Adobe公司的免费插件AdobeSVG Viewer3.0。实例主要实现了一些简单的功能如放大、缩小、平移、图层控制。页面模板仅规定了页面的图层名,具体图层数据是动态加载到网页,并且页面初始显示时加载的是街区图层数据。因此当用户初次打开网页和用户初次选择铁路图层时,都需要客户端与服务器端交互实现图层数据的动态加载。具体实验实例演示结果如图2。

5 结束语

基于Oracle Spatial/SVG的平台开发是一个全新的领域,它解决了传统方式中文字和图片分离的问题,真正实现了存储与显示的一体化问题,并且还具有传统Web GIS所不具备的高级动态交互功能,使按图像内容进行检索、编辑处理成为可能,同时又利用了Oracle Spatial的空间管理功能。本研究只是解决了SVG发布中的一些关键问题,对于一些复杂问题还有待解决。

参考文献

[1]刘啸,毕永年.基于XML的SVG应用指南[M].北京:北京科海集团公司,2001.

[2]胡金星.基于Oracle Spatial的WebGIS解决方案[J].计算机工程与应用,2003,3:184.

[3]潘农菲.基于Oracl Spatial的GIS空间数据处理及应用系统开发[J].计算机工程,2002,2:278.

[4]周文生.基于SVG的WebGIS研究[J].中国图象图形学报,2002,7:693.

[5]张旭,尹振江.基于SVG的空间数据组织及Web表现的研究[J].计算机应用研究,2003,6:130.

[6]徐云和,谢刚生,程朋根,陈红华.基于SVG的空间数据的可视化[J].计算机应用研究,2005,2:46.

SVG的3D实现论文 篇2

SVG是指可缩放矢量图形,这是一种基于可扩展标记语言,是用来描述二维矢量图形的一种图像格式,这种图像格式由万维网制定,制定标准具有开放性。相较于位图图像,SVG图像能够通过点和线对物体进行描述,得到的文件较小,画面更清晰,可以直接打印或输出,SVG得到的矢量图形格式,与GIF和JPEG光栅文件相比,有显而易见的优势:(1)任意缩放,使用者可以根据图像性质改变图像比例,而且不会对图像的清晰度和细节造成任何的破坏;(2)文本独立,SVG图像的文字与图像独立,能够在SVG独立的图像上编辑搜寻文字,而且对字体不会造成任何的限制,用户即使没有安装同一字体系统,得到与原画相同的画面;(3)超强的显示效果,SVG图像在屏幕边缘上具有极高的清晰度,既适用于打印分辨率和屏幕分辨率。本文基于SVG设计了网页软件,对提出的SVG软件的采集器软件系统,数据转换器软件系统以及数据处理器软件系统进行设计,通过研究验证了所设计网页设计软件系统的实际可操作性,是未来的必然发展趋势。

1基于SVG的网页设计软件的设计

基于SVG对网页设计软件系统进行设计,首先对软件的采集器进行设计,给出的算法如下述公式所述:(1)公式(1)中,w为SVG网页中的输入函数,t为网络节点,a为网络的控制系数,xi表示图像的集合邻近区域,w受系统的t和a影响,但变化值一般维持在50~100之间,利用公式(1)数据采集器能够对图像网络信息进行正常采集。采集器的设计是整个软件运行的基础部分,一旦采集器出现故障,整个软件系统都将无法工作。数据转换器是SVG网页设计的核心部分,转换器内部的工作模式为A/D模式,利用公式(2)的算法完成转换工作:(2)上述公式中,t位转换后得到的数据,e为转换前的数据,A0为网络数据转换常数,转换过程必须要在A/D转换模式下才能完成工作。数据处理器主要负责处理转换器得到的数据,将处理后的数据传递给中心计算机系统,从而实现SVG网页的设计,基于SVG对网页设计软件系统设计框图,给出的网页软件设计系统分多次限定数据,从而达到图像的完美设计。

2基于SVG的网页设计软件的实现过程

为了测试基于SVG设计的网页软件系统工作的有效性和可操作性,研究了实现过程。过程设计的参数如下:电源系统持续输入220V以上电压,电流值在50A~100A之间。跟据上述设定的参量以及环境进行网页设计,并与传统网页设计软件系统进行对比。虽然传统的网页软件系统和本文设计的软件系统在设计网页时都能取得2以上的设计效果,但本文设定的软件系统设计效果始终高于传统软件系统,而且设计能力极强,在工作时具有很强的抗干扰能力。综上所述,本文基于SVG设计的网页设计软件的设计性能性更高,设计范围更广,抗干扰能力更强,极具稳定性,且在编辑图像时可以单独对图像和文字进行编辑,缩放过程不会影响整个画面的清晰度。

3结束语

通过本文的探讨分析可以了解到,SVG(可缩放矢量图形)作为一种新的图形设计技术,在清晰度和画面饱和度方面远远高于GIF和JPEG光栅文件。SVG设计的网页设计软件,分为采集器软件系统,数据转换器软件系统以及数据处理器软件系统三部分。通过实验证明所设计的软件设计性能性更高,设计范围更广,抗干扰能力更强,极具稳定性,是未来的必然发展趋势。

参考文献

SVG的3D实现论文 篇3

造一颗心脏并让它在患者身上正常工作是一项雄心勃勃的计划,可能要等到儿年、甚至儿十年后,才能在一间标准手术室中把一颗3D打印心脏植入人体内。

不过,这项技术也并非那么遥不可及。科研人员已绎用3D打印机制造出了医用固定夹板、心脏瓣膜,甚至还有一只人耳。

3-5年打印出心脏部件

上述计划的负责人、心血管病学创新研究所细胞生物学家斯图尔特·威廉斯说,到目前为止,肯塔基州的路易斯维尔大学已经用细胞打印出了人体心脏瓣膜和小静脉。实验证明,这些小血管在老鼠等小动物身上可以正常工作。

如果一切能按计划进行,这种生物人造心脏有望在十年内进入人体实验阶段。首批受试者将是无法移植人工心脏的心脏病患者,比如因大小不合适而不能接受人工心脏的儿童。

他们还成功将细小的血管接在老鼠和其他小动物身上。威廉斯认为,科研人员将可能在三至五年内打印出心脏各部件并组装成一颗完整的心脏。

该成品将叫作“生物人工心脏”(bioficial heart),一种半天然半人工的产物。

威廉斯说,最大的挑战是让移植的细胞协同工作,就像它们在一颗正常心脏中所做的那样。利用患者自身细胞制造的器官可以解决一些患者对捐赠器官或人工心脏产生排异反应的问题,使患者不必服用抗排异药物。

他认为,如果一切按计划进行,这种心脏不到lO年就可以进行人体试验。但这种心脏将用患者体内的脂肪细胞制造,目前仍然存在很多困难,包括搞清楚如何才能让打印的心脏存活。

北卡罗来纳州韦克福里斯特大学的安东尼·阿塔拉正在领导一个小组,设法用3D打印机来制造人类肾脏。阿塔拉说:“对于肾和心脏这样复杂的器官,一个重大挑战就是向它们提供足够的氧气,直到它们与人体融为一体。”

已经可打印心脏瓣膜

3D打印的原理与常见的喷墨打印类似,只不过喷墨打印时喷出的是墨水,而打印心脏时,从针头中喷出的是细胞,这些细胞一层一层叠起来,形成一个立体的心脏。

威廉斯介绍说,打印用的细胞取白病人的脂肪。这些细胞需要经过仪器净化,再与凝胶混合后放入打印机“墨盒”中,按事先设定的形状打印。最终,这些细胞会长在一起,形成组织。

3D打印技术已经在医学界投入应用。先前已有研究人员利用3D打印技术打印出用来撑开患病儿童气管的支架以及心脏瓣膜,而康奈尔大学研究人员一年前曾用活细胞打印出一只耳朵。

除了3D打印这一途径外,还有科学家希望能把病人自体细胞放入“模子”,从而制作出色括心脏在内的多个器官。他们已经用这种方法制作出膀胱和气管并成功移植到人体。至于人类的心脏,当前还没有实验成功,不过,科学家们已经在实验室中制造出能跳动的老鼠心脏。可从人体尿液中获取能量

英国BrisLol机器人实验室的科学家们宣布,他们成功地使用3D打印机制造了第一台可驱动人工肌肉的机器“心脏”。这台机器心脏搭载微生物燃料电池(MFCs),可从人体尿液中获取能量。

这种机器“心脏”义被称为生物启发泵(biologicallyinspired pump),仍处于开发阶段,它是基于心脏的结构和功能原理进行设计的。科学家测试证明,机器“心脏”只需2毫升新鲜尿液即可执行连续33次动作,而且它可以以3.5伏的电压充电。

科学家开发机器“心脏”的目的不是为了制造用于人类或动物的假肢装置,而是希望能够为自主能源机器人(EcoBots)制造一个生物启发泵,这种机器人可以自动收集废物并将其转化为可自用的电能。

机器“心脏”使用微生物燃料电池技术,这种技术利用电化学电池中的活体微生物将有机原料转化为电能。自土能源机器人(EcoBots)就靠这种“心脏”获耿动力、执行给定的任务,这包括运动、环境检测以及远程基站进行无线通信。

该设备已经过测试,结果非常令人振奋。虽然科学家们承认,O.ll%的能量转换效率“有点低”,尽管如此,“这是‘同类中第一个’通过概念验证的原型,且研究人员们还没丌始提高能量转化效率的研究”,看来科学家们对提高能源转换率已然胸有成竹。

相关科学家们开展这个项目已经lO年时间了,在这期间,研究人员已经制造出四代EcoBots原型机。

在制造首个机器“心脏”样机时,科学家采用Stratasvs公司的光敏聚合物喷射技术打造刚性结构和机械部件。空心体的致动器和盖了都使用Objet的FullCure720刚性3D打印树脂创建。同样的3D打印工艺和材料被用来制造一个模具,然后使用有机硅弹性体浇铸来构建柔软、可压缩的区域。在第二个版本中,科学家们使用了的StraLasys公司柔软的橡胶状3D打印材料TangoPlus。通过3D打印直接构建弹性体部件,省去了模具制造和铸造阶段。

据悉,EcoBots的研发团队曾经接受过比尔和梅林达·盖茨基金会10万美元的捐赠。他们未来将着眼于提高机器“心脏”的工作效率,并将其纳入下一代MFC动力机器人。

打印出的器官保持活力尚难

不过,总体而言,用3D打印技术打印心脏说起来容易做起来难。研究人员说,他们而临的最大挑战是让打印出来的细胞像真正的心脏细胞那样协同工作。另外,如何让这些人造组织在打印出来后保持活力也是急需解决的难题。

正在尝试用3D打印技术打印肾脏的韦克福里斯特大学博士安东尼·阿塔拉说:“肾脏和心脏都是复杂的器官,我们必须为这些(打印)器官供氧以保证它们的活力,直到它们能与身体成为一个整体为止。”不管怎么说,技术的发展会让3D打印为人们所服务。

在最微小的范围内,3D打印机所能实现的生物工程任务仅此而已。最好的打印机可能只能打印儿毫米的结构,而最小的血管直径电就儿微米,一毫米相当于lOOO微米。

这就是3D打印技术只能让研究者们部分实现创造出一个完整心脏目标的原因。另外,研究者们还不得不依靠细胞天然的自我组织性质来连接血管,最终组合3D打印器官中的每个部件一一这一过程可以在24小时内完成。威廉斯说:“我们将打印大约数十微米或者差不多接近数百微米的东西,然后细胞将经历自身的生物发育反应,从而实现正确的自我组织过程。”

大多数研究者以为,实际大小的3D打印器官不可能会在未来10年或者15年内成为现实,但心血管病学创新研究所在继续稳步推进其10年内制造出3D打印心脏的目标。威廉斯预计其新一代“生物打印机”将于12月份开始批量生产。

SVG的3D实现论文 篇4

Web GIS是Intemet和WWW技术应用于GIS开发的产物。由于WWW技术的简单性与开放性,GIS技术被引入到WWW应用之中,从Intemet的任意节点,用户都可以浏览Web GIS站点中的空间数据、制作专题图、进行各种空间信息检索和空间分析。Wleb GIS不但具有大部分乃至全部传统GIS软件具有的功能,而且还具有利用Intemet优势的特有功能即用户不需要在自己的本地计算机上安装GIS软件就可以在Intemet上访问远程的GIS数据和应用程序,进行GIS分析,在Internet上提供交互的地图和数据。因此Web GIS是实现GIS互操作的一条最佳解决途径。本文主要探讨SVG在校园Web GIS方面的应用。

本系统实现的主要功能如下:

数据查询。为用户提供校园内的空间信息查询,主要为各建筑物、各办公室和各部门等信息查询。

图层显示。可对各个图层的可见性进行控制。

2 SVG概述

SVG的全称是可伸缩矢量图形(Scalable Vector Graphics),它是W3C组织为适应Internet Web应用飞速发展的需要而制定的一套基于XML语言的可缩放矢量图形语言描述规范。W3C组织于1998年8月专门成立了SVG工作组致力于图形标准的制定工作,并于1999年2月11日发布了第一个讨论草案,后几经修订于1999年8月12日发布最终草案。

SVG采用的是像Macromedia的Flash技术一样的矢量图形格式,矢量图形最大的特点是图像可以任意放大缩小面不损失任何细节。然而,SVG所带来的不只是这些,它可以对图形元素进行精确定位、内嵌字体、以及添加各种效果滤镜,图形制作者不再担心分辨率的不同,缩放自如的SVG可以保证它们在客户端绘制出来之后都是相同的效果,它给图形带来了一场革命。

3 SVG的特点

SVG并非仅仅是一种图形格式,由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性各可扩展性。SVG可以内嵌于其它的XML文档中,而SVG文档中也可以嵌入其它的XML内容,各个不同的SVG图形可以方便地组合,构成新的SVG图形,从而在图形可重用性上迈出了一大步。SVG同样支持使用层叠样式表CSS或可扩展样式语言XSL来定义它们的样式,比如填充颜色和线型等,只需要通过修改几个CSS就可以用同一个SVG文档创造出各种不同的表现。

SVG具有设计完善的DOM接口,使各种编程语言可以方便地对它的每一个元素进行操作。SVG内置了对于Javascript的支持,利用Javascript,可以为SVG添加引人入胜的交互程序。

SVG内的文字都以文本的形式出现在XML文件中,这些信息可以为搜索引擎所用,而以往搜索引擎通常无法搜索到写在点阵图像中的文字。这些文本信息还可以帮助视力有残疾而无法看到图形的人,可以通过其它方式(如声音)来传送这些信息。

灵活可升级的文件格式,SVG可升级的特性不仅仅表现在再次修改方面,还表现在其它很多地方.在以前的图像中,文本是作为位图保存于图像中,图像形成以后不能单独对文本进行修改,在PNG格式中这一点有所改进,文本可作为一个独立的层存在.SVG则更灵活地扩展了图像的文件格式,它由3个部分组成:矢量图形、文字和点阵图像。这样,SVG不仅仅可以应用矢量图形和文字对象,同样可以引入点阵图像而制作出任何它格式图像所能达到的效果。由于文件格式是文本形式的,因此可以很容易地在以后任何时候进行修改。

4 基于SVG的校园Web GIS体系结构

基于SVG的客户/服务体系结构分为三个层次:客户端、应用服务器,数据库服务器。如图1所示,用户在浏览器中选择一些需要查询的数据,并向服务器端发出请求,该请求通过http协议传送到服务器,服务器收到请求后,通过数据访问接口去访问相关数据库,并把从数据库中检索到的数据经过中间件处理再返回给客户端。

5 校园Web GIS的实现

5.1 本系统数据的组织。

地图数据的分层与管理,由于地图数据量非常大,要素多,不便于编辑管理,所以地图数据要分成点状要素层、线状要素层、面状要素层以及文字注记层,这样便于对地图数据进行科学管理。

SVG采用基于XML的DOM文档管理结构,很方便实现层次管理,其组对象就可以将其下面的所有图形管理起来。节点中的child Nodes属性可以获取所有的子节点的集合,get ElementsBy Tag Name()方法可以获取某种类型对象的列表,如要获取某组(g)下的所有路径(path)对象的集合,就可以调用get Elements By Tag Name("path")。本设计通过采用组对象来实现图层管理功能,不同图层的对象包含在不同的组中。通过设置组的属性,就可以实现如可见性、颜色、透明度等设置以及选中、删除所有对象等操作。SVG中的对象的样式属性具有继承性,如果下一级没有某样式属性,则直接使用其上一级的属性,以此类推,直到顶级为止。如:对某层设置某个显示透明度,则其下级元素显示时,均采用该透明度,除非其下级元素指定了透明度属性。SVG图形数据分层代码实现原理如下:

把需要分为一层的数据套起来,并给其设置id值,如下:

5.2 结果。结果如下图2所示:

6 结论

本文通过过使用SVG实现了校园Web GIS系统的建立。本系统还有很多功能有待实现。通过本系统的建立,我们可以看出,SVG是一种很好的矢量图形制作技术,随着Web GIS应用的越来越广泛,SVG技术将会在Web GIS领域中发挥出它的有用之处来。

参考文献

[1]刘啸,毕永年.基于XML的SVG应用指南[M].北京:北京科海培训中心,2001.

[2]王建设,陈永贵,陈贺.基于SVG格式的WebGIS地图的实现[J].安徽农学通报,2007,13(11):176-177.

[3]潘国荣,车建仁.SVG、GML在旅游信息WebGIS服务中的应用研究[J].江西科学,2007,25(3):305-307.

[4]侯晓静,苑津莎,李中等.基于SVG的电网WebGIS实现方案[J].电力系统通信,2006,27(163):41-43.

SVG的3D实现论文 篇5

Web应用已经成为当今应用软件的主流 , 人们习惯于通过浏览器加工处理信息。Web应用建立在HTML网页语言的基础上, 最大的优点就是可以跨平台使用, 可以在任何地方进行操作而不用安装专门的软件。然而, 在绘图方面, HTML一直没有提供一个好的解决方案, 为获得绚丽的动画和绘图效果, 不得不在页面中嵌入大量的Flash等插件。目前, 较好的Web矢量绘图解决方案有SVG、VML和HTML5 Canvas等技术。SVG和VML二者都基 于XML描述 , Canvas则是HTML5中的新元素, 都能很好地支持矢量图形在Web页面上的绘制。介绍一种利用SVG技术实现Web绘图的方法。

2 总体设计

2.1 设计思路

SVG (Scalable Vector Graphics) 是W3C制定的一种二维矢量图形格式, 也是规范中的网络矢量图形标准, 严格遵从XML语法。SVG包括3类图形对象 : 矢量图形、嵌入式外部对象和文本。 各种图形对象能够组合、变换或修改其样式。SVG通过多种标签元素来构成整个矢量图形 , 包括根元素svg、组合g、直线line、矩形rect、圆circle、椭圆ellipse、多边形polygon、折线polyline、路径生成图形path等。SVG完全支持DOM (Document Object Model), 可以利用JavaScript脚本来控制对象来实现良好的互动。

遗憾的是, IE浏览器并不支持直接使用SVG, 即使IE9也仅仅提供对SVG部分功能的支持。要想在IE上使用SVG, 必须使用插件。目前最常用的SVG查看工具是Adobe SVG Viewer 3.0, 在其支持下 , IE可以通过3种方式显示SVG图形: 直接展示SVG图形文件, 通过object或者embed标签展示。交互式绘图必须有绘图工具栏、参数控制面板等要素, 且需要实现对SVG图形元素的控制, 因此采用object标签展示SVG图形更为合适。

2.2 软件架构

Web绘图软件采用了三层结构 : 底层为数据库 , 用于存放SVG图形文本; 中间层为IIS服务器, 实现SVG文本数据在IE浏览器和数据库之间的交互; 顶层为IE浏览器, 通过JavaScript实现用户与SVG对象的交互 , 完成绘图操作。Web绘图软件的架构如图1所示。

2.3 数据库结构

SVG图形文本存放在SQL Server数据库中 , 数据库关系图如图2所示。表svg_doc用于存放SVG图形文本, text类型字段doc_content用于存放SVG文档内容, doc_type为0时表示SVG图形, 为100时为SVG图例。表svg_info用于存放SVG图形中相关元素的附加信息 , 这是所述Web绘图软件的一个特色, 可以为图形元素附加说明性的信息, 在浏览时点击该图形元素将其关联的信息显示出来。表svg_info_index把SVG图形与其图形元素的附加信息关联起来。每一幅SVG图形被赋予唯一的编码doc_id, 每一个具有关联信息的图形元素被赋予唯一的编码info_id。表sys_config用于生成doc_id和info_id等唯一的编码。

2.4 主界面

Web绘图软件的主界面由3大区域组成 : 顶部为绘图工具栏, 右侧为参数控制面板, 中间为绘图区。绘图区实际上就是一个SVG object, 因此能够利用SVG的DOM特性实现图形的绘制, 并可以真实地呈现所绘制的SVG图形。由于SVG object总是会呈现于其他所有HTML元素的顶层, 所以不能把参数控制面板设计在顶部或底部, 以避免其中的下拉列表框因为被SVG object覆盖而无法正常显示。

3 关键技术要点与实现

3.1 SVG 图形的呈现

SVG图形数据被从数据库读取后生成 .svg文件 , 然后再传递给HTML的Object标签的src属性 , 从而被浏览器 识别。 .svg文件名称以SVG+doc_id的方式命名, 以确保文件名称的唯一性。SVGDraw.aspx页面负责完成全部的绘图功能, 它提供了用于显示SVG图形的Object对象、绘图工具栏、参数控制面板。 由于Object的src属性值随着.svg文件名称变化而变化, 所以不能直接将Object标记在SVGDraw.aspx页面中, 而是先通过一个Literal服务器控件进行占位, 然后通过对Literal.Text赋值的方式呈现。

3.2 SVG 文档对象的获取与初始化

在SVGDraw.aspx页面的onload事件中进行绘图的初始化工作, SVG的Object标签名称为“svg”, SVG文档对象可通过document.all (" svg") 的getSVGDocument方法获得。有了SVG文档对象就打开了操纵SVG图形元素的通道 , 这是实现通过Web绘制SVG图形的关 键。全部 绘图功能 都通过JavaScript实现。SVG文档的每一个图形元素都是一个对象 , 可以通过createElement方法创建, 对象的属性值可以通过se- tAttribute和getAttribute方法设置和获取。

3.3 绘图控制要素

绘图操作所需的控制要素都是通过SVG自身的图形元素实现的。图层由SVG的组合元素g实现; 画布、可见区、剪贴板、Undo恢复区和选择框由矩形元素rect实现; 控制点也是由矩形元素rect实现, 并包含在一个组合g中; 锚点由圆形元素circle实现。

3.4 坐标变换处理

绘图操作是通过点击和移动鼠标来实现的, 获取鼠标的坐标并将之与SVG图形的坐标相对应非常重要。鼠标和SVG图形的坐标系是不同的, 而且SVG图形的坐标系会随着图形的移动、旋转或缩放等变换而改变。在SVG图形的缩放变化中, 绘图操作控制点和锚点的大小要保持不变。这些都需要坐标的转换。SVG支持变换矩阵运算, 通过getCTM属性可以获得图形元素的变换矩阵。利用变换矩阵可以非常方便地实现坐标转换和图形变换。

3.5 无闪烁保存功能

图形的保存分为3步: 首先采用递归方式遍历整个SVG文档, 获取每个图形元素的属性, 生成SVG文档字符串; 然后将SVG文档字符串赋值给HTML的一个hidden, 通过form的post方法传回给Web服务器; 最后由Web服务器更新到数据库中。这里有一个问题, form的post方法会造成整个绘图页面的重新加载, 这是一个缓慢的屏幕刷新过程, 会丢失原有的屏幕布局和状态, 显然难以令人接受。Ajax可以解决这个问题, 但需要引入大量的额外代码。采用这样的技巧进行解决: 在绘图页面中多加了一个form和一个隐藏的iframe, 将该form的target属性设为隐藏的iframe的name属性值, 利用该form的post方法提交SVG文档。这样不但实现了屏幕无闪烁保存, 而且保存是否成功的信息可以通过iframe中页面的alert对话框显示出来。

3.6 关联信息

SVG的图形元素可能代表某种意义 , 需要相关信息对其进行说明, 当用鼠标点击时将与其相关信息显示出来。这需要将图形元素与相关信息之间建立关联。实现方法是: 首先, 为图形元素增加自定义属性info-id, 并赋予其唯一的编码; 然后, 用一个页面编辑与其关联的信息, 并将info_id和关联信息保存在数据库中; 第三, 在SVG图形文档中增加一段ec- mascript脚本, 用来在点击图形元素时获取与图形元素关联的info-id, 并调用父窗口的open方法显示关联信息页面。

3.7 图例

用户可以把经常用到的复杂图形保存为图例, 这样在下次绘制该图形时, 可以直接选取该图例进行绘制。多个图例组合在一起形成一个图例库, 图例库是一个由图形元素g包裹的SVG图形 , 其图形文本也被保存在数据库的svg_doc表中 , doc_type字段的值为100。图例的创建方法是 : 首先 , 将一个绘制好的复杂图形进行组合, 形成一个由图形元素g包裹的图形组合; 然后用图例库的最外层的图形元素g的createElement方法创建该复杂图形的副本, 并将该副本附加到图例库中。

4 结语

SVG的3D实现论文 篇6

在日常工作中, 广大科技人员经常需要查询大量的生产数据信息, 从而为制定各种方案提供分析依据。随着“数字油田”的提出与应用, 对网络数据应用平台提出了更高的要求。目前, 我厂油田开发建设中的各项生产数据, 基本都是表格数字形式的, 这与既具体又直观的曲线图形相比, 效果相差很多, 特别是对于专业技术人员来说, 这一问题更加突出。如何准确、直观、形象地表达出各类数据信息的分析过程和统计结果, 最大限度地利用好现有的数据资源, 提高数据的应用效果和效率, 从中挖掘出更多更有用的信息, 已成为软件开发人员致力于研究解决的重要课题。

2、实现方案

ASP.NET是Microsoft公司新一代的Web应用程序开发工具, 也是第一次将面向对象的概念引入网络编程的领域。ASP.NET完全基于模块与组件, 具有更好的可扩展性与可定制性, 数据处理方面更是引入了许多新技术。与传统的网络编程语言ASP相比, 它有更快的运行速度、更高的稳定性、安全性并且易于开发和维护。

2.1 利用ASP.NET生成数据表

ASP.NET可以通过ODBC.NET或者ADO.NET技术访问各种数据库。本文采用比较高效的ADO.NET技术访问数据库, 具体步骤为:创建数据库连接-->请求记录集合-->存入数据集-->关闭连接-->操作数据。

一个Web应用程序中, 往往包括许多Aspx文件, 如果在每一个文件里都构造一个数据库连接字符串, 不但造成代码繁多, 而且如果数据库发生了变化 (如更改密码、IP地址) 需要改动每一个Aspx文件, 不便于维护。针对这个问题, 可以自定义一个公共的类, 访问数据库时只需将这个类实例化并调用类的方法就可以了。

自定义类的代码如下:

访问数据库数据时, 只需输入以下代码即可:

Dim DB As New CDataBase

DB.Construct ()

DB.Get Data (str SQL, ds)

2.2 利用SVG生成图形

SVG定义了六种基本形状:线 (line) 、折线 (polyline) 、多边形 (polygon) 、圆 (circle) 、椭圆 (ellipse) 、矩形 (rect) , 可以组合形成任何可能的图像。

2.3 利用ASP.NET+SVG生成图形

通过上述方法取得数据后可以很方便地在网页上显示数据, 但是如何在网页中动态的显示这些数据就需要一定的技巧了。

从数据库中取得所要查询统计的数据放到数据集 (ds) 中, 然后将数据集中的数据转换为字符串 (str) , 再使用SVG技术根据所要显示的形式 (折线图、柱形图、饼图……) 将字符串中的数据绘制成图形。

3、程序运行实例

以《井史数据查询统计》为例, 对处在任意时间段的油田、区块、自定义区块、固定井组的开发数据分别以月、季、半年、年四种选择方式进行查询, 它可以有两种表现方式, 一种是以表格数字的方式浏览数据, 另一种是以直观图形的方式展现数据。

用户可以根据需要自由的选择图形的字段及显示形式, 并且可以自由的放大图形, 以查看图形中的数据, 而不会破坏图形的清晰度。当鼠标移动到图形上某一点时, 可以显示这一点的具体值, 不但直观的反映了整体生产运行趋势, 而且可以方便查询到任意点的生产数据。

4、结语

通过将SVG的图形技术和ASP.NET技术相结合, 可以使数据更加清晰, 实现更好的组织结构化支持, 并向专业技术人员展示更加完美、更加直观、更加专业的图像。可以直观地表现数据的变化规律从而指导实践, 还可以帮助发现或验证一些有疑问的数据。

利用ASP.NET与SVG技术的结合, 既可高效地访问数据库, 又能以直观的图形方式显示数据, 必将为加快我厂的信息化建设进程起到积极的促进作用。

参考文献

[1]李云锦编著.ASP.NET网络应用开发例学与实践.2006.

[2]李应伟, 姚素霞, 景丽编著.ASP.NET数据库高级教程.

SVG的3D实现论文 篇7

可伸缩矢量图形 (Scalable Vector Graphic, SVG) 是一个标准开放的矢量图像格式, 是一种在XML中定义二维图形的语言。由于SVG通过简单的文本语句描述矢量图像, 所以SVG通常数据量很小, 特别是当它经过压缩后, 文件大小可减少75%到80%, 从而基于SVG构建Web GIS能减轻网络传输负载, 加快地图显示速度。并且基于XML的SVG在现有的Web上传输GIS数据具有可行性, 不需要改变网络基础, 利用原有的HTTP协议, 成本低, 而且文件小, 传输速度快, 因此在SVG中应用动画和动态交互功能可以充分满足SVG在各个领域的应用。本文笔者在过去的研究基础上, 进一步讨论了如何利用SVGDOM, Java Script技术实现SVG与MS SQL Server数据库动态交互功能, 并期望基于SVG技术的煤矿人员定位系统中得以应用。

2 SVG (Scalable Vector Graphics) 技术的特点

2.1 基于XML标准

XML是公认的拥有无穷生命力的下一代网络标记语言, 它拥有HTML语言所缺乏的伸缩性与灵活性。它实际上是一种定义语言, 使用者可以定义无穷无尽的标记来描述文件中的对象和数据元素, 从而突破HT ML固定标记集合的约束, 使得文件描述的内容更加丰富、更复杂、更容易组成一个完整的信息体系。

2.2 采用文本来描述对象

我们可以不用任何图像处理工具, 仅仅用记事本就可以生成一个SVG图像。建立在文本基础上的SVG图像中的描述语句浅显易懂、一目了然, 同时也可非常容易地直接进行修改与更新, “可升级”的特点在这里得到了充分直接的反映。

2.3 具有交互性和动态性

由于网络是动态的媒体, SVG要成为网络图像格式, 必须要具有动态的特征, 这也是区别于其它图像格式的一个重要特征。SVG是基于XML的, 它提供无可匹敌的动态交互性。你可以在SVG文件中嵌入动画元素 (如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等) , 或通过脚本定义来达到高亮显示、声音、动画等效果。

2.4 完全支持DOM

DOM (Document Object Model文档物件模型) 是一种文档平台, 它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM, 因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动, 例如鼠标动作, 实现自身或对其他物件、图像的控制等。

正是由于SVG具有上述的特点使得SVG技术在煤矿人员定位系统矢量图中的应用具有可行性。

3 SVG与SQL Server数据的交互原理

SVG与SQL Server数据交互功能的实现, 重点在于利用Java Script和C#对客户端功能的开发, 利用Java Script函数来获取SVG图形对象及其内部的图形属性, 重而实现Asp.net和SVG的交互功能。

首先, 客户在浏览器中选择一些需要查询的数据, 并向服务器端发出请求, 该请求通过HTTP协议传送到服务器端。服务器端收到了请求后, 就通过数据访问接口去访问相关的数据库, 并把从数据库中检索到的数据转换成相应的XML格式、SVG格式和HTML格式的文件返回给客户端, 这些功能都是由Asp.net技术来完成的。如图1所示。

4 基于SVG技术的煤矿人员定位系统的应用

煤矿人员定位系统的核心功能就是对井下人员及设备进行监控并显示到巷道图中, 使得管理人员在井上就可以实时看到井下的状态, SVG技术恰恰符合煤矿人员定位系统对矢量图应用的所有要求。下面就以SVG图形添加基站为例介绍SVG在煤矿人员定位系统中的应用。

如果我们要想在SVG图上添加一个基站, 并将该基站的位置信息保存SQL Server数据库中, 我们首先应该, 先在SVG图上相应的位置添加点图元Insert Dot (x, y, color) , 然后利用JS函数 (add Baser (x, y, strid, 'add Baser.aspx') ) 该点图元的位置信息传递给Asp.net, 最后利用Asp.net调用SQL Server数据库, 将图元的位置信息记录到定位数据库中, 其实现效果图如图2所示。

其主要函数如下:

5 结束语

本文介绍了SVG的特点及SVG与SQL Server数据库交互的主要途径及原理。在此基础上, 以SVG添加基站为例介绍了SVG与SQL Server数据库的交互在煤矿人员定位系统中的应用实现, 充分说明了SVG应用于煤矿人员定位系统是可行的。

摘要:文章论述了开放的矢量图形描述语言SVG技术及其优势, 然后通过JavaScript编程访问SQL Server动态生成SVG图为例, 介绍了基于JavaScript编程的SVG地图与SQL Server的数据交互实现, 并在基于SVG技术的煤矿人员定位系统中得到了应用。

关键词:SVG,JavaScript,SQL Server,图像

参考文献

[1]徐欧.论SVG技术在Net平台上的实现[J].计算机工程, 2004, 1 (30) 增刊.[1]徐欧.论SVG技术在Net平台上的实现[J].计算机工程, 2004, 1 (30) 增刊.

[2]陈曦.基于JavaScript及JAVA的SVG交互应用[J].科技咨询-IT技术, 2006.7.[2]陈曦.基于JavaScript及JAVA的SVG交互应用[J].科技咨询-IT技术, 2006.7.

[3]王涛, 曾文权.使用ASP.NET动态创建轻量的SVG图像[J].电脑知识与技术, 2009 (11) .[3]王涛, 曾文权.使用ASP.NET动态创建轻量的SVG图像[J].电脑知识与技术, 2009 (11) .

上一篇:中学班主任工作管理下一篇:循环加载