毕业论文-基于网上电子地图平台的数字校园建设

1、第 页基于网上电子地图平台的数字校园建设作 者：指导老师：摘要：通过网上电子地图平台的数字校园建设能够将校园各项信息在网络上进行展示，使有关信息得到及时的传达和显示，为宣传和增加学校知名度提供平台，同时简化校园管理难度，增加管理的有效性，保障校园各项生活平稳有序进行，从而为学校在网络上的发展提供了更广阔的天地，也为学生和社会各界了解学校提供了很好的通道。本文介绍了基于网络地图的数字校园建设，阐述了百度地图API在展示校园平面图方面的具体应用，使用JavaScript语言，将校园的平面图等校园地理信息添加到电子地图平台上，实现数字校园地图服务。目前的展示信息量有限，绘制还不是很精细，需要进一步的

2、完善。关键词：百度地图API； 数字校园； WebGIS； 网上电子地图0 引言数字校园建设有很早的历史，最早始于美国克莱蒙特大学教授凯尼斯格林(Kenneth Green)发起并主持的一项名为“信息化校园计划”的大型科研项目。我国高等学校大规模的信息化建设大多从20世纪90年代开始，并得到快速发展，在“HYPERLINK /view/486181.htm面向21世纪教育振兴行动计划”中提出并强调了要利用信息技术来推进教育的改革。我国“数字校园”就是在这一HYPERLINK /view/43819.htm教育改革的理念上提出来的1。在随后的数字校园建设实践过程中，数字校园的理念得到了逐步扩充和

3、完善。数字化校园是利用计算机技术、网络技术、HYPERLINK /view/521295.htm通讯技术以及科学规范的管理对校园内的教学、科研、管理和生活服务有关的所有信息资源进行整合、集成和全面的数字化，以构成统一的用户管理、统一的资源管理和统一的权限控制；通过组织和HYPERLINK /view/1257446.htm业务流程再造，推动学校进行制度创新、管理创新，最终实现教育信息化、决策科学化和管理规范化1。随着互联网的迅猛发展，网络已深入社会的方方面面，网络地图作为网络时代的产物为人们的出行、导航、定位等提供了方便快捷的服务，逐渐成为人们生活中不可或缺的产品。基于网络地图的虚拟校园建设能

4、够把握网络发展潮流，充分利用网络平台与资源来展示校园，成为宣传和发展校园自身的利器。 本文主要介绍基于百度地图的数字校园地图建设，只对校园交通及平面图进行网络化，以供在互联网上展示和查询，向人们提供校园交通和位置信息，方便我校师生出行和游客游览。目前我国很多高校都建立起了自己的数字虚拟校园，在基于电子地图平台的校园建设方面却处于起步阶段，但前景十分广阔。为此提供的平台越来越多，国外很多先进技术的引入，及我国近几年互联网技术的突飞猛进，都为虚拟校园建设做出来重要贡献。目前关于基于百度地图API的应用方面的论述不是很丰富。主要有廊坊师范学院学报出版的广东培正学院的梁广荣、黎红的基于百度地图API的

5、虚拟校园实现，主要是把采集到的校园图景通过flash处理成全景图页面，以及3DMax制作的校园三维地图，通过JavaScript语言在HTML中调用实现的，实现了校园的某一指定地物的全方位可视化，却没有漫游浏览的功效2。德州房产测绘队的杜传明百度地图API在小型地理信息系统中的应用，只要是基于百度地图的房产信息的管理、查询与展示，对数据库的要求比较高3。青岛气象局的赵文雪的百度MapAPI在气象自动站监测的应用，主要介绍了基于公共网络地图的接口实现各气象站气象信息的实时更新，这种构想最大的问题是容易受到网络入侵而影响到整个系统的稳定4。西南林业大学生态旅游学院的王红崧、周海晏的基于百度地图AP

6、I的旅游地理信息系统开发，主要针对传统GIS开发周期长、过程复杂、建设成本高的缺陷，利用百度地图API技术建立基于WebGIS的旅游信息系统，进行了系统结构设计和数据库的构建，从而实现在互联网上展示旅游信息，对数据库技术的要求高，更需要对数据进行维护、更新5。国内关于网络平台的数字校园建设目前正处于成长阶段，数字、3D技术等日趋成熟，虚拟校园更加逼真，但也存在很多不足:数据库技术不成熟，数据量大，处理难度增加。3D技术发展有限，实物虚拟数字化达不到应有的水平。我国缺乏对数据、地理信息、网络技术、虚拟技术等进行融合汇总的综合性技术人才。这些严重影响了我国在虚拟校园建设方面的发展。1 基于网络地图

7、的虚拟校园建设的平台选择1.1平台比较 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多操作系统下的地图应用开发。百度地图API免费对外开放，业已广泛应用互联网、移动设备、车厂等行业，主要涉及房产、电商、团购、移动手机应用、生活服务网站等。主要有搜房、糯米、去哪儿网、百姓网、12580、酷讯旅游、同程网、途牛旅

8、游网、好大夫在线、豆角网、墨迹天气、食神摇摇等。百度地图宣称百度地图API免费对外开放，提供给进行PC端、移动设备端、服务端的地图应用开发者。百度地图API具有官方网站，使用者最好具有一定编程经验，若毫无开发经验，也可以根据每款产品提供的开发指南进行入门学习。此外，读者若对地图产品有一定的了解，会更容易入门6。 Google Maps API是Google为开发者提供的MapsHYPERLINK /view/3281.htm编程API。它允许开发者在不必建立自己的地图服务器的情况下，将GoogleMaps地图数据HYPERLINK /view/732561.htm嵌入到网站之中，从而实现嵌入G

9、oogle Maps的地图服务应用，并借助Google Maps的地图数据为用户提供HYPERLINK /view/3214499.htm位置服务。Google Maps API除了帮助开发者将地图HYPERLINK /view/732561.htm嵌入到Web应用中之外，还允许开发者利用JavaScriptHYPERLINK /view/54.htm脚本进行应用开发拓展，给地图添加标注和路径及其他图层覆盖物，或者响应用户的点击动作，并显示包含内容信息在内的气泡提示窗口。通过Google Maps为开发者提供的地图API，可以开发出各种各样有趣的地图HYPERLINK /view/112743

10、3.htmMash-up应用，还可以将不同地图图层加载到应用中，如HYPERLINK /view/1518491.htm卫星影像、根据HYPERLINK /view/378997.htm海拔高度绘制的高山和植被地形图、街道视图等，从而帮助开发者打造个性化的地图应用站点。Google 地图 API 是一种通过 JavaScript 将 Google 地图HYPERLINK /view/732561.htm嵌入到您的网页的 API。该 API 提供了大量实用工具用以处理地图,并通过各种服务向地图添加内容，从而使您能够在您的网站上创建功能全面的地图HYPERLINK /view/330120.htm

11、应用程序。1.2选择 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，由JavaScript语言编写，它能够帮助您在网站中构建功能丰富、交互性强的地图HYPERLINK /view/330120.htm应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。功能强大，开发过程大大简化，特别是开源库为大家提供更广阔的开发空间。基于网络地图的虚拟校园建设，主要基于JavaScript把相关信息以脚本的形式展现到网页中去，人们可以通过域名网址进行访问。百度地图JavaScript API是一套由JavaScript语言编写的HYPERLIN

12、K /view/592964.htm应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图HYPERLINK /view/330120.htm应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于PC或移动设备端的基于浏览器的开发。JS版本还为用户开放了开源库，简化开发。比较适用于初级开发者，而且其功能越来越完善，加之，考虑到google服务器退出大陆地区，其稳定性欠缺，故而选择国内的百度地图api中的JavaScript。1.3 准备工作 我们首先了解什么是脚本（JavaScript）,JavaScript是一种基于对象和HYPERL

13、INK /view/536048.htm事件驱动并具有相对安全性的客户端HYPERLINK /view/54.htm脚本语言。同时也是一种广泛用于客户端HYPERLINK /view/3912.htmWeb开发的脚本语言，常用来给HYPERLINK /view/692.htmHTML网页添加动态功能，比如响应用户的各种操作。百度地图api为用户提供更加简易便捷的JavaScript入门和各种实例，给初学者提供更加直观的学习资源。在此基础上，我们学习js的各种控件、事例、覆盖物、图层、工具和各种服务。在此，我们要有脚本编写软件，对示例代码进行编写和修改调试。与之对应我们要有与百度地图api支持兼

14、容的浏览器进行展示7。2 基于网络地图的虚拟校园建设的技术路线 首先利用百度地图api中的JavaScript提供的示例代码，简单的把百度地图引用到脚本中，再对地图进行代码操作，用添加代码的方法实现地图中地物的显示。这些代码包括控件、覆盖物、事件等，以用于地图大小的显示、缩放、拖拽等，添加覆盖物用于突出地图中的地物，使地物更直观的显现在地图中。本文中所用的覆盖物是用坐标点生成的一个个多边形绘制的地物形状，附之以不同的颜色进而将地表的建筑、街道显示出来。通过标注把主要信息通过红色小水滴标注出来，通过点击小水滴触发事件，从而达到显示信息的效果8。 然后在把脚本做好之后，我们需要把它显示出来，我们通

15、过申请免费空间的方法，通过ftp上传软件把我们做好的html文件上传到空间中，其他人通过访问主页的形式就可以看到做好的文件。如下图所示：图1 技术路线图3 基于网络地图的虚拟校园建设的具体实现3.1 代码引用编写与修改调试第一步：引用百度地图最新版本1.4，并自定义地图大小尺寸定义尺寸body, html,#allmap width: 100%;height: 100%;overflow: hidden;margin:0; /尺寸为填充整个浏览器#l-mapheight:100%;width:78%;float:left;border-right:2px solid #bcbcbc;#r-re

16、sultheight:100%;width:20%;float:left;引用百度地图api文件：type=text/javascript src=/api?v=1.4 /版本1.4第二步：创建地图事例与点坐标并进行地图初始化varmap=newBMap.Map(container);/创建地图实例varpoint=newBMap.Point(116.404,39.915);/创建点坐标map.centerAndZoom(point,15);/初始化地图，设置中心点坐标和地图级别BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他

17、操作。之后我们可以增加一个监听事件，而且可以设置返回值，此处增加返回坐标信息map.addEventListener(click,function(e) alert(e.point.lng + , + e.point.lat););以上做完，返回坐标值，其效果如下：图2 监听事件对点击触发的回应第三步：增加文本信息窗口并加载显示，可以设置窗口的大小和要显示的信息var opts = width : 100, /文本框宽度 height: 80, /文本框高度 title : 南阳师院 /文本框标题var infoWindow = new BMap.InfoWindow(环境科学与旅游学院, o

18、pts); /文本框内容map.openInfoWindow(infoWindow,point);如下：图3 展示了添加的文本信息第四步：根据地物坐标生成多边形来表示地图上的建筑道路等，多边形通过添加覆盖物的形式向地图中添加varmap=newBMap.Map(container);varpoint=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);/添加自定义覆盖物varmySquare=newSquareOverlay(map.getCenter(),100,red);map.addOverlay(mySquare);var

19、 polygon = new BMap.Polygon( /添加多边形 new BMap.Point(112.497061,32.980949), /添加多边形坐标点 new BMap.Point(112.497778,32.981183), new BMap.Point(112.498075,32.980676), new BMap.Point(112.497419,32.980366), strokeColor:red, strokeWeight:3, strokeOpacity:0.5); /定义线宽和颜色var polygon1 = new BMap.Polygon( new BMap

20、.Point(112.496224,32.982728), new BMap.Point(112.497231,32.982735), new BMap.Point(112.497455,32.981448), new BMap.Point(112.496386,32.98135), strokeColor:blue, strokeWeight:3, strokeOpacity:0.5);现在向地图中添加2个多边形覆盖物，多边形各有四个点坐标构成，有代码自动生成多边形，其它的绘制方法同上，此处不再显示。效果如下9：图4 添加的多边形第五步：向地图中添加标注信息，对每个多边形所标示的建筑物进行命

21、名和注释varmap=newBMap.Map(container);varpoint=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);varmarker=newBMap.Marker(point);/创建标注 map.addOverlay(marker);/将标注添加到地图中var sContent1 =科技楼 + + ; /定义标注尺寸和名称var point = new BMap.Point(112.497662, 32.980972);var marker = new BMap.Marker(point);var inf

22、oWindow = new BMap.InfoWindow(sContent1); map.addOverlay(marker);marker.addEventListener(click, function() / 设置监听事件 this.openInfoWindow(infoWindow); document.getElementById(imgDemo).onload = function () infoWindow.redraw(); /信息展示 );上图以科技楼为例来说明，增加监听事件，点击自动返回值，其他在此省去，效果如图10:图5 点击显示的标注信息4 成果展示汇总以上步骤，得到

23、如下成果图示：图6 最终成果5 结论与展望本文主要是在前人研究的基础进行总结和改进，试图对js网络和地理信息技术进行结合，把校园平面信息进行整合展示到网络平台上，并提供信息查询，能够有效地将校园信息的了解范围扩展到最大。由于本人在数据库方面知识有限，并没有结合数据库技术提供更多的信息查询。加之网络取点难度大，所以在地物描绘精度上不是很好，在技术上还需要更大的改进。在当今社会，信息化突飞猛进，网络技术更是一日千里，用好网络这个工具能给我们生活带来无尽的方便，给我们展示网络平台强大的信息量。随着社会的发展，开源逐渐成为一种时尚，自定义让人们的生活更加充满生机。网络虚拟逐渐走入人们的生活，让现实的东

24、西在网络世界里都能找到映像，虚拟校园旨在打造网络的校园平台，丰富我们的生活。在借鉴了google地图api的基础上，和吸收了国内学者基于百度地图api在其他领域的开发经验，给本文的写作提供了有力的指导特别是广东培正学院的梁广荣、黎红的基于百度地图API的虚拟校园实 现，让本文的写作有了方向和参考。文中有些不完善的地方还请见谅，由于时间关系建筑物的坐标点只取了4个，距离现实还有很大差距，信息展示的不是很全面，在虚拟校园的建设上还有很长的路要走。参 考 文 献1 Online baidubaike . 2013-4-1/view/959300.htm2 梁广荣、黎红等.基于百度地图API的虚拟校园

25、实现J.廊坊师范学院学报，2012年12月6日2013-4-13杜传明.百度地图API在小型地理信息系统中的应用J，2011年4月,2013-4-1.4 赵文雪.百度MapAPI在气象自动站监测的应用，2012年6月，2013-4-1.5王红崧、周海晏等.基于百度地图API的旅游地理信息系统开发J.现代计算机.2012年8月, 60-636 Online baidubaike .baidumap api 2013-4-1/view/3521171.htm7 高峰. HYPERLINK /qk/91959X/200403/10000716.html t _blank JavaScript在基于S

26、VG的网络地图中的应用，2004 江西师范大学学报：自然科学版.8 Online 百度地图api 2013-4-1/map/jshome.htm9 Online 百度地图开发指南，覆盖物 /map/jsdevelop-4.htm 10 Online 百度地图api示例Demo /map/jsdemo.htmThe construction of digital campus based on web map platform YANGFeiFeiAbstract：Through the construction of digital campus net electronic map platform can be demonstrated on the information of campus network, so the information timely comm