毕业论文--基于OpenLayers的校园地图开发.doc

湖南大学毕业设计(论文) HUNAN UNIVERSIT 毕业设计(论文)设计论文题目： 基于OpenLayers的 校园地图开发 学生姓名：学生学号：专业班级：电子信息工程1102班学院名称：电气与信息工程学院指导老师：学院院长：2015 年5 月 24 日 摘 要现在是一个数字化信息大爆炸的时代。在分布式网络技术以及嵌入式移动网络技术等网络技术的快速发展的刺激下，在“数字地球”、“智慧地球”等概念的推动下，网络GIS共享与应用全面铺开，如桌面端、Web端、移动端等应用，呈现百花齐放之态。以互联网为平台的地理信息系统（WebGIS），已经完全融入到每个人的日常生活工作中，在各个行业得到了广泛应用。借助当前的Web开发技术，WebGIS在客户端展现得十分生动，在视觉、交互性等方面给使用者带来更多惊喜。本文对国内外WebGIS技术进行了充分了解，研究了Web服务器tomcat以及地图服务器geoserver的搭建和使用，分析了OpenLayers项目的框架结构和实现机制，根据功能需求的分析，提出Web校园地图服务系统的设计方案，完成了Web地图发布，并实现了前端的地图缩放，定位，图形绘制，距离面积测量，导航功能。关键词：WebGIS，OpenLayers，geoserver，javascript，校园地图 The exploitation of campus map based on OpenLayersAbstract Now is a day of digital information explosion. Under the stimulus of the rapid development of network technology such as distributed network technology and embedded mobile network technology. And under the stimulus of the digital earth and smarter planet concept, carried out network GIS sharing and application, such as the desktop, Web side, mobile terminal applications. With the Internet as a platform of geographic information system (WebGIS), has been completely into everyones daily life, are widely used in various industries. With the help of the current Web development technology, the WebGIS in the client a very vivid display,bring more surprise to users in the visual and interactive . In this paper, I have a fully understand about the WebGIS technology at home and abroad, and study the tomcat Web server and geoserver map server set up and use, and analyses the framework structure and implementation mechanism of the OpenLayers project. According to the analysis of the functional requirements, a design of campus Web map service system is proposed and completed the Web map publishing, and implements the front-end of the map scale, positioning, graphics rendering, distance area measurement, navigation.Key words: WebGIS, OpenLayer, geoserver, javascript, campus map 目 录1 绪论61.1 WEBGIS概述61.2 EBGIS发展现状61.3 主要研究内容72 OpenLayers介绍82.1 OpenLayers简介82.2 OpenLayers框架82.3 OpenLayers原理112.3.1 数据组织112.3.2 数据解析122.3.3 数据渲染123 Web服务器及地图服务器的搭建143.1 tomcat 服务器143.2 geoserver 服务器143.4 geoserver 提供功能153.4.1 地图发布153.4.2 地图缩放功能153.4.3 地图比例及经纬坐标显示164 基础功能模块174.1 定位模块174.2 图层控制模块184.3 标注模块194.4 绘制模块204.5 测量模块235 导航模块245.1 初始设定245.2 邻接矩阵生成模块265.3 起终点转换模块255.4 最短路径算法模块265.5 绘制最短路径模块266 结论28致谢29参考文献30附录A地图发布代码31附录B添加导航条33附录C地图比例及坐标显示34附录D定位模块35附录E标注模块36附录F绘制模块38附录G测量模块40附录H图层控制模块44 1 绪论1.1WEBGIS概述地理信息系统（Geographic Information System），又称地学信息系统，简称GIS。是一种特定的常用的空间信息系统。该系统是在计算机硬件、软件系统支持下，对整个或一部分地球表层（包含大气层）空间中的有关地理分布的数据进行采集、存储、管理、分析、运算、显示以及描述的技术系统。WEBGIS(网络地理信息系统)是指以Internet为平台，在客户端应用软件采用网络协议的地理信息系统。包括WEB-GIS浏览器、WEB-GIS服务器、WEB-GIS编辑器以及WEB-GIS信息代理。1.2WEBGIS发展现状随着信息技术的不断发展，WEBGIS的发展也是日新月异。1. 更加大众化。在Internet发展的推动下，Web服务已经成为人们日常生活的必需品，WebGIS让人们有了更便捷的使用GIS的机会。WebGIS可以通过通用浏览器进行浏览、查询，也可以使用浏览器上的插件(plug-in)、ActiveX控件和Java Applet来进行WebGIS功能的实现。2. 良好的可扩展性。WebGIS能够跟Web中的其他信息服务实行无缝集成，可以建立起灵活多变的GIS应用。3. 跨平台特性。基于Java的WebGIS可以实现一次编程，到处运行 (write once, run anywhere) ，从中我们可以看到其跨平台的优点。然而，WEBGIS也存在局限性。1. 交互性有限。WebGIS与传统的桌面GIS相比，实现的功能大大缩水。用户体验地图的过程中会使用的功能会受到局限，虽然基本操作能够达成，但是一些较为特定功能难以实现。2. 响应速度受带宽的影响。 与桌面或本地GIS相比较，WEBGIS的响应速度会受到网络带宽的影响，当网速较慢时，可能会由于网络的延迟而给用户带来超长的等待。3. 超时限制。 对于许多WebGIS应用往往有超时设置，这是出于性能和安全的需要。然而当用户两次请求超过一定的时间间隔时，将有可能不能得到所需要的结果。1.3主要研究内容现在利用WEB地图服务查询自己想要的信息已经成为了人们生活的重要组成部分。而在本设计中偏重于对校园地图的开发：在网上呈现校园地图，并提供部分功能供用户使用。在此次毕业设计的过程中，主要研究了Web服务器tomcat以及地图服务器geoserver的搭建细节和使用方法，利用Web服务器和地图服务器发布地图及其他数据信息。另一方面，学习了JS语言和HTML语言的编写。此后，熟悉了OpenLayers项目的框架结构和实现机制，为后续的程序编写、功能实现打下基础。在前期工作完成后，根据功能需求的分析，提出Web校园地图服务系统的设计方案，完成了Web地图发布，并实现了如下功能：1.地图缩放；比例尺、经纬坐标显示。2.定位、图层控制、添加标记、绘制图形、测量功能以及导航功能。在熟悉各语言之后，利用OpenLayers中的各种类来实现。在总体功能完成之后，对此次设计以来遇到的一些问题进行了总结，详细分析了问题造成的原因，对解决问题的过程和方法做了更进一步的思考。在总结之后与老师讨论了设计中仍然存在的缺点和不足，提出了可行的改进方法。另外，考虑了更多的能够实现的功能，为下一次的设计做好准备。 2 OpenLayers介绍2.1OpenLayers简介Openlayers是一个用于开发WebGIS客户端的JavaScript包，最初由MetaCarta公司开发，通过BSD License发行。OpenLayers是一个开源的项目，其设计目的是为互联网客户端提供强大的地图展示功能，包括地图数据显示和相关操作，并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的一些组件。而应用于Web浏览器中的DOM(文档对象模型)也由JavaScript实现，因此，基于OpenLayers开发的WebGIS不依赖于Web浏览器，具有跨浏览器的特性。同时，OpenLayers实现了类似于AJAX功能的无刷新功能，可以结合很多优秀的JavaScript功能插件，能够带给用户更多丰富的交互体验。在地图数据以服务的方式提供的前提下，OpenLayers访问地理空间数据的方法符合行业标准，支持各种公开的和私有的数据标准和资源。OpenLayers支持Open GIS协会制定的WMS、WFS等网络服务规范，可以借用远程服务的方式，用以OGC的服务形式发布的地图数据载入至OpenLayers客户端中进行显示。目前，OpenLayers所支持的数据格式有：XML、JSON、GML、GeoRSS、KML、WFS、WKT(Well-Known Text)等。在OpenLayers.Format名称空间下的各个类里，实现了具体读/写这些Format的解析器。因此，基于OpenLayers能够利用的地图资源非常丰富，提供给用户最多的选择，比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind，以及简单的图片等。在采用JavaScript纯客户端开发的WebGIS项目中，OpenLayers作为第三方脚本库引用，在HTML文档中调用其提供的类以及类的属性和方法，从而实现互联网地图发布与操作。2.2OpenLayers框架OpenLayers实现的一切功能都是由其所包含的类实现的，下面介绍一下主要的类。BaseTypes：定制了OpenLayers中用到的string、number和function （扩展JS的内置类）。OpenLayers.String.startsWith，用于测试一个字串是否以另一个字串开头。OpenLayers Number.limitSigDigs ，用于限制整数的有效位；OpenLayers.Function.bind，用于把某一函数绑定于对象等。Control：即通常所说的控件类，提供各种各样的控件，比如地图图层开关控件（LayerSwicher ）、地图导航控件（PanZoomBar）等，通过Icon表现。Feature：本质上Feature是geograghy和attributes的集合，但在OpenLayers中，OpenLayers.Feature特别设计为由一个Marker和一个lonlat类构成。Filter：一个OGC Filter的表现。Format：此类用于读/写各种格式的数据，创建了各种格式的子类即解析器。包含的类有：XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT（Well-KnownText）等。Geometry：地理空间对象的几何实体。其子类有：Collection、Curve、LinearRing、LineString、MultiLineString、MultiPoint、 MultiPolygon、Point、Polygon、Rectangle、Surface。正是由于这些类的实例，构成了我们看到的矢量地图。Handler：这个类的作用在于用于处理序列事件。Handler可被激活或者取消。当一个Handler被控件激活时，浏览器监听器Listener会注册处理事件的方法，以响应对应的事件；当一个Handler被取消时，在事件监听器中也会对应的取消注册这些方法。Lang：多国语言设定，可以由getCode、setCode来设定正确的语言。Layer：图层类。这个类包含多种调用数据的子类，如Bing.js、Google.js、VirtualEarth.js、Yahoo.js、KaMap.js、MapServer.js、WFS.js、 WMS.js、WMTS.js、Text.js、Image.js等。正是这个层的数据构成了地图的主体。Marker：标记类。简单说，Marker就是Icon和一个经纬度的组合。Icon现已放到OpenLayers下面。Popup：地图上一个小巧的层，可实现在地图上的开关，一般与Marker结合应用。Protocol：向量图层Protocol类。Renderer：渲染类。在OpenLayers中，渲染功能是作为动态矢量图层的一个属性存在的，成为渲染器。矢量图层就是通过这个渲染器提供的方法将矢量数据显示出来。Request：OpenLayers.Request namespace提供很方便的方法来使用XMLHttpRequests，这些方法用于跨浏览器。Strategy：向量图层类。Tile：将Image封装到该类中。指定了单一的Tile，它相对较小，包含本身的信息，如Image的Url、尺寸等。Console：此类用于调试和把错误等输出到控制台上，需要结合使用firebug.js。Events：用于实现OpenLayers的事件机制。 OpenLayers中的事件分为两种，一种是浏览器事件，如mouseup、mousedown等，另一种是自定义的，如addLayer等。Map：网页中的动态地图，也可以说是地图容器，可向里面添加图层（Layer）和控件（Control）等。实际上，只有Map是没有意义的，关键是有了添加给它的Layer和Control，使得Map成了真正意义上的动态地图。Icon：在计算机上以图标的形式呈现，主要有url（图片地址）、size（尺寸）和offset（位置）三个属性。一般情况，它与OpenLayers.Marker结合应用，表现为一个Marker。Util：类似于一个万能类辅助实现创建其他类，包含了OpenLayers中最基本的方法，如OpenLayers.Util.getElement等方法。由OpenLayers的体系架构示意图(图2.2.1)可见，把整个地图看作一个容器，地图图层（Layer）是这个地图容器的核心，容器中还有一些特别的层和控件，除此之外还有绑定在Map和Layer上的一系列待请求的事件。底层是OpenLayer的数据源，即Image、GML、WMS等，都是OpenLayers.Layer的子类。这些数据经过OpenLayer.Renderer渲染，显示在地图容器中的图层Layer上。 2.3 OpenLayers原理OpenLayers是实现WebGIS客户端的开发库，提供一整套JavaScript的API，有良好的框架结构和实现机制。GIS的核心是地理数据，关键是如果将数据应用到各个行业或人们的日常生活中，充分挖掘数据的价值。2.3.1数据组织从表现形态上看，地理空间数据的矢量数据由点、线、面三类要素构成。将这些要素对应到Web客户端表现，需要抽象为相应的类，包括他们之间的关系。在OpenLayers中，空间矢量数据的实现主要存在OpenLayers。Geometry类及其子类中。由图（图2.3.1）所示，OpenLayers对于Geometry对象的组织为：最基础的是点（Point），MultiPoint由点构成，继承自OpenLayers.Geomerty.Collection，而LinearRing、LineString均由Point构成。Polygon由OpenLayers.Geomerty.LinearRing构成。OpenLayers在解析数据的时候，将所有的面、线包含的点全部都实例化（即对象化）为点（OpenLayers.Geometry.Point），并将所有点对象读取到内存，得到一个Feature的集合，然后将这个集合提交给Openlayers渲染器进行渲染。2.3.2数据解析由OpenLayers API可知，它提供了一个Format类，用于读/写各种格式的数据，创建了多种格式的子类，即解析器。以GML数据解析为例，其实现原理为：先通过调用得到GML文本数据，然后通过Format.GML类的read方法来解析这个文本数据，即解析到Geometry对象，最后将Geometry对象用相应的渲染器画下来。不管是什么格式的数据，最后解析得到基本的Point、LineString之类的Geometry对象，最后进行客户端渲染，也就是我们在地图上看到的那些内容。2.3.3数据渲染基于OpenLayers的网页地图的整个表现过程是：先通过服务RUL调用获取地图数据，然后用相应格式的解析器来解析数据，再用渲染器渲染后添加到图层上，最后结合控件表现出来，形成一幅我们看到的“动态”地图。在OpenLayers中，渲染功能是作为矢量图层的一个属性存在的，称为渲染器，即Renderer类。矢量图层都是通过这个渲染器提供的方法将矢量数据显示出来的。该渲染器的继承关系如下：在此，主要讨论OpenLayer.Renderer类及其之类，了解OpenLayers的渲染机制。Renderer类提供了一些虚方法供其子类继承，如setExtent、drawFeature、drawGeometry、eraseFeature、eraseGeometry等。Elements继承Renderer，具体实现渲染的类又继承Renderer。这样的设计，是因为不同的矢量格式数据需要共享相应的函数，在Elements这个类中进行封装。Elements类的核心是drawGeometry和drawGeometryNode两个函数。其中，drawGeometry调用了drawGeometryNode，创建出基本的地理对象。具体实现渲染的方法在OpenLayers.Renderer.SVG和Openlayers.Renderer.VML两个类中实现，即实现Elements提供的虚方法，如drawPoint、drawCircl、drawLineStrin、drawLinearRin、drawLine、drawPolygon、drawSurface等。上述介绍主要针对矢量数据。如果空间数据为栅格数据，则采用另外一种机制实现数据组织和显示。栅格数据，包括图片等资源，在Web客户端仅仅是图片，不包含其他的几何信息属性信息，均通过HTML中的img标签显示。栅格数据通常采用一种优化的裁剪方式，将其裁剪为多级的图片集，在客户端通过图片的行列号，以网格方式组织每级的地图图片。在OpenLayers的Layer类中，提供了Layer.Grid类等，实现了各种栅格数据的显示。23 Web服务器及地图服务器的搭建3.1tomcat服务器tomcat 服务器是一个对广大群众免费开放源代码的Web 应用服务器，属于较轻量级服务器，普遍使用于中小型系统和并发访问用户偏少的场合，是开发和调试JSP 程序的首选。实际上Tomcat 部分是Apache 服务器的扩展，当运行tomcat 时，它是以作为一个独立进程的方法而单独运行的。当配置正确时，Apache 服务于HTML页面，而Tomcat 实际上是运行JSP 页面和Servlet。另外，Tomcat与IIS等网页服务器相同，具有处理HTML页面的功能。同时它还是一个Servlet和JSP容器，不过其默认模式是独立的Servlet容器。Tomcat处理静态HTML的能力比Apache服务器弱。3.2geoserver服务器GeoServer 是 OpenGIS Web 服务器规范的 J2EE 实现，通过利用 GeoServer 可以方便的在网页上发布地图数据。GeoServer允许用户对特征数据进行前端的更新、删除、插入操作。通过 GeoServer 可以在用户之间以Web方式迅速共享空间地理信息。Geoserver兼容 WMS 和 WFS 特性；支持 PostgreSQL、 Shapefile 、 ArcSDE 、 Oracle 、VPF、 MySQL 、 MapInfo ；也支持上百种投影；同时也能够将网络地图输出为 jpeg 、 gif 、 png 、 SVG 、 KML 等格式，除此之外还包括许多其他的优良特性。3.3平台搭建及数据发布Tomcat是对Jsp的页面提供服务的，因此需要在java环境下运行，首先安装Java SE Development Kit，然后修改环境变量，使其被系统引用。在环境搭建好后，再安装tomcat，在默认情况下服务器会监控8080端口，在此为了避免与geoserver服务器使用到一个端口，改为80端口。Geoserver服务器的搭建显得更为简单，在下载安装geoserver后就能运行使用，使用默认端口8080。本设计中网页、JS文件、数据库由tomcat服务器发布，而网页中展示的地图图片由Geoserver服务器发布。这样，便于发布者对发布地图及数据的修改。在本设计中需要使用OpenLayers项目，然而Geoserver所提供的OpenLayers类并不完全（比如缺少Vector类等），所以需要下载完全的OpenLayers来实现功能。在此需要注意的是，需要在OpenLayers.js代码中改变相对地址来正确引用到相应的类，否则将无法实现程序功能。3.4geoserver 提供功能3.4.1地图发布众所周知，Web客户端是通过HTML元素来表现网页内容的。基于OpenLayers的地图显示也是同样的原理。OpenLayers的核心是Map类和Layer类，Map的实例化对象就是内嵌于网页的交互式地图。地图显示，就是向一个地图容器里面加载图层（即layer）与控件（即control）。Map类就是地图容器。在Web网页中，地图容器通过div来表现，通过该div和id或name绑定JavaScript的Map对象，然后将图层和控件再加载到Map上，表现为地图。在geoserver平台下创建新的工作空间后就能发布地图，在本设计中采用的是发布TIFF格式的校园地图，自带经纬度。上传的图片数据通过OpenLayers的Format类解析得到Geometry对象，然后通过渲染器显示出来。在geoserver提供的地图发布功能中，首先设置经纬度边界来确定地图边界。然后创建map对象，将实例化的tiled,untiled图层对象添加入map对象中。最后在html代码中写入显示地图的容器，id为map，即可显示出校园地图。3.4.2地图缩放功能Geoserver在发布的地图上都添加了openlayers自带的导航条，通过导航条可以进行位移，放大缩小功能。导航条通过添加控件PanZooBar显示。PanZoomBar继承于PanZoom类。PanZoom能实现的功能有上下左右移动、全图、放大缩小，而PanZoomBar在PanZoom的基础上又增加了缩放杆按钮。地图缩放功能如图3.4.1所示。3.4.3 地图比例及经纬坐标显示通过添加Scale控件可以获得比例，在html代码中添加id为Scale的div即能显示比例尺。同样，通过添加控件MousePosition可以获得鼠标点击点的经纬度，通过id为location的div层显示。在页面中的显示如图3.4.1。4 基础功能模块4.1定位模块众所周知，地球是一个球体。当我们看一份地图是，是在看一个二维图纸对三维实物的表现。正因为失去了一个维度，所以所有的地图相对于真正的地球都是有失真的。因此，有了投影这个概念。投影是指将一整个或一部分三维球体的表面呈现在二维平面或其他几何面上。投影的方法是无限的，失真因投影的选择而不同。因为地图不能避免失真，所以每种投影对地图的特性做了一些权衡。不同种类的投影对不同的特性进行了保存，但是损失了一些其他的特性。常见的特性有面积，比例和形状。相对应的有等面积投影、等比例尺投影、等形投影。现在的地图一般都使用等形投影如墨卡托投影（Mercator Projection），见图4.1.1。OpenLayers选择的投影分类系统是EPGS，是一个探寻石油的科学组织：欧洲石油调查集团。在本设计中使用的编码是EPGS：4326。使用常见的经纬度坐标系统，经度范围-180至180，纬度范围-90至90。当我们需要定位到一个经纬度时，需要将对其进行投影转换，转到EPGS：4326。再通过调用map中的方法moveTo函数，实现定位。4.2 图层控制模块图层是一切操作的基础，有了基础层才能够在地图上显示出控件，才能对控件进行操作。OpenLayers.Layer类有三个固有属性，分别为id、name、div。和Map类似，div用于存放图层，id和name是layer的身份，并且以此为唯一标志对这个图层进行操作。Map和Layers的是相互引用的。OpenLayers的Map类主要含括了对每个图层的引用，对各个控件的引用，对不同事件的引用，对装载容器的引用（div），以及对Popup的引用，并且其自身还包含了大量的属性和方法。Map作为地图容器，加载各种数据格式的图层（如图4.2.1）在网页上以Z_IDEX为序分层叠加显示。OpenLayers中的每一个图层都是相对独立的，可以分别操作。如果想要控制不同图层的显示，可以通过添加LayerSwitcher控件，在地图右方增加一个按键，点击展开后在下拉列表里面来控制。显示如图4.2.2。4.3 标注模块地图标注是指通过图表、窗口、图片、表格等形式将空间位置信息点的相关信息展现到地图上。在WebGIS中，标注是较为重要的功能之一，在众多地图应用中都可以看见。WebGIS通过利用标注，为用户提供更加人性化的服务。地图标注的表现形式有很多，比如图片标注、冒泡信息窗口标注以及聚合标注等。标注与图层的关系如图4.3.1所示。在OpenLayers中，标注的添加和删除十分灵活便捷。在获取标注点的空间位置后，在这个位置上叠加显示图标就完成了地图标注，并且在必要时，可以用窗口的形式显示更多详细的信息。在网页中，用户通过鼠标交互来查看标注点所含的更详细的信息，此时，就需要OpenLayers中的Events类所含的方法来实现。Events类中的register方法即可监控大部分的鼠标操作，当用户使用鼠标点击或鼠标悬浮时，同过调用函数，来显示需要展示的图片，文字或表格等 。而当显示这些信息时，往往是通过Popup类实现的，Popup是地图上一个较小的可以控制开关的层，以小窗口的形式展示。总的来说，添加标记的步骤是：首先，创建标注图层，添加到map中，然后在目标出添加标注，再在标注上添加鼠标点击监控和鼠标悬浮监控，显示特定内容，最后添加鼠标移开事件。如图4.3.2所示。最后在网页上的展示如图4.3.3。4.4 绘制模块在WebGIS中，图形绘制也是十分重要的一个功能。图形绘制功能，就是在地图上用鼠标绘制几何图形（点、线、多边形等），此外，还可以直接添加绘制好的图形。OpenLayers封装了一整套几何图形绘制的控件，满足了用户的需求。鼠标交互绘制的原理在于：先实例化矢量绘图图层对象并添加至map，然后加载交互绘制矢量图形（如点、线、多边形）控件，最后通过激活相应的绘图图形控件来进行几何图形的绘制。事实上，在加载绘制控件时，相应的Handler（处理器）被创建，当通过调用函数将Handler激活时，浏览器监听器（listener）会注册相对应的处理事件的方法，当Handler被禁用时，这个方法也会被取消注册。流程图如图4.4.1。例如，在本设计中，在初始函数中加载矢量点绘制控件，首先通过实例化Control类中的子类DrawFeature来创建Handler.Point，当通过方法active()来激活点绘制控件，于是对应的Handler也被激活，从而在地图容器上可以使用鼠标绘制点。设计中的线、多边形也是同样的原理。图形绘制的基本步骤是：首先，创建三个图层，分别是点图层、线图层、面图层，并将其添加到map中，然后，定义并添加点线面控件对象。最后，在mousedraw函数中写入激活控件代码，当用户在页面点击绘制点线面选项时，调用mousedraw函数，分别激活想对应的绘图控件，就能够开始绘制。最后在网页中的展示如图4.4.2。4.5 测量模块测距离测面积的编写与绘制类似，都是通过激活相关控件来达到目的。与绘制不同的是，测量模块多加了一个显示函数，当测量控件被激活时，将测量数据显示到网页上。步骤是：首先，定义并添加测量控件对象，然后通过调用toggleControl激活控件。此外，通过handleMeasurements函数在map下方显示绘制图形的距离或面积。如图4.5.1、4.5.2。5 导航模块5.1 初始设定所有的分叉点均存在数据库中，所含的属性有经纬度、所在的路。在此，定义两个分叉点之间即为一条路。（如图5.1.1）所以，对于点而言，所在的点可能有1至4条（当一个点为终点时，所在的路只有 1条；当一个点处于三岔路口和四岔路口时，分别为3条和4条；所在的路有2条的情况在下面介绍），而对于路而言，所含的属性有它的两个端点。此外，所有的分叉点和路在数据库中都有对应的序号。因为之后的选路径会涉及到路的长度的运算，而OpenLayers的方法中只能计算两点之间的直线距离，所以对于弯曲的道路，采取多增加分叉点的方法，来将弯曲的路化为直线的路（此时的点所在的路有2条）。如图5.1.2。表5.1.1和表5.1.2分别为分叉点和道路的数据结构： 表5.1.1分叉点数据结构PointsNumberLonLatRj表5.1.2路数据结构RoadNumberP1PointsmP2Pointsn5.2起终点插入模块起终点插入模块的功能是将用户输入的始终点转换为最短路径的初始条件。是整个导航模块中十分重要的模块。由于用户在寻路时，所处的位置有可能在我们存入数据库中的路上，也有可能不在。在本设计中，我们考虑在路上的情况。通过路的属性（两端点），我们可以用比较经纬度的方法较为简单的找到起点、终点所在的路，得到起终点的“路”的属性。将起终点作为新的点，与数据库中所存的点相结合计算最短路径。但是，这在邻接矩阵的生成中增加了复杂度，在最短路径算法中邻接矩阵的维度增加，也会增加计算量。这是一种解决方法。在此，提出第二种解决方法，就是将起终点所在的路的断电作为新的起终点。但是无论选择路的两个端点中的哪一个作为起点（终点），舍弃另外一个点的同时都有可能造成最短路径的丢失。所以，最终我们会得到2个起点，2个终点。这种处理方法所带来的代价是我们必须调用4次最短路径算法，最后找出最近的路，但是与此同时降低了邻接矩阵的维度，时间、空间中都比上种方法有所简化。5.3邻接矩阵生成模块邻接矩阵是一个用于记录定点之间的关系的二维数组。在Javascript中，并没有二维数组的定义，但是可以通过将一个一维数组中的项再定义为一维数组的方法来定义二维数组。在本设计中校园地图的各分叉点之间的路是无向的、可正逆的。所以对应的邻接矩阵是对称阵。这减少了计算步骤和存储空间。根据数据库中的点的属性，生成邻接矩阵。当两个点在一条路时，计算其两点距离并存入邻接矩阵；当不在一条路时，将0计入邻接矩阵。5.4最短路径算法模块通过邻接矩阵生成模块和起终点转换模块，我们可以得到一个邻接矩阵和起终点的序号。在通过最短路径算法，得到记录最短路径各点的序号的数组。5.5绘制最短路径模块通过TSP（最短路径）算法，我们可以得到一个数组，记录了最短路径的各个点的序号，在通过调用数据库中的点的经纬度属性，利用OpenLayers中Feature类的子类Vector在地图上画出路线。如下图5.5.1所示。6 结论本设计为基于OpenLayers的校园地图开发，旨在研究基于开源的geoserver和openlayers框架下的地图服务系统开发。实现的功能种类繁多，大致分为三个模块。地图服务器提供的功能模块、基本功能模块、导航模块。其中，地图服务器提供的功能有地图发布、地图缩放、地图比例及经纬坐标显示。基本功能有定位功能，图层显示控制功能、标注功能、绘制功能、测量功能。导航功能模块由邻接矩阵生成模块、起终点转换模块、绘制最短路径模块组成。在各个功能实现的过程中，都涉及到OpenLayers中的各种方法和控件，在地图容器的Layer中展示。在设计的过程中遇到过很多问题，如Web服务器和地图服务器公用了一个端口导致无法同时运行、引入JS文件时未修改相对路径导致无法实例化相应的类，等等以及一些细节方面的问题。在解决问题的过程中，进一步熟悉了OpenLayers的架构原理，并提高了自己面对问题、解决问题的能力。不可避免的，由于时间问题本设计中还是存在一些缺陷，比如暂时只能定位经纬坐标点，还不能实现查询定位功能、标记点尚未添加完全、绘图模块的保存问题、导航功能中只能允许在路上的起终点等。相信在进一步的学习和设计之后，这些不足都能够得到完善。致谢通过近三个月的关于毕业设计的学习与研究，让我不仅在个人能力上，而且在个人素质上，都有了较大的提升。首先，我十分感谢我的指导老师李成老师。老师孜孜不倦的教学态度和热情诚恳的待人方式是我们学习的榜样。在这个学期的毕业设计过程中，李老师每周约定商讨时间对我所提出的问题细心指导，在学习方法、研究方向上引导着我，令我获益匪浅。在此毕业设计上，李老师并没有直接告诉我设计的方法，而是在教授了我所必须的知识后让我自己思考、查阅相关的做法。虽然在当时让我觉得研究困难进程缓慢，但是在无形中提高了我个人的提出问题、解决问题的能力。不过，当我遇到了较大的困难时，李老师还是会耐心的和我一起分析问题、解决困难。在设计初期，我对Javascript的架构还不十分理解，以致在网页引入JS文件时出了差错，导致功能无法实现，李老师花了两个个下午的时间和我一起排查错误，最后问题找出，功能实现，也让我茅塞顿开，对JS语言更加理解了。在论文完成之际，谨向李老师致以最崇高的敬意和最衷心的感谢！另外，还要感谢大学以来的各位科任老师，传授我知识和方法，让我在学海中不断积累，不断进步。其次，我要感谢各位审老师对我的指导，对于老师们提出宝贵的意见和建议，我将会认真思考并且加以改进。最后，我要感谢我周围的同学，在浓郁的学习氛围中让我能够静下心来认真研究，我要感谢我的家人，充分理解和支持我，给予我鼓励，让我去追求更高更远！再一次表达最诚挚的感谢！参考文献1Tim Wright著,爱飞翔译.JavaScript应用开发实践指南M.北京：机械工业出版社，20132吴信才.基于JavaScript的WebGIS开发M.北京：电子工业出版社，2013附录A地图发布代码var bounds = new OpenLayers.Bounds( 112.94323465987186, 28.176611132922773, 112.96193896423247, 28.19389524589955 ); var options = controls: , maxExtent: bounds, maxResolution: 0.0000730636889086, projection: EPSG:4326, units: degrees ; map = new OpenLayers.Map(map, options); / setup tiled layer tiled = new OpenLayers.Layer.WMS( CAMPUS:FINAL - Tiled, http:/localhost:8080/geoserver/CAMPUS/wms, LAYERS: CAMPUS:FINAL, STYLES: , format: format, tiled: true, tilesOri