（计算机应用技术专业论文）基于svg的长安大学东院电子导航系统研究与设计.pdf

摘要 长安大学是由原西安公路交通大学、西安工程学院、西北建筑工程学院三所院校于 2 0 0 0 年合并组建而成的，现有本部、雁塔、小寨、渭水、太白五个校区。由于校区众多， 给刚进校的新生及办事的教职员工带来诸多不便。为了解决此问题，我们开发了基于b s 架构的长安大学雁塔校区电子导航系统。 本系统采用j s p 及s v g ( s e e a b l ev e c t o rg r a p h i c s ，可缩放向量图形) 技术，通过 对d o m ( d o c u m e n to b j e c tm o d e l ，文档对象模型) 树建立的搜索查询算法，设计并实 现了长安大学雁塔校区电子导航系统。该系统具有校园区域查询功能，图层控制功能， 图形缩放，图形移动及超链接功能。特别对六号学生公寓楼实现了宿舍导航，提供了层 的模糊查询方式，以及对具体宿舍位置的精确查询方式。 本系统可以查找雁塔校区的任何区域及六号学生公寓的所有宿舍，为广大师生及教 职员工提供了极大的方便。对长安大学的发展建设具有深远的意义。 关键词：长安大学，s v g 地图，电子导航，六号楼查询 a b s t r a c t c h a n g a nu n i v e r s i t yh a sb e e na m a l g a m a t e da n df o r m e db yp r e v i o u sx i a np u b l i cr o a d a n dt r a f f i cu n i v e r s i t y , x i a ne n g i n e e r i n gc o l l e g ea n dn o r t h w e s ta r c h i t e c t u r ea n de n g i n e e r i n g c o l l e g ei n2 0 0 0 t h e r ea r eb a s a lc a m p u s ，y a n t a ，x i a o z h a i ，w e i s h u ia n dt a i b a ib r a n c hc a m p u s n o w t h ef r e s h m e na n df a c u l 够m e m b e rw e r ei n c o n v e n i e n tb e c a u s eo fi t sn u m e r o u sc a m p u s e s t h e r e f o r ew eh a v ee x p l o i t e de l e c t r o nn a v i g a t i o ns y s t e mw h i c hb a s eo nb sf r a m e w o r ki n y a n t ab r a n c hc a m p u so fc h a n g a nu n i v e r s i t y t h i ss y s t e mu s e sj s pa n ds v g ( s c a l a b l ev e c t o rg r a p h i c s ) t e c h n o l o g y a n di th a v e d e s i g n e da n da c h i e v e de l e c t r o nn a v i g a t i o ns y s t e mi nc h a n g a nu n i v e r s i t yb ye s t a b l i s h i n g s e a r c hi n q u i r yw a yo fa r i t h m e t i cf o rd o m ( d o c u m e n to b je c tm o d e l ) i th a ss o m ef u n c t i o n s ， i n c l u d i n gi n q u i r i n ga b o u ta r e ai nc a m p u s ，c o n t r o lo ff i g u r e ，z o o mo ff i g u r e ，m o v e m e n to ff i g u r e a n dh y p e r l i n k s w h a t sm o r e ，t h i ss y s t e mh a v e a c h i e v e dn a v i g a t i o nt od o r m i t o r yo fn o 6 n o n c o l l e g i a t eh o s t e l ，s u p p l i e dt h ew a yo fv a g u ei n q u i r ya b o u tf l o o ra n dt h ew a yo fp r e c i s e i n q u i r ya b o u tc o n c r e t ep o s i t i o no fd o r m i t o r y t h i ss y s t e mc a ns e a r c he v e r ya r e ai ny a n t ac a m p u sa sw e l la sa l lt h ed o r m i t o r i e si nn o 6 n o n c o l l e g i a t eh o s t e l ，w h i c hs u p p l yc o n v e n i e n c et oa l lt h et e a c h e r sa n ds t u d e n ta sw e l la s f a c u l t ym e m b e r , a n dh a v eg r e a ts i g n i f i c a n c et od e v e l o p m e n to fc h a n g a nu n i v e r s i t y k e y w o r d s ：c h a n g a nu n i v e r s i t ys v gm a p e l e c t r o nn a v i g a t i o ns y s t e mi n q u i r ya b o u t n o 6n o n c o l l e g i a t eh o s t e l 论文独创性声明 本人声明：本人所呈交的学位论文是在导师的指导下，独立进行研究 工作所取得的成果。除论文中已经注明引用的内容外，对论文的研究做出 重要贡献的个人和集体，均已在文中以明确方式标明。本论文中不包含任 何未加明确注明的其他个人或集体已经公开发表的成果。 本声明的法律责任由本人承担。 敝作者签名：勇) 吴 论文知识产权权属声明 歹月日 本人在导师指导下所完成的论文及相关的职务作品，知识产权归属学 校。学校享有以任何方式发表、复制、公开阅览、借阅以及申请专利等权 利。本人离校后发表或使用学位论文或与该论文直接相关的学术论文或成 果时，署名单位仍然为长安大学。 ( 保密的论文在解密后应遵守此规定) 论文作者签名： 刘昊沙7 年衫月目 导师签名：鲥一一7 7年孑月e t 长安大学硕士学位论文 第一章绪论 1 1 开发背景 长安大学直属国家教育部，是国家“2 1 1 工程”重点建设大学，由原西安公路交通大 学、西安工程学院、西北建筑工程学院三所部属院校于2 0 0 0 年4 月1 8 日合并组建而成。 学校以工为主，理工结合，兼有经济、管理、人文多种学科，有2 个国家级重点学科、 8 个省部级重点学科和1 0 个省部级重点实验室，有具备国家甲级资质的交通基本建设监 理公司和建筑设计院，有全国高校仅有的汽车高速试验环道和综合测试场，有具有先进 水平的公路勘测实习基地和筑机、汽运、建筑学科实验、实习基地，有国内高校一流、 可容纳3 0 0 0 名观众的体育馆，以培养公路交通、国土资源与环境、建筑工程等专业人 才为办学特色。长安大学坐落于世界历史文化名城西安市，周围高校、科研、文化单位 众多，治学氛围厚重。占地3 0 0 0 亩，设校本部、雁塔、小寨、渭水和太白山等五个主 要校区，校区多，而且校区间分布不集中，各个校区之间距离比较远，从本部到渭水校 区坐车就要4 0 分钟。随着国家扩招政策的展开，学校规模也日渐宏大。随之而来就会 出现一些问题。 首先，对于刚刚进校的大一新生来说，对学校的了解几乎是一片空白。新生们可能 在不同的校区生活，在西安南郊找校区就是一件非常困难的事情，何况校区之间距离远， 一旦走错路会耽误不少时间。就拿我们来说，在学校生活了几年，有些校区仍然找不到， 何况是刚进校的新生。新生们好不容易找到所在校区，迈进校门，又难免会有一种找不 着北的感觉。对校园规模不了解，对校园分布也不了解，找宿舍，找食堂，找浴室，找 教室等又给新生们带来了不少困惑。其次，对于到学校办事的人员来说，对学校具体机 构所在位置更是一无所知。找不到所要拜访的机构，既费时又误事。再次，对于学生家 长来说，到学校看望自己的儿女，只知道宿舍编号，却不清楚宿舍具体位置在哪，给广 大学生家长带来了很大的不便。还有，对于有意想报考我们长安大学的学生及其家长来 说，想要具体了解一下学校情况，规模布局等，也是很不方便。 随着社会的发展和技术的进步，用计算机技术对学校资源进行科学有效的管理，将 校园信息有效地发布是时代的需要。越来越多的人都希望可以在一幅全校地图上看到所 有的教室实验室信息、运动娱乐场所信息、道路信息、服务机构信息、公寓楼信息、行 政办公单位信息等，当用户放大某个局部或点击某个地点时( 通过鼠标操作) ，可以显 示所指区域或地点的图片及文字介绍，进而可以查询其功能、所属区域、及周边道路等 第一章绪论 校园导游情况。我们调查了全国各大高校( 如清华大学，北京大学，西安交通大学等) 的网站，他们都没有如此技术、如此功能和如此结构的系统。结合上述时代和技术发展， 为了解决学校如上的问题，我们决定用计算机技术以及网络来实现这一功能。设想如果 新生，来访者，学生家长等能够现在网络上先查找到所需要的信息，再来学校办事，这 样就既省时，又省力，而且为他们提供了很多便利。 为此，结合长安大学的特点，开发了长安大学校园电子导航系统。从而学校网站功 能会更加庞大，实用。 1 2 国内外研究技术开发状况 长安大学雁塔校区电子导航系统是一种地理信息系统，即g i s ( g e o g r a p h i c i n f o r m a t i o ns y s t e m ，地理信息系统) ，g i s 是能够收集、管理、查询、分析、操作以及表 现与地理相关的数据信息的计算机信息系统，能够为分析、决策提供重要的支持平台。 它广泛地应用于地学、资源管理、土地规划、环境监测、防灾减灾、电力行业、交通管 理、城市规划、科研、教育和国防等领域，在我国国民经济建设中发挥着重要的作用。 自上世纪9 0 年代以来，随着计算机软硬件的快速发展，特别是互联网( i n t e r n e t ) 万维 网( w r o r l dw i d ew 曲) 技术在我国的应用和发展，网络化的地理信息系统已逐渐成为一 种全新的地理信息展示方式。基于i n t e m e t 的网络地理信息系统已成为g i s 领域重要的 研究方向“。w e b g i s 是g i s 技术与i n t e m e t 技术相结合的产物，是g i s 技术的发展，是 g i s 技术走向社会化的必然途径，是实现“数字地球”的核心技术之一心1 。目前，主要通 过对矢量图形进行处理的方式来设计开发w e b g i s 。 1 2 1g i s 与w b b g i s 传统g i s 大多数是基于早期的计算机技术设计和开发的。在很大程度上限制了g i s 软件的进一步发展和应用。随着新技术的不断涌现和发展，传统g i s 面临着严峻的挑战， 具体表现在：成本高；维护费用大；数据共享困难：操作复杂；不具备跨平台的特性聆3 。 w e b g i s 是互联网与地理信息系统的结合，它使用户不必买昂贵的g i s 软件，而直 接通过w e b 获取g i s 数据和使用g i s 功能。相比之下，可以看出w e b g i s 具有以下优 占 3 | j 、 1 全球化的客户服务器网络系统 w e b g i s 应用客户服务器概念来执行g i s 任务，它把任务分为服务器端和客户端 两部分，客户可以从服务器请求数据、分析工具和模块。服务器或者执行客户的请求并 2 长安大学硕士学位论文 把结果通过网络送回给客户，或者把数据和分析工具发送给客户供客户端使用。 2 真正的信息共享 w e b g i s 通过通用的浏览器进行信息发布，使得不仅是专业人员，而且普通用户也 能方便地获取所需信息；此外，w e b 服务正在渗入干家万户，在全球范围内任意一个 n 棚r 站点的i n t e r n e r t 用户都可以获得w e b g i s 服务器提供的服务。真正实现了g i s 的 大众化和高度共享。 3 跨平台支持 w e b g i s 可以访问不同的平台，而不必关心用户运行的操作系统。只要能访问 i n t e m e t ，用户就可以访问和使用w e b g i s 。 4 分布式系统 w e b g i s 利用i n t e m e t 分布式特点把g i s 数据和分析工具部署在网络不同的计算机 上，用户不需要在自己的本地计算机上安装g i s 数据和应用程序，只要把请求发送到服 务器，服务器就会把数据和分析工具传送给用户。 1 2 2 矢量图 矢量图h ，毛6 | ( v e c t o r ) ，也叫做向量图，简单的说，就是缩放不失真的图像格式。矢 量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数 来实现的，也就是说，矢量图实际上并不是像位图那样纪录画面上每一点的信息，而是 纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形相对应的函数 进行运算，将运算结果( 图形的形状和颜色) 显示给你看。无论显示画面是大还是小， 画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，其显示 效果仍然相同( 即不失真) 。 1 2 3 常用矢量图格式的比较 目前，在市场上有三种格式的矢量图形备受追捧，一种是m a c r o m e d i af l a s h 的s w f 格式矢量图形口8 1 ，另一种是微软1 9 9 9 年9 月附带i e 5 0 发布的v m l ( v e c t o rm a r k u p l a n g u a g e ，矢量可标记语言) 格式矢量图形阳，1 0 1 ，第三种则是w 3 c 提出的s v g ( s c a l a b l e v e c t o rg r a p h i c s ，可缩放向量图形) 格式矢量图形n 1 1 2 1 3 1 4 ，1 5 1 。 1 s w f 格式矢量图形 m a c r o m e d i af l a s h 的s w f 格式提供矢量和动画功能，但f l a s h 必须要依靠浏览器外 挂程序( 插件：p l u g i n s ) ，而且因为f l a s h 的格式是二进制的，f l a s h 中的文字内容无法 让使用者在浏览器中做字符串搜索，这样的网页也无法让搜索引擎索引来供用户做全文 检索。此外，高互动性的多媒体动画，往往需要编程来实现，在这一点上f l a s h 也有先 第一章绪论 天的不足，f l a s h 和j a v a s c r i p t 之间的互动，只能通过比较狭窄的f s c o m m a n d 来做桥梁。 当然，尽管f l a s h 有上述这些缺陷，但时至今日，它仍是网上矢量动画最好的解决方案。 2 v m l 格式矢量图形 v m l 是一个最初由m i c r o s o f t 公司开发的x m l 词表，现在也只有i e 5 。0 以上版本 对v m l 提供支持。使用v m l 可以在i e 中绘制矢量图形，所以有人认为v m l 就是在 i e 中实现了画笔的功能。下面介绍一下v m l 的特点： ( 1 ) 基于x m l 标准 x m l 是公认拥有无穷生命力的下一代网络标记语言，v m l 具有先天的优势，它的 表示方法简单，易于扩展等。 ( 2 ) 支持高质量的矢量图形显示 v m l 支持广泛的矢量图形特征，它们基于由相连接的直线和曲线描述路径。( 3 ) 由 文本构成的图像，并可集成到h t m l 由于v m l 使用简单的文本来表示图像，这样就可用很少的字节来表示比较复杂的 图像。v m l 与h t m l d 印兼容，通过在h t m l 中声明v m l 命名空间并声明处理函数， 就可以和其他h t m l 元素一样使用v m l 元素，在客户端浏览器显示图像。 ( 4 ) 支持交互与动画 但v m l 的功能不只是绘图，他还可以在图形中嵌入文本，并可实现超链，还可通过 脚本语言实现一定的动画功能。 3 s v g 格式矢量图形 s v g 可缩放矢量图形钉( s c a l a b l ev e c t o rg r a p h i c s ) 是基于可扩展标记语言 ( x m l ) ，用于描述二维矢量图形的一种图形格式。s v g 由w 3 c 在融合了a d o b e 和m i c r o s o f t 公司的意见后制定的一个开放标准。 s v g 严格遵从x m l 语法，并用文本格式的描述性语言来描述图像内容，因此 是一种和图像分辨率无关的矢量图形格式。s v g 图形格式具有以下优点瞳3 ： ( 1 ) 图像文件可读，易于修改和编辑。 ( 2 ) 与现有技术可以互动融合。例如，s v g 技术本身的动态部分( 包括时序 控制和动画) 就是基于s m i l 标准。另外，s v g 文件还可嵌入j a v a s c r i p t ( 严格的 说应该是e c m a s c r i p t ) 脚本来控制s v g 对象。 ( 3 ) s v g 图形格式可以方便的建立文字索引，从而实现基于内容的图像搜索。 4 长安大学硕士学位论文 ( 4 ) s v g 图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可 以实现位图格式中类似文字阴影的效果。 ( 5 ) s v g 图形格式可以用来动态生成图形。例如，可用s v g 动态生成具有 交互功能的地图，嵌入网页中，并显示给终端用户。与f l a s h 相比，s v g 最大的优 势是与其他标准( 比如x s l 和d o m ) 相兼容。而f l a s h 则是未开源的私有技术。 1 2 4s v g 概述 w 3 c 推出的s v g ( s c a l a b l ev e c t o rg r a p h i c s ) 是一种基于x m l 的用来描述2 d 的矢 量图形和矢量栅格混合数据格式的语言n6 | 。s v g 是一种基于开放标准的可扩展语言n 7 | ， 能够满足w e b 开发者对动态、可缩放与平台无关的w e b 内容表现和交互手段日益增长 的需求。w 3 c 中的s v g 工作组由2 0 多个成员组成，其中包括s u n 、i b m 、a d o b e 、h p 、 m i c r o s o f t 、a o l n e t s c a p e 等业界知名的大公司。与网络上其他的矢量文件相比，它具有 纯文本、开放、动态、可缩放和平台无关等特性。 s v g 使用x m l 语法，并且使用文本格式来存储图形信息，所以s v g 是一种与图 象分辨率无关的矢量图形格式。s v g 规范定义了s v g 的特征、语法和显示效果，包括 模块化的x m l 命名空间( n a m e s p a c e ) 和s v g 文档对象模型( d o m ) n 8 ，1 9 2 引。 s v g 支持三种类型的图象显示，包括矢量图形、位图和文本。对于矢量图形，s v g 中有专门的标一记来进行描述，包括矩形( r e c t 5 、园( c i r c l e ) 、椭圆( e l l i p s e ) 、直线( 1 i n e 、 折线( p o l y l i n e ) 、多边形 标记可以将独立的位图在图形中显示。对于文本，s v g 使用( t e x t 标记来嵌入文本数据。此外，s v g 图形还支持很多其它高级应用，如动画、滤镜等。使 用s v g 存储图形可以绘制出其它图形格式所不具备的显示效果，在空间矢量信息发布 方面，它具有如下的特点心“2 2 2 3 t 2 4 ，2 5 2 6 2 7 1 ： ( 1 ) 高质量地图的理想载体 在s v g 中，所有典型的g i s 元素( f e a t u r e s ) 都可以被显示和操作：用户可以放大 地图图像到任何倍数而不必担心损失地图的细节；并且s v g 图像具有增强的调色板和 颜色控制特性，可以提供1 6 0 0 万种颜色；s v g 还提供了滤镜效果。s v g 也可以方便地 添加栅格图形，这样在发布遥感图像的时候就非常方便。所以o g c 在定义w e bm a p s e r v e r 的时候把s v g 文件作为w e b 地图服务的一个基本的文件格式。 第一章绪论 ( 2 ) 具有可检索性 s v g 有基于纯文本的特性，具备像文字信息一样的可检索性，从而使人们对w e b 图形检索的梦想成为现实。 ( 3 ) 可交互性 s v g 支持d o m ( d o c u m e n t o b j e c t m o d e l ) ，通过对d o m 的控制，图形图像可以动 态地显示和交互，例如对图像进行缩放、漫游和图层控制等。利用d o m 还可以进行 图形图像的动态实时更新。 ( 4 ) 节省时间与存储空间 利用l z w 等压缩算法对s v g 进行压缩，其压缩率是非常高的。s v g 文件高压缩 率使得文件大小和下载时间大大减少，这对于数据量大的地理数据在w e b 上发布是非 常重要的，而在实际应用中所有的数据都可以以压缩的矢量图形进行传输的，由于文件 小，在i n t e m e t 上可以很快地下载。 ( 5 ) 支持超链接 s v g 具有图形链接功能，这对于网络化空间信息系统是很有用的。例如鼠标移动事 件可以使一条线、多边形或者一个符号加亮显示，并且通过w e b 链接打开一个新窗口 来显示更详细的信息。 ( 6 ) 支持移动设备 s v g 具有两个支持移动设备的版本：s v gt i n y 和s v gb a s i c 。这样s v g 就可以支 持空间信息在移动设备上的发布。 ( 7 ) 可以与其他x m l 应用协同工作 s v g 在本质上是x m l 的一个应用，共同的出处使得s v g 与当前已有的和未来将 有的其他x m l 应用之间存在着天然的交融，从而使这些前程远大的技术和应用之间的 协作变得十分简单。 正因为s v g 具有以上的这些优点，使它成为新一代网络多媒体特别是图形的发布 标准，由于空间信息特别是矢量信息的可视化表达通常采用多媒体( 图形、文字) 的方 式进行表达，因此基于s v g 的图形瞳8 3 的水印研究是空间信息应用中的一个研究热点。 1 2 5x m l 概述 x m l 即为可扩展的标记语言( e x t e n s i b l em a r k u pl a n g u a g e ) ，x m l 是一套定义语句 标记的规则，这些标记将文档分成许多部件并对这些部件加以标识乜9 1 。 x m l 是标记语言，理解x m l ，首先要理解标记，可以从熟悉的h t m l 口们的标记来 6 长安大学硕士学位论文 讨论，通俗的讲，它就是一种用来给文本添加标记的语言。在h t m l 里每一个标志都 是有确切含义的。x m l 提供了一组事先已经定义好了的标签，提供了一个标准，利用 这个标准，你可以根据实际需要定义自己新的置标语言，并为这个置标语言规定它特有 的一套标签。准确地说，x m l 是一种源置标语言，它允许你根据它所提供的规则，制 定各种各样的置标语言。从这个意义上来说，x m l 是比h t m l 更抽象的一个语言，利 用x m l 可以定义出类似h t m l 一样的语言来，所要做的工作就是对x m l 的部分进行 定义。 x m l 具有如下的优点口1 3 2 i ： ( 1 ) x m l 允许各种不同的专业( 如音乐、化学、数学等) 开发与自己的特定领域有 关的标记语言。比较早而且比较典型的是下面两个实例：化学置标语言c m l ( c h e m i s t r y m a r k u pl a n g u a g e ) 、数学置标语言m a t h m l ( m a t h e m a t i c a lm a r k u pl a n g u a g e ) 。这就使得 该领域中的人们可以交换笔记、数据和信息，而不用担心接受端的人是否有特定的软件 来创建数据。 ( 2 ) x m l 具有较好的保值性3 3 4 3 ，过去4 0 年来的大多数计算机数据都丢失了，不 是因为自然损害或者是备份介质的磨损，而只是因为没有人来写出如何读取这些数据介 质和格式的文档。以不常用的格式保存的二进制数据，数据也许会永远地消失了。x m l 在基本水平上使用的是非常简单的数据格式。可以用1 0 0 的纯a s c i i 文本来书写，也 可以用几种其他定义好的格式来书写。 ( 3 ) 应用间交换数据，由于x m l 是非专有的并易于阅读和编写，就使得它成为在 不同的应用间交换数据的理想格式，不受版权、专利、商业秘密或者是其他种类的知识 产权的限制。x m l 的功能是非常强大的，同时对于人类或者是计算机程序来说，都容易 阅读和编写，因而成为交换语言的首选。 ( 4 ) x m l 还具备简单数据库的功能，可以用来保存和检索数据，可以作为一个小 型的数据库使用，这个可以说超出了一般语言的范畴。 x m l 文件的整体结构包括三个部分：x m l 声明、处理指示( 可选) 、x m l 元素。x m l 文档的一个基于要求是形式良好的，一个形式良好的x m l 文档要包含这三个部分。一个 完整的x m l 文件如下： 7 第一章绪论 刘吴 信息工程学院 2 5 1 5 9 9 1 3 8 9 8 7 2 其中 对此文件进行了声明，说明了属 于x m l 文件，同时告诉了编码格式。 则是处理指示，告诉了本文件的类型，从而便于告诉处理器处理 本文件适用哪个程序。接下来的则是元素。从这个例子中，可以简单体现如下内容：一 是可以存储数据，事实上这个文件就存储了有意义的数据；二是经过转换又可以被浏览 器通过不同的形式实现显示；三是内容便于阅读，也就是说就算没有了处理程序，甚至 这个文件出现了损坏，仍然丛中可以理解这个文件所要表达的内容。正因为如此x m l 作 为w e bs e r v i c e s 的交换基础，可以便于交换的规范性，便于广泛的应用。 1 3 本文的主要工作 本系统主要工作包括：s v g 地图的制作，还对信息查询，地图的放大缩小，地图的 拖动，图层控制，实物图的详细信息及其详细查询等功能做了详细设计与实现。 1 4 本文的组织结构 本文共分为五章。 第一章绪论，首先从电子导航系统在本校网站的重要作用，提出了本课题。接着分 析了国内外研究技术的开发状况，并对g i s 和w e b g i s ，矢量图以及s v g 和x m l 的相 关技术做了介绍。 第二章系统总体设计，论述了系统开发所需要的技术平台以及系统的主要功能结 构。 第三章s v g 图的生成，论述了s v g 图的制作软件及其详细过程。 第四章校园导航设计，主要论述了校园导航的信息查询、图形缩放、图形移动、图 层控制、及超链接等功能。 第五章宿舍查询设计，设计了宿舍查询的主要功能及其相关技术。 长安大学硕士学位论文 1 5 本章小结 本章首先分析了所选课题的研究内容及意义，在对文献资料收集的基础上，概括了 所用技术的发展过程及研究现状，最后给出了论文的组织编排情况。 第二章系统总体设计 第二章系统总体设计 2 1 系统开发所需的技术平台 该系统是一个b s 模式的小型电子导航系统，在该系统的设计过程中，需要用到了 以下技术： 1 j s p 技术 j s p 是j a v as e r v e rp a g e 的缩写，是由s u n 公司倡导、许多公司参与，于1 9 9 9 年推 出的一种动态网页技术标准。本系统用j s p 技术实现了基于b s 模式的浏览查询，创建 了动态的查询方式。 2 s v g 技术 s v g 是一种基于x m l 的用来描述二维矢量图形和矢量点阵混合图形的标识语 言，是一种全新的矢量图形规范。s v g 图形是可伸缩的矢量图像，图形的显示尺寸可以 无级缩放，变化后不影响图形的质量。因此，本系统使用s v g 技术实现了图形的放大、 缩小及移动。 3 x m l 技术 x m l ( e x t e n s i b l em a r k u pl a n g u a g e ，可扩展标记语言) ，是i n t e r n e t 环境中跨 平台的，依赖于内容的技术，是一种简单的数据存储语言。本系统采用x m l 存储 教室数据，结构清晰，自描述性强，可以复用，可实现跨平台的数据读取，并且文件 占用内存空间小，大大节省了计算机的资源。 4 d o m 解析x m l 文件 d o m 是提供x m l 和h t m l 文档编程接口的w 3 c 规范。x m l 文档将数据组织为 一棵树，d o m 就是对这棵树对象的描述d7 | 。d o m 解析x m l 文件后，就用树的形式定 义了x m l 文件在内存中的逻辑结构，x m l 文件中的元素便被转化为d o m 树中的节点 对象聆8 j 。本系统使用d o m 树模型建立搜索算法，对修远教学楼的教室进行搜索。 5 p h o t o s h o p p h o t o s h o p 是一款由a d o b e 公司开发设计的通用的图形处理软件，其用户界面易懂， 功能完善，性能稳定9 | 。本系统在设计的过程中需要大量的图片，使用该软件可以方便 快捷的对图片进行处理，增加了系统的美观。 2 2 系统功能结构 长安大学雁塔校区电子导航系统，是一款基于b s 模式，采用j s p 技术，d o m 模 l o 托安人学顺i 岸位论文 ! 一 ii 校区风貌i| 宿舍导航l 校园导航 i 系统帮助j 联系我们l 闰陶闻闰陶 碴童笋土肇 雁j t 幢n 电子 舭m 盹 t t n h h 圈2 , 2k 宜人学屯子导航系统 图2 2 中的长安大学校区位冠图为s v g 图，可以对其进行放大缩小，并且比j p g 等 格式的图片小很多，很容易加载到网页中。点击进入雁塔校区电子导航系统，如图2 3 所示： 撕一苛系统总仆改计 “ t u l m tt 哪! t 幽i t i t | l e ) r * e * n 型u * 口0 月2 h 雌i # 犏 “一“蒹 ：嚣盘：；”：；2 i 穗鬈“”“ a 生蛆uf 2 啾2 岬* t 目* ：。_ f * 懈m 4 帅f t ，疑：i 辍8 勰；粼i 。箍豫t 器 l i ! ：嚣器1 1 2 i a 紫5 “嚣* ￥豁 礴潮露i 滠 幽2 3k 安人学雁塔校医电子导航系统 其基本功能模块如下： 2 21 校园导航 点击图2 3 中的“校园导航”按钮，即可 | j 现雁塔校区的s v g 平面图查询系统如 图2 4 所示。 输入想要查询的信息，例如“罗马文化广场”点击查询按钮即可找到想要的信息， 且以红色显示，如图2 5 所示。 l i 8 曼j 丑三已墅基 “。0 ：。：。蟹 j 簸匿 罄 l 蚋2 4 长安人学雁塔枝r 电_ r 导航卉词系统 固嚣 o “黼 姜蚕 e b髭。m 批蛳蚪牲肫 p p p f 。一鳓 长空人学$ 学位论史 o o 曼已 询t $ 蜘日l 自* | 生i2 5 信息舟响后 然后可以对其进行放大、缩小、还原、八个方向的拖动、图层控制及其点击查看实 物圈和详细信息。 2 22 宿舍导航 宿舍查询部分有其内部具体功能，功能结构圈如图2 6 所示。 | 芏i2 6 雁塔校医学生公寓导航功能结构 点击圈2 3 中的宿舍导航即可进入宿舍导航系统，本系统以六号学生公寓为例，直 图27 所示： #*im m 瓣瓣笳 孵瑚 o 。 坼 第一市系统总体设汁 j 女却卫= p t 毕。+ 。 幽27k 安大学雁塔校犀? 、号学生公寓赉询系统 1 宿舍查询功能 用户在界面中输入所要查找的宿舍弓_ 码，单击“盘询”按钮后就可在六号学生公寓模 型图中显示出用户所查找到的宿舍，印在相应宿舍的窗户上添加颜色并且闪烁。对于查 找层和具体宿舍的用户，可以在模型图中标记出。 e 2 幽28 川户卉找到的“3 1 l ”宿舍 图2 8 为用户查找到的“3 1 l ”宿舍，可以看到图中红灯闪烁的位置即为“3 1 l ”宿 舍。 2 图形放大功能 当界面标记出用户所查询的宿舍后，可单击显示模型圈的页面中如圈2 9 所示按钮， 对模型图进行中心放火。图形随着鼠标单击次数的增加而放大，当放大到一定尺寸时， 停止放大。 # 主 _ - i - i_ i - _- - - -_ 一- - i - _ - 长安大学硕 学位论文 0 图2 9 模型图放_ 人按钮 如图21 0 所示，为图形放大前后的对比示例。 一 一 一 一 一 - 一 一 _ 一 _ - i a 放人前b 放人后 凹21 0 图形放火前后对比 3 图形缩小功能 当界面标记出用户所查询的宿舍后，可单击显示模型图的页面中如图21 1 所示按 钮，对模型图进行中心缩小。图形随着鼠标单击次数的增加而缩小，当缩小到一定尺寸 时，停止缩小。 o 圈2 i i 模型凹缩小按钮 如图2 1 2 所示为图形缩小前后的对比示例。 a 缩小前 凹2 1 2 幽形缩小前后对比 b 缩小后 i - - - 一i -一一- - - 一_- i - - -一_-i 一i - i - - - - - - - _ - _ _ _ _ - - _ - i - - _ - - -一- - - i 第一审系统总体设计 4 图形移动功能 当图形进行放大后，会超出视图的范围，此时就需要对图形进行移动以显示出。 本系统图形移动模块可以对图形进行上、下、左、右、左上、左下、右上、右下八 个方向的移动，当鼠标移动到图片边缘位置时，即可出现如图2 1 3 所示的阴影按钮，点 击图片边缘不同方向的按钮图形就会向相反的方向移动。 0 0 _-_一 -一_-一 _ 一一_ 一 一一一_ - 一- 一_ 幽21 3 鼠标移动到i 芏| 形边缘时按钮山现 如图21 4 所示，为图形移动前后的对比示例。 a 移动前b 单击右边按钮移动后 图2 1 4 留形移动前后对比 5 图形还原功能 当用户对模型图不断的进行放大、缩小、移动操作后，如果此时想看原始图像，就 k 生大学硕1 学位论文 必须对操作过的图像不断进行相反的操作这样子是比较繁琐的。因此，本系统提供了 图形还原功能，即将图像恢复到原始的大小。位置。如图21 5 所示，为图形还原按钮。 圈2 1 5 图形还原按钮 图2 1 6 是对查找至0 宿舍后的原始图形连续进行若干次操作后，点击复原按钮的前后 对比。 a 若干次操作后 b 单击复原按钮后 | 芏】21 6 点击复原按钮前_ l 亓对比 223 校园风貌 点击图23 中的“校园风貌”按钮，即可出现校园风貌的页面，如图21 7 所示，该 页面展示了长安大学雁塔校区的优美校园风光，使用户能直观地了解校园。 _ - - 一_- _ 一- - _ _ - - i _ _ 一_- - - - -i- - - - -_ - - - - i - _ - - _- - - - - _ i i -_ _ - - - i _ _ 擗一乖系统总体鞋汁 l h i * * b 日栅z m f l 蟑 # 日* r 目* “e n l 0 0 。十 # 自 日地口；删t * 十 n * 啼万册# 十十i 目$ 3 t5 i # 十女w lb i h * 女目 2 i t * 触w l5 h * 日* n 目日a 月t 口 灿十f | g * i 性# m t m 4 h 自t 目 r ”r i $ 鼬_ 3 性r r m * 盯 r 0 d r 一 日& m h 目。目 科 l ! t 目 m b i i r 十目 j ；e t 2 f f ￥9 0 # * # i f 9 0 自m 女n m * 黼m 嗣4 自r 。i 螂o a * | h p d 日m t # i * t e t t 垃自”一 m h 8 一# * t t - t 嶂n m d 女t * 6 # 女 “4 自# “ 一粘崎* i m t # “日n 女镕 # m e * m 自1 c 4 * 十 * t m 目t t f 日n a # 蝴# h * m b i t # mn m $ b * 群m i r 女t 4 铋 * m b a mi t 十 m “口o 1 幽21 7 校l 州风貌页 缫隧圈 k 安人学硕1 ：学位论文 2 24 系统帮助 点击圈2 3 中的“系统帮助”按钮，即可出现提供系统帮助的页面，如图21 8 所示。 该页面主要向用户介绍本系统的使用方法 则。 “，r 张 以及在进行查找校园信息和宿舍时输入规 系统帮助 圈2 】8 系统帮助页而 2 25 联系我们 点击图23 中的“联系我们”按钮，即可出现联系我们的页面，如图2 1 9 所示，该 页面展示了本系统的作者及其详细信息。 t 比呻， 争 “- t t t * n i tg ：羹 f ：。6 2 1 1 7 3 i * e i 糯 j n ”n 月拽术 b ”i 1 u h o l l 1 6 3c o t 指导数师：张白一教授 幽2 1 9 联系我们页面 第三章s v g 图的生成 第三章s v g 图的生成 生成s v g 图有多种方法，比如直接编写代码或者利用软件，本系统利用的是最直 观的一种途径：c o r e l 公司的c o r e l d r a w1 2 绘制并生成。 绘制s v g 图的基本步骤： ( 1 ) 启动c o r e l d r a w1 2 ，选择新建图形，加载所需绘制的原始图片或照片，以此 为模板开始绘制。 ( 2 ) 运用c o r e l d r a w1 2 左侧工具栏的多种工具可以完成图形中各种线段、圆、 椭圆、多边形、矩形、折线等。其中包括一些特殊的工具如：贝塞尔工具，钢笔工具， 3 点曲线工具等能帮助我们完成许多复杂图形。 ( 3 ) 利用上述工具逐步完成图形总体绘制，然后可以对每个部分参照原始图形着 色，( 着色的图形必须是封闭图形，否则无法着色) ，在颜色填充工具里，可直接选择调 色板的颜色，也可直接输入颜色参数来生成相应的颜色。 ( 4 ) 颜色填充完毕，删除原始图片或照片，另存。在这里我们就能将所绘制的图 形保存为s v g 格式的s v gd o c u m e n t 。 3 1s v g 的基本图形元素 s v g 的基本图形元素：线段、矩形、圆形、椭圆、折线、和多边形，使用这些基本 图形就能创建出丰富多彩的复杂图形。 ( 1 ) 线段： 元素 基本属性：两点确定一条线段，所以线段的基本属性就是它的起止点的坐标，如 图3 1 所示。 图3 1 线段效果 x l = “ ”：表示线段起点的x 轴坐标，默认值为o ； y l = “ ”：表示线段起点的y 轴坐标，默认值为o ； x 2 = “ ”：表示线段起点的x 轴坐标，默认值为o ； y 2 = “ ”：表示线段起点的y 轴坐标，默认值为0 。 2 0 长安大学硕士学位论文 ( 2 ) 矩形： 元素 基本属性： x = “ ”：表示矩形左上角顶点的x 轴坐标，默认值为o ； y = “ ”：表示矩形左上角顶点的y 轴坐标，默认值为0 ； w i d t h = ” ”：表示矩形的宽度，非负，如果为0 则不显示该矩形； h e i g h t = ” ”：表示矩形的高度，非负，如果为0 则不显示该矩形； r x = ” ”：表示圆角矩形x 轴方向的圆角半径，非负； r y = ” ”：表示圆角矩形y 轴方向的圆角半径，非负； 矩形效果如图3 2 所示。 图3 2 矩形效果 ( 3 ) 圆： 元素 基本属性：一个圆心和一条半径就能定义一个圆。 c x = “ ”：表示圆心的x 轴坐标，默认值为o ； c y = “ ”：表示圆心的y 轴坐标，默认值为o ； f ” ”：圆的半径，非负，如果为o 则不显示该园； ( 4 ) 椭圆： 元素 基本属性： c x = “ ”：表示椭圆中心的x 轴坐标，默认值为0 ； c y = “ ”：表示椭圆中心的y 轴坐标，默认值为0 ； i x = “ ”