基于WEBGIS的体育场导航系统论文

东北石油大学本科生课程设计（论文） 1 第 1 章 概述 1.1 课题背景及意义 随着人们日趋增高的生活水平，各个国家的体育事业蓬勃发展，随之体育场 的建设也就成为了一项重要的不可或缺的活动。面对大型的体育场，用图纸或者 普通地图来规划管理的时候，带给了人们很多的不便。然而计算机技术突飞猛进 的发展则很快的解决了这个问题。通过一些开发平台及软件，我们可以设计出电 子地图，即数字地图，它可以以数字方式存储和查阅地图，一般使用向量式图像 储存，地图比例可放大、缩小或旋转而不影响显示效果。 体育场导航图可以非常方便地进行图形的放大缩小移动， 也非常容易进行修 改，缩短成图时间。该系统可以清晰的分辨出各个区域的主要用途，并且可以查 到每个区域的详细情况。 除此之外我还应用 dreamweaver 做了两个页面于该导航 图相连接，丰富了系统的功能和界面。 1.2 SVG 体育场导航系统的构成 SVG 体育场导航系统是由 SVG 构成图片格式，并使用 dreamweaver 开发工 具实现其基本功能的人机交互系统。 SVG 体育场导航系统是由 SVG 图像和简单 javascript 语言构成的。 1.2.1 SVG 图像 利用 SVG 标准技术解决了基于 WebGIS 重大危险源系统的地图显示问题。 提出基于 SVG 的地图符号描述模型，重点描述点、线、面 3 种类型对象，通过 它们来显示地图中的实体对象，并应用 XML 的特点实现了数字地图空间数据的 存储方法，使空间数据与属性数据直接建立了有效联系1。 1.2.2 Javascript 语言 Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对 象的动态类型的区分大小写的客户端脚本语言， 主要目的是为了解决服务器端语 言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。 东北石油大学本科生课程设计（论文） 2 第 2 章 SVG 体育场导航系统开发关键技术 2.1 开发平台 Dreamweaver Dreamweaver 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于 一身的所见即所得网页编辑器， 它是第一套针对专业网页设计师特别发展的视觉 化网页开发工具， 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制 的充满动感的网页。 因此，Dreamweaver 备受专业设计的推崇，在众多专业网 站和个人主页中都把它列为首选的工具。我的后期制作也是依靠 Dreamweaver 完成的。 2.2 SVG 在 WebGIS 中的应用 SVG(Scable Vector Graphics，可升级矢量图像)是一种基于 XML 的开放的矢 量图形描述语言。 SVG 图像是与 XML1.0 兼容的文档，SVG 元素是指示如何绘制图像的一些 指令，阅读器(Viewer)解释这些指令，把 SVG 图像在指定设备上显示出来。 使用 SVG 可以在网页上显示出各种各样的高质量的矢量图形，支持很多您 想象得出的功能：几何图形、动画、渐变色、滤镜效果等。最关键的是，它是完 全用普通文本来描述的！也就是说，这是一种专门为网络而设计的基于文本的图 像格式。首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点 和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接 打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像 文件都很大，会占用大量的网络带宽。SVG 是一种矢量图形格式，GIF、JPEG 是位图图像格式。有了两者的概念后，SVG 较 GIF、JPEG 的优势显而易见2。 2.2.1 SVG 规范 SVG 是一种基于 XML 的用来描述二维矢量图形和矢量/点阵混合图形的标 识语言，其全称是可扩展矢量图形规范(Scalable Vector Graphics)，W3C 对 SVG 的解释是“SVG 是一使用 XML 来描述二维图像的语言。它允许三种形式的图像 对象存在：矢量图形、点阵图像和文本。各种图像对象能够组合、变换、并且修 改其样式，也能够定义成预处理对象。文本是 XML 名字空间中的有效字符，这 些字符能被作为 SVG 图像的关键字存留在搜索引擎中。SVG 的功能包括嵌套变 东北石油大学本科生课程设计（论文） 3 换、路径剪裁、透明度处理、滤镜效果以及其他扩展，同时，SVG 图像支持动 画和交互， 也支持完整的 XML 的 DOM 接口。 任何一种 SVG 图像元素都能用脚 本来处理类似于鼠标单击、双击以及键盘输入等事件。并且因为同 Web 标准兼 容的缘故，SVG 还能够在同一个 Web 页面里凭着继承自 XML 的名字空间等特 性来完成一系列交互操作。 ” 2.2.2 WebGIS 的关键技术 WebGIS 是 Internet 与 GIS 的结合产物，也是 GIS 研究的一个重要方向。然 而，在 Web 上发布信息量巨大的地理空间信息（主要是以图形图像的方式）必 将导致 Internet 网络传输速度降低，而短小灵活的矢量图形是缓解这个困境的有 效手段。SVG 就是一种基于 XML 的矢量图形格式，由于它能良好的将矢量图形 展现在 Web 上，因而 SVG 可以成为 GIS 很好的网络载体3。并且可以利用 dreamweaver 平台对系统进行更多的美化添加其他功能等，再使用脚本语言 JavaScript 和 DOM 技术实现图形的客户端动态交互，最终使系统取得良好的效 果。目前 WebGIS 具备以下这样一些基本特点： （1）建立首次远程访问的传输协议采用 HTTP，建立联系以后也可用其它协 议传输信息。 （2）远程地理信息的首次访问或服务启动，需要利用 WWW 服务器上的 HTML 文档。 （3）用户端一般使用能解释 HTML 的通用浏览器。 （4）远程服务器端提供地理信息服务时，把 WWW 服务器作为信息进出的重 要关口。 （5）WWW 使用的通用标记语言在浏览器与服务器之间的 GIS 信息通讯中占 有重要地位，即使使用其它数据格式或者将来 HTML 被其它标记语言所取代，大 概这一点不会改变。 东北石油大学本科生课程设计（论文） 4 第 3 章 基于 SVG 技术的体育场导航系统的设计 3.1 SVG 体育场导航系统的功能需求分析 需求分析是软件生存周期的一个重要阶段。 它最根本的任务是确定待开发软 件的功能、性能、数据、界面的要求，从而确定系统的逻辑模型。 目前运动事业发展十分迅速，利用一些地图了解体育场的概况快捷简单。然 而地图由于受计算机屏幕尺寸和屏幕分辨率的限制，整幅地图显示的效果受影 响， 以分块分层显示为主。 而传统纸质地图以图幅为单位整页出版印刷， 幅面大， 读图的整体印象深刻，相互之间的关系清晰。本系统是一个关于介绍体育场内部 概况的导航地图系统，既能体现出普通导航地图随意缩放、方便漫游、信息查询 等功能，并且由于应该确定系统的物理配置方案，并且由于本系统的地图模板区 域性较强，同时采用地图分层控制技术，可以让用户对地图的细节、位置要素等 方面信息能够方便的观察到，使得该系统给用户的感官体会更加深刻和直观。 3.2 SVG 体育场导航系统的设计 系统主要是完成基于SVG技术的体育场导航图， 同时利用javascript语言的基 础知识与技术实现体育场导航图的相关辅助功能， 例如放大、 缩小、 查询等。 SVG 的设计主要利用SVGDeveloper开发工具，实现一个简单的体育场导航图文档。 设计完成的体育场导航图由各种矢量图形构成，可以任意放大图形显示，但绝不 会以牺牲图像质量为代价。在体育场导航图制作完成之后，又利用dreamweaver 作为开发工具， javascript作为开发语言开发出一个简单易行的小程序来实现体育 场导航图的放大、缩小等功能。体育场导航图可以非常方便地对普通地图的内容 进行任意形式的要素组合、拼接，形成新的地图4。 3.2.1 系统的总体需求框架 基于 SVG 技术的体育场导航系统设计与实现主要实现 SVG 的各项事务， 首 先要编辑体育场地图，实现一些基于 SVG 的矢量图形，并将其组合构成地图， 使之可以比例可放大、缩小或旋转而不影响显示效果。同时在体育场地图上，是 通过一串 X、Y 坐标表示位置，体育场导航图上的分块区域可以有很多，比如比 赛场地、各个区域情况等等信息都可以表达出来，能够比较全面地描述体育场的 情况，这些是普通地图简单的符号不可能表示出来的。在 SVG 文档基本完成之 东北石油大学本科生课程设计（论文） 5 后使用 dreamweaver 对其进行功能完善是其可以满足现代网络应用的要求。 在设计开始前要考虑系统的整体设计思路， 各种功能的实现所需要的具体工 具、格式，包括设置细节的颜色、像素，尽量的满足绘图的基本要求，完成主要 的绘图功能，以达到最佳的设计效果。 3.2.2 系统的功能设计 明确了系统的总体要求、理顺设计思路以及系统要实现的主要的功能之后， 如果想要使用户及有关的系统开发人员能够更加形象的了解这个系统的功能及 其简单处理过程，必须设计一个良好的能够用来描述系统的逻辑结构，使用户或 者其它非专业人员也能形象的了解系统要完成的主要功能。 通过之前的的学习，对于这款软件的设计也有了自己的理解，结合指导教师 的基本要求， 设计并实现系统要求的基本功能： 首先根据画出体育场的大体图形， 然后标明各个区域的名称，利用 javascript 语言编写代码，实现系统的一些功能， 比如图像的放大与缩小，左右移动、抓手漫游、图像复位、以及各个区域信息的 查询。 进入设计阶段后应该把设想的新系统的逻辑模型转变成物理模型， 因此需要 描绘未来的物理系统的概貌。系统流程图是描绘物理系统的传统工具，它表达的 是信息在系统各部分之间的流动情况，属于物理数据流图5。特点就是很清楚明 了的了解系统的工作方式与具体步骤，图 3-1 给出的是本系统的功能模块图。可 以通过简明的功能模块图掌握本系统的主要功能设置。 SVG 体育场导航图 图 层 控 制 信 息 查 询 辅助功能地图漫游 地 图 放 大 地 图 缩 小 地 图 移 动 地 图 复 位 图 3-1SVG 体育场导航系统的功能模块图 东北石油大学本科生课程设计（论文） 6 显然，通过上面的功能模块图，对于一个极其复杂的绘图软件，其主要的功 能都显示与上图中，只不过通过简单基本的操作可以绘制出实际工作需求的图 形。但是这个系统的功能并不仅只这些，在此基础上还能够完成复杂的、专业的 操作。 第 4 章会系统地阐述这个功能的实现方法，第 5 章会完整地显示体育场导 航图的实际效果，能够更加直观地了解软件的功能。 3.3 SVG 体育场导航系统的图元设计 图元即图形元素，可以编辑的最小图形单位。图元是图形软件用于操作和组 织画面的最基本的素材。图元是一组最简单的、最通用的几何图形或字符。图元 是为了区分不同数据信息而对某一类数据所取的名字。 图元所对应的就是绘图界 面上看得见的实体。 在地图中，基本图形包括点（point） 、圆（circle） 、弧（arc） 、线（line） 、折 线（polyline） ，曲线（curve）等。本系统的 SVG 地图设计中图元由各种各样的 简单图形构成，这些图元代表着不同的场地、座位区域和出入口。下面以一个简 单的足球场为例来演示系统中的图元。 该例子的主要代码如下： 具体的效果图如下图所示： 图 3-2 图元示例 东北石油大学本科生课程设计（论文） 7 第 4 章 基于 SVG 技术的体育场导航系统的实现 4.1 详细设计阶段的目标 详细设计阶段的根本目标是确定应该怎样具体地实现所要求的系统， 也就是 说，经过这个阶段的设计工作，应该得出对目标系统的精确描述，这样才可以把 这个描述直接翻译成用某种程序设计语言书写的程序。因此，详细设计的结果基 本上决定了最终的程序代码的质量。 详细设计的目标不仅仅是逻辑上正确地实现 每个模块的功能， 更重要的是设计出的处理过程应该尽可能简明易懂， 易于理解、 测试、修改和维护，这一点是详细设计的最重要的目标与任务。 4.2 系统功能的详细设计与实现 根据上一章所述本系统的实现主要包括两部分的内容：SVG 图像的制作及 程序设计过程。SVG 是基于可扩展标记语言的，要想使用 SVG 就得安装插件工 具，本系统使用的是 Adobe SVG Viewer，并且使用 SVGDeveloper 进行图像文 件的开发工作。通过使用 SVGDeveloper 图像文件已经基本实现体育场导航图 的一般要求，如缩放移动等功能，在后期制作中使用 dreamweaver 对其进行功能 完善。 但是对于本系统的设计由于时间仓促还不是很完善，可以在今后的时间里 不断地完善。接下来会对设计的主要功能模块做具体的介绍。 4.2.1 SVG 基本图形实现 SVG 使用一组的元素标签，每一个 SVG 文件都包含最外层的 标签。和其它矢量化图形工具一样，SVG 也有一些预定义的基本形状可供我们 使用，SVG 定义了 6 种基本形状：矩形、圆、椭圆、直线 、折线、多边形、路径。例如： 上面的语句定义了一个矩形，以标记开始，定义了矩形的各个属性， x 属性定义了矩形距 SVG 用户坐标系 y 轴的距离，y 属性定义了矩形距 SVG 用 户坐标系 x 轴的距离，width 和 height 属性分别定义了矩形的宽度和高度。 由代码及图像可以发现使用文本编辑 SVG 图像是非常复杂的，并且出现错 误后难以发现所以我使用 SVGDeveloper 进行图像开发，该开发工具可以绘制各 东北石油大学本科生课程设计（论文） 8 种高质量的 SVG 矢量图形，提供包括矩形、椭圆、圆、直线、折线、多边形等 在内的基本形状构造，并支持任意形状的路径构造，方便在制作地图是进行道路 河流的描述。 以下具体介绍使用 SVGDevelop 进行图像设计的过程： 一网络矢量绘图中文字的显示 文字是网络图像中的主角， 不管是广告还是按钮往往都有文字作为其效果的 修饰和内容的说明，但一般图像中的文字是以点阵图的形式存在的。SVG 则可 以嵌入有图像效果的纯文本。它有许多优点：可以按照不同国家的书写习惯方便 地实现从上到下，从右到左的编排，文本内容可选择、复制、粘贴，结合 SVG 的交互性还可以实现对文字内容、样式的动态修改，同时文字的内容可作为图像 的主题被搜索引擎收录。这些特点都是其他图片格式所不具备的。如下图所示在 SVG 中的文字显示： 图 4-1SVG 中的文字显示 二利用圆、椭圆绘制出体育场的大致形状，填充所想要的 颜色， 将两个不同大小的椭圆叠加形成外围的体育场路线，再绘制一个相对小点 的椭圆成为体育场座位、各个区域、房间使用的场所。再绘制一个绿色的椭圆当 做比赛场地，在其上绘制比赛轨道和足球场等。具体代码如下： 三利用直线、折线和多边形绘制出各个区域。 并填充所对应区域的颜色， 加上一些线条使图片更加鲜明形象。 举例如： 贵宾区， 其代码如下： 具体效果图如下所示： 图 4-2多边形 4.2.2 SVG 中的几个重要元素 在这一模块中，包含如下内容： 坐标系统和坐标转换。SVG 中的坐标系统也是由横坐标轴、纵坐标轴和原 点组成，跟常见的测量坐标系不同的是，SVG 的坐标系统的原点在左上角而不 是在右下角，SVG 的坐标系统也被称为工作区坐标系统或者矩阵坐标系统。 SVG 文档中所有的坐标值和长度值都可以加上单位，缺省为用户坐标系的 度量单位。在图像没有缩放时，这个单位与初始视口坐标系的单位是一样的，都 是一个具体像素。 在经过属性 viewbox 和 transform 属性变换后的图像，其坐标系也经过了变 换，长度的单位一般与具体绘制的结果不同。比如一个在缺省坐标系下长度是 20 个像素的线段，如果经过了 scale 的坐标拉伸变换，那么绘制后的长度将达到 40 个像素，但 SVG 描述的文档中此线段仍然是 20 个像素长。所以坐标的伸缩 变换会影响到当前坐标系的长度单位，这在使用时是需要注意的。 通过 Transform 属性，我们可以对图形进行位置和形状的变换，其本质是一 东北石油大学本科生课程设计（论文） 10 种几何上的坐标变换。主要包括平移变换、旋转变换、伸缩变换、歪斜变换和矩 阵变换。以下是该系统中坐标变换主要代码： /坐标变换 A 开始 /坐标变换 A 结束 SVG 作为适用于网络的图形格式，它不但有体积小、可缩放、易修改等优 点，还有强大的交互功能。SVG 图像可以使用内嵌脚本和外部脚本实现动态交 互。 为了了解到体育场的更多信息，我编写了一些 javascript 语言来实现一些其 他的功能。 比如说： 用鼠标点击足球场的区域， 会弹出文本框告知用户是足球场， 如下图所示： 图 4-3点击弹出文本框 当把鼠标移动到各个不同颜色的区域时，会在左下角显示该区域的区域名 称、建筑容量、当前人数、管理人员及其电话。这个功能实现如下图： 图 4-4媒体区详细情况 东北石油大学本科生课程设计（论文） 11 当点击右下角两个图形时，鼠标变成了手的形状，点击便可以链接到我做的 的另两个页面。 链接主要代码如下： 通常，SVG 文档会嵌入到网页中，网页中的 Script 语句相对于 SVG 文档来 说就是外部脚本。SVG 可以采用 4 种形式进行绘图操作，即使用单一颜色、渐 变颜色、 图像模板和自定义绘图模式。 根据这些知识和实际地图的图像我将 SVG 的体育场导航图像基本完成如下图所示： 图 4-5SVG 体育场效果图 东北石油大学本科生课程设计（论文） 12 第 5 章 软件测试 5.1 软件测试现状 软件开发中出现错误或缺陷的机会越来越多， 市场对软件质量重要性的认识 逐渐增强。所以，软件测试在软件项目实施过程中的重要性日益突出。但是，现 实情况是，与软件编程比较，软件测试的地位和作用，还没有真正受到重视，对 于很多人（甚至是软件项目组的技术人员）还存在对软件测试的认识误区，这进 一步影响了软件测试活动开展和真正提高软件测试质量。 5.2 软件测试的目的与原则 软件测试就是利用测试工具按照测试方案和流程对产品进行功能和性能测 试，甚至根据需要编写不同的测试工具，设计和维护测试系统，对测试方案可能 出现的问题进行分析和评估。执行测试用例后，需要跟踪故障，以确保开发的产 品适合需求。软件测试是保证软件质量的关键步骤，其根本目标是开发高质量的 完全符合用户需要的软件，不断地更新丰富软件的功能6。 根据这样的测试目的，软件测试的原则应该是： （1）软件开发人员即程序员应当避免测试自己的程序。 （2）应尽早地和不断地进行软件测试。 （3）对测试用例要有正确的态度。 （4）在设计测试用例时，应当包括合理的输入条件和不合理的输入条件。 （5）充分注意测试中的群集现象。 （6）严格执行测试计划，排除测试的随意性。 （7）应当对每一个测试结果做全面检查。 （8）妥善保存测试计划，测试用例，出错统计和最终分析报告，为维护提 供方便。 5.3 软件测试步骤及结果 软件测试及结果显示，是对设计的软件系统的检验与应用。这是设计的最终 操作步骤，也是对于软件价值的衡量的关键步骤。测试一定要经过严密的步骤， 才能为系统提供准确的测试结果，有效地做出精确的结果分析。 下面对我做的系统进行一下系统测试，主要测试以下几个功能： 东北石油大学本科生课程设计（论文） 13 第一，地图界面操作功能测试。通过点击体育场导航图主界面的不同按钮可 以方便的实现地图的放大、缩小、漫游和地图移动等功能，使用户可以直观的观 察地图的基本情况， SVG 体育场导航图缩放效果图如下： 图 5-1SVG 体育场导航图缩放效果 上图就是 SVG 体育场导航图的放大效果图，也可以点击缩小按钮对其进行 缩小措施，同时也可点击漫游和复位按钮进行地图漫游和图像复位操作。 第二，图层控制功能测试。侧边框中的图层选择功能按钮可以控制体育场导 航图所显示的图层内容，可以方便用户查看所需信息，将不需要的内容关闭。 具体效果图如下： 图 5-2 图层控制 经过简单测试本系统基本功能都可以完成， 但是在程序的测试过程中我发现 东北石油大学本科生课程设计（论文） 14 了很多问题，比如说绘制图形的时候，要先构思好先画哪个区域，然后什么时候 画线条，顺序出现错误就会导致有些线条会被覆盖，但是经过了不断的休整完善 代码，也经过了反复的测试，最终终于改正了错误的地方，实现了预期的效果。 通过这次系统设计表明有些事情往往和想象的有所差距， 因此凡事需要想但 更需要去做，也就是理论要联系实践，并且明白了无论是早期潜伏下来的错误， 还是为了纠正错误而引入的新的错误， 若不及时排除， 轻者会降低程序的可靠性， 重者则可导致整个程序的失败。 所以系统的调试是这次系统设计中不可或缺的关 键步骤。并且，软件测试是一个比较繁杂的事务，要保持一个良好的态度来进行 测试，才能达到更好的效果。 东北石油大学本科生课程设计（论文） 15 结论 随着科学技术的不断提高,计算机科学日渐成熟,其强大的功能已为人们深 刻认识,它已进入人类社会的各个领域并发挥着越来越重要的作用。我这次的设 计主要围绕体育场地图，编写相应的代码，以实现地图的缩放、移动、复位等一 些区域相关信息的查询。 在这次系统设计的这段时间我学到了很多之前没有接触 过的东西，不仅理论知识有所掌握，实践能力也有很大提高。通过对基于 SVG 技术的体育场导航图系统设计与实现这一课题的研究， 我对软件开发的流程有了 一定程度的了解，特别是使用 javascript 语言以及 dreamweaver 进行软件开发， 使我认识到需要学习的东西还很多，未来的路程任重而道远。 虽然已经实现了预期的主要功能，但是由于时间仓促，系统还不是很完善， 存在着很多的问题，对于软件的丰富扩展需要更加的努力，使系统更加适应用户 的需求，满足用户的实践需求。其实，任何一个系统都有不足的地方和可以改进 和扩展的地方，而一个好的系统则需要的是不断地改进不断地完善。 在大学时代的我们，从现在起就应该积累一定的工作经验,虽然不能作为一 个纯粹的计算机工作人员，但是应该把自己的计算机知识面拓宽，不拓宽是根本 不行的，如果只停留在这个阶段那我们的思维会很僵化，别人谈论什么我们都不 知道， 在与别人的交流就很难有很大的进步，并且搞计算机在大学阶段我们不应 该单干， 大学阶段老师教我们的那些计算机知识都是很少的而且根本不能满足企 业的需要，所以同学之间应该广泛的交流，经验这些东西在以后的软件开发中和 数据库的学习中都有很大的帮助。 以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难 以在实际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻 苦钻研及学习，不断开拓视