基于网上电子地图平台的数字校园建设

1、第 页基于网上电子地图平台的数字校园建设0 引言数字校园建设有很早的历史，最早始于美国克莱蒙特大学教授凯尼斯格林(Kenneth Green)发起并主持的一项名为“信息化校园计划”的大型科研项目。我国高等学校大规模的信息化建设大多从20世纪90年代开始，并得到快速发展，在“HYPERLINK http:/ http:/ http:/ http:/ 本文主要介绍基于百度地图的数字校园地图建设，只对校园交通及平面图进行网络化，以供在互联网上展示和查询，向人们提供校园交通和位置信息，方便我校师生出行和游客游览。目前我国很多高校都建立起了自己的数字虚拟校园，在基于电子地图平台的校园建设方面却处于起步阶

2、段，但前景十分广阔。为此提供的平台越来越多，国外很多先进技术的引入，及我国近几年互联网技术的突飞猛进，都为虚拟校园建设做出来重要贡献。目前关于基于百度地图API的应用方面的论述不是很丰富。主要有廊坊师范学院学报出版的广东培正学院的梁广荣、黎红的基于百度地图API的虚拟校园实现，主要是把采集到的校园图景通过flash处理成全景图页面，以及3DMax制作的校园三维地图，通过JavaScript语言在HTML中调用实现的，实现了校园的某一指定地物的全方位可视化，却没有漫游浏览的功效2。德州房产测绘队的杜传明百度地图API在小型地理信息系统中的应用，只要是基于百度地图的房产信息的管理、查询与展示，对数

3、据库的要求比较高3。青岛气象局的赵文雪的百度MapAPI在气象自动站监测的应用，主要介绍了基于公共网络地图的接口实现各气象站气象信息的实时更新，这种构想最大的问题是容易受到网络入侵而影响到整个系统的稳定4。西南林业大学生态旅游学院的王红崧、周海晏的基于百度地图API的旅游地理信息系统开发，主要针对传统GIS开发周期长、过程复杂、建设成本高的缺陷，利用百度地图API技术建立基于WebGIS的旅游信息系统，进行了系统结构设计和数据库的构建，从而实现在互联网上展示旅游信息，对数据库技术的要求高，更需要对数据进行维护、更新5。国内关于网络平台的数字校园建设目前正处于成长阶段，数字、3D技术等日趋成熟，

4、虚拟校园更加逼真，但也存在很多不足:数据库技术不成熟，数据量大，处理难度增加。3D技术发展有限，实物虚拟数字化达不到应有的水平。我国缺乏对数据、地理信息、网络技术、虚拟技术等进行融合汇总的综合性技术人才。这些严重影响了我国在虚拟校园建设方面的发展。1 基于网络地图的虚拟校园建设的平台选择1.1平台比较 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适

5、用于PC端、移动端、服务器等多种设备，多操作系统下的地图应用开发。百度地图API免费对外开放，业已广泛应用互联网、移动设备、车厂等行业，主要涉及房产、电商、团购、移动手机应用、生活服务网站等。主要有搜房、糯米、去哪儿网、百姓网、12580、酷讯旅游、同程网、途牛旅游网、好大夫在线、豆角网、墨迹天气、食神摇摇等。百度地图宣称百度地图API免费对外开放，提供给进行PC端、移动设备端、服务端的地图应用开发者。百度地图API具有官方网站，使用者最好具有一定编程经验，若毫无开发经验，也可以根据每款产品提供的开发指南进行入门学习。此外，读者若对地图产品有一定的了解，会更容易入门6。 Google Maps

6、 API是Google为开发者提供的MapsHYPERLINK http:/ http:/ Maps的地图服务应用，并借助Google Maps的地图数据为用户提供HYPERLINK http:/ Maps API除了帮助开发者将地图HYPERLINK http:/ http:/ Maps为开发者提供的地图API，可以开发出各种各样有趣的地图HYPERLINK http:/ http:/ http:/ 地图 API 是一种通过 JavaScript 将 Google 地图HYPERLINK http:/ API。该 API 提供了大量实用工具用以处理地图,并通过各种服务向地图添加内容，从而使您

7、能够在您的网站上创建功能全面的地图HYPERLINK http:/ 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，由JavaScript语言编写，它能够帮助您在网站中构建功能丰富、交互性强的地图HYPERLINK http:/ API是一套由JavaScript语言编写的HYPERLINK http:/ http:/ 准备工作 我们首先了解什么是脚本（JavaScript）,JavaScript是一种基于对象和HYPERLINK http:/ http:/ http:/ http:/ 基于网络地图的虚拟校园建设的技术路线 首先利用百度地图api中的JavaScript提供的

8、示例代码，简单的把百度地图引用到脚本中，再对地图进行代码操作，用添加代码的方法实现地图中地物的显示。这些代码包括控件、覆盖物、事件等，以用于地图大小的显示、缩放、拖拽等，添加覆盖物用于突出地图中的地物，使地物更直观的显现在地图中。本文中所用的覆盖物是用坐标点生成的一个个多边形绘制的地物形状，附之以不同的颜色进而将地表的建筑、街道显示出来。通过标注把主要信息通过红色小水滴标注出来，通过点击小水滴触发事件，从而达到显示信息的效果8。 然后在把脚本做好之后，我们需要把它显示出来，我们通过申请免费空间的方法，通过ftp上传软件把我们做好的html文件上传到空间中，其他人通过访问主页的形式就可以看到做好

9、的文件。如下图所示：图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-resultheight:100%;width:20%;float:left;引用百度地图api文件：type=text

10、/javascript src=http:/ /版本1.4第二步：创建地图事例与点坐标并进行地图初始化varmap=newBMap.Map(container);/创建地图实例varpoint=newBMap.Point(116.404,39.915);/创建点坐标map.centerAndZoom(point,15);/初始化地图，设置中心点坐标和地图级别BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。之后我们可以增加一个监听事件，而且可以设置返回值，此处增加返回坐标信息map.addEventListener(cli

11、ck,function(e) alert(e.point.lng + , + e.point.lat););以上做完，返回坐标值，其效果如下：图2 监听事件对点击触发的回应第三步：增加文本信息窗口并加载显示，可以设置窗口的大小和要显示的信息var opts = width : 100, /文本框宽度 height: 80, /文本框高度 title : 南阳师院 /文本框标题var infoWindow = new BMap.InfoWindow(环境科学与旅游学院, opts); /文本框内容map.openInfoWindow(infoWindow,point);如下：图3 展示了添加的文

12、本信息第四步：根据地物坐标生成多边形来表示地图上的建筑道路等，多边形通过添加覆盖物的形式向地图中添加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 polygon = new BMap.Polygon( /添加多边形 new BMap.Point(112.497061,

13、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.Point(112.496224,32.982728), new BMap.Point(112.497231,32.982

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

15、04,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 infoWindow = new BMap.InfoWindow(sContent1); map.addOverlay(marke

16、r);marker.addEventListener(click, function() / 设置监听事件 this.openInfoWindow(infoWindow); document.getElementById(imgDemo).onload = function () infoWindow.redraw(); /信息展示 );上图以科技楼为例来说明，增加监听事件，点击自动返回值，其他在此省去，效果如图10:图5 点击显示的标注信息4 成果展示汇总以上步骤，得到如下成果图示：图6 最终成果5 结论与展望本文主要是在前人研究的基础进行总结和改进，试图对js网络和地理信息技术进行结合，把

17、校园平面信息进行整合展示到网络平台上，并提供信息查询，能够有效地将校园信息的了解范围扩展到最大。由于本人在数据库方面知识有限，并没有结合数据库技术提供更多的信息查询。加之网络取点难度大，所以在地物描绘精度上不是很好，在技术上还需要更大的改进。在当今社会，信息化突飞猛进，网络技术更是一日千里，用好网络这个工具能给我们生活带来无尽的方便，给我们展示网络平台强大的信息量。随着社会的发展，开源逐渐成为一种时尚，自定义让人们的生活更加充满生机。网络虚拟逐渐走入人们的生活，让现实的东西在网络世界里都能找到映像，虚拟校园旨在打造网络的校园平台，丰富我们的生活。在借鉴了google地图api的基础上，和吸收了

18、国内学者基于百度地图api在其他领域的开发经验，给本文的写作提供了有力的指导特别是广东培正学院的梁广荣、黎红的基于百度地图API的虚拟校园实 现，让本文的写作有了方向和参考。文中有些不完善的地方还请见谅，由于时间关系建筑物的坐标点只取了4个，距离现实还有很大差距，信息展示的不是很全面，在虚拟校园的建设上还有很长的路要走。参 考 文 献1 Online baidubaike . 2013-4-1http:/ 梁广荣、黎红等.基于百度地图API的虚拟校园实现J.廊坊师范学院学报，2012年12月6日2013-4-1.3杜传明.百度地图API在小型地理信息系统中的应用J，2011年4月,2013-4

19、-1.4 赵文雪.百度MapAPI在气象自动站监测的应用，2012年6月，2013-4-1.5王红崧、周海晏等.基于百度地图API的旅游地理信息系统开发J.现代计算机.2012年8月, 60-636 Online baidubaike .baidumap api 2013-4-1http:/ 高峰. HYPERLINK http:/ t _blank JavaScript在基于SVG的网络地图中的应用，2004 江西师范大学学报：自然科学版.8 Online 百度地图api 2013-4-1http:/ Online 百度地图开发指南，覆盖物 http:/ 10 Online 百度地图api示

20、例Demo http:/ construction of digital campus based on web map platform Abstract：Through the construction of digital campus net electronic map platform can be demonstrated on the information of campus network, so the information timely communication and display, the popularity of the school to provide a platform for propaganda and increase, while simplifying the campus management difficulty, increase the effectiveness of management,