1、第 1 页 共 14 页基于网上电子地图平台的数字校园建设摘要：通过网上电子地图平台的数字校园建设能够将校园各项信息在网络上进行展示，使有关信息得到及时的传达和显示，为宣传和增加学校知名度提供平台，同时简化校园管理难度，增加管理的有效性，保障校园各项生活平稳有序进行，从而为学校在网络上的发展提供了更广阔的天地，也为学生和社会各界了解学校提供了很好的通道。本文介绍了基于网络地图的数字校园建设，阐述了百度地图 API 在展示校园平面图方面的具体应用，使用 JavaScript 语言，将校园的平面图等校园地理信息添加到电子地图平台上，实现数字校园地图服务。目前的展示信息量有限，绘制还不是很精细，需要
2、进一步的完善。关键词：百度地图 API； 数字校园； WebGIS； 网上电子地图0 引言数字校园建设有很早的历史，最早始于美国克莱蒙特大 学 教 授凯尼斯格林(Kenneth Green)发起并主持的一项名为“信息化校园计划”的大型科研项目。我国高等学校大规模的信息化建设大多从20 世纪 90 年代开始，并得到快速发展，在“ 面 向 21 世 纪 教 育 振 兴行 动 计 划 ”中提出并强调了要利用信息技术来推进教育的改革。我国“数字校园”就是在这一教 育 改 革 的理念上提出来的 1。在随后的数字校园建设实践过程中，数字校园的理念得到了逐步扩充和完善。数 字 化 校 园 是 利 用 计 算
3、 机 技 术 、 网 络 技 术 、 通 讯 技 术 以 及 科学 规 范 的 管 理 对 校 园 内 的 教 学 、 科 研 、 管 理 和 生 活 服 务 有 关 的 所有 信 息 资 源 进 行 整 合 、 集 成 和 全 面 的 数 字 化 ， 以 构 成 统 一 的 用 户管 理 、 统 一 的 资 源 管 理 和 统 一 的 权 限 控 制 ； 通 过 组 织 和 业 务 流 程再 造 ， 推 动 学 校 进 行 制 度 创 新 、 管 理 创 新 ， 最 终 实 现 教 育 信 息 化 、第 2 页 共 14 页决 策 科 学 化 和 管 理 规 范 化 1。随 着 互 联 网
4、的 迅 猛 发 展 ， 网 络 已 深 入 社 会 的 方 方 面 面 ， 网 络地 图 作 为 网 络 时 代 的 产 物 为 人 们 的 出 行 、 导 航 、 定 位 等 提 供 了 方便 快 捷 的 服 务 ， 逐 渐 成 为 人 们 生 活 中 不 可 或 缺 的 产 品 。 基 于 网 络地 图 的 虚 拟 校 园 建 设 能 够 把 握 网 络 发 展 潮 流 ， 充 分 利 用 网 络 平 台与 资 源 来 展 示 校 园 ， 成 为 宣 传 和 发 展 校 园 自 身 的 利 器 。本文主要介绍基于百度地图的数字校园地图建设，只对校园交通及平面图进行网络化，以供在互联网上展示
5、和查询，向人们提供校园交通和位置信息，方便我校师生出行和游客游览。目前我国很多高校都建立起了自己的数字虚拟校园，在基于电子地图平台的校园建设方面却处于起步阶段，但前景十分广阔。为此提供的平台越来越多，国外很多先进技术的引入，及我国近几年互联网技术的突飞猛进，都为虚拟校园建设做出来重要贡献。目前关于基于百度地图 API 的应用方面的论述不是很丰富。主要有廊坊师范学院学报出版的广东培正学院的梁广荣、黎红的基于百度地图 API 的虚拟校园实现，主要是把采集到的校园图景通过flash 处理成全景图页面，以及 3DMax 制作的校园三维地图，通过JavaScript 语言在 HTML 中调用实现的，实现
6、了校园的某一指定地物的全方位可视化，却没有漫游浏览的功效 2。德州房产测绘队的杜传明百度地图 API 在小型地理信息系统中的应用，只要是基于百度地图的房产信息的管理、查询与展示，对数据库的要求比较高 3。青岛气象局的赵文雪的百度 MapAPI 在气象自动站监测的应用，主要介绍了基于公共网络地图的接口实现各气象站气象信息的实时更新，这种构想最大的问题是容易受到网络入侵而影响到整个系统的稳定 4。西南林业大学生态旅游学院的王红崧、周海晏的基于百度地图 API的旅游地理信息系统开发，主要针对传统 GIS 开发周期长、过程复杂、建设成本高的缺陷，利用百度地图 API 技术建立基于 WebGIS的旅游信
7、息系统，进行了系统结构设计和数据库的构建，从而实现在互联网上展示旅游信息，对数据库技术的要求高，更需要对数据进行维护、更新 5。国内关于网络平台的数字校园建设目前正处于成长阶段，数字、第 3 页 共 14 页3D 技术等日趋成熟，虚拟校园更加逼真，但也存在很多不足:数据库技术不成熟，数据量大，处理难度增加。3D 技术发展有限，实物虚拟数字化达不到应有的水平。我国缺乏对数据、地理信息、网络技术、虚拟技术等进行融合汇总的综合性技术人才。这些严重影响了我国在虚拟校园建设方面的发展。1 基于网络地图的虚拟校园建设的平台选择1.1 平台比较百度地图 API 是为开发者免费提供的一套基于百度地图服务的应用
8、接口，包括 JavaScript API、Web 服务 API、Android SDK、iOS SDK、定位 SDK、车联网 API、LBS 云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS 云存储与检索等功能，适用于 PC 端、移动端、服务器等多种设备，多操作系统下的地图应用开发。百度地图 API 免费对外开放，业已广泛应用互联网、移动设备、车厂等行业，主要涉及房产、电商、团购、移动手机应用、生活服务网站等。主要有搜房、糯米、去哪儿网、百姓网、12580、酷讯旅游、同程网、途牛旅游网、好大夫在线、豆角网、墨迹天气、食神摇摇等。百度地图宣称百度地图 API
9、免费对外开放，提供给进行 PC 端、移动设备端、服务端的地图应用开发者。百度地图 API 具有官方网站，使用者最好具有一定编程经验，若毫无开发经验，也可以根据每款产品提供的开发指南进行入门学习。此外，读者若对地图产品有一定的了解，会更容易入门 6。Google Maps API 是 Google 为开发者提供的 Maps 编程API。它允许开发者在不必建立自己的地图服务器的情况下，将GoogleMaps 地图数据嵌入到网站之中，从而实现嵌入 Google Maps 的地图服务应用，并借助 Google Maps 的地图数据为用户提供位置服务。Google Maps API 除了帮助开发者将地图
10、嵌入到 Web应用中之外，还允许开发者利用 JavaScript 脚本进行应用开发拓展，给地图添加标注和路径及其他图层覆盖物，或者响应用户的点击动作，并显示包含内容信息在内的气泡提示窗口。通过 Google Maps为开发者提供的地图 API，可以开发出各种各样有趣的地图 Mash-第 4 页 共 14 页up 应用，还可以将不同地图图层加载到应用中，如卫星影像、根据海拔高度绘制的高山和植被地形图、街道视图等，从而帮助开发者打造个性化的地图应用站点。Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API。该 API 提供了大量实用工具用以处
11、理地图,并通过各种服务向地图添加内容，从而使您能够在您的网站上创建功能全面的地图应用程序。1.2 选择百度地图 API 是为开发者免费提供的一套基于百度地图服务的应用接口，由 JavaScript 语言编写，它能够帮助您在网站中构建功能丰富、交互性强的地图应 用 程 序 。百度地图 API 不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。功能强大，开发过程大大简化，特别是开源库为大家提供更广阔的开发空间。基于网络地图的虚拟校园建设，主要基于 JavaScript 把相关信息以脚本的形式展现到网页中去，人们可以通过域名网址进行访问。百度地图 JavaScript API
12、 是一套由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图 API 不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于 PC 或移动设备端的基于浏览器的开发。JS 版本还为用户开放了开源库，简化开发。比较适用于初级开发者，而且其功能越来越完善，加之，考虑到google 服务器退出大陆地区，其稳定性欠缺，故而选择国内的百度地图 api 中的 JavaScript。1.3 准备工作我们首先了解什么是脚本（JavaScript）,JavaScript 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语
13、言。同时也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，比如响应用户的各种操作。百度地图 api 为用户提供更加简易便捷的 JavaScript 入门和各种实例，给初学者提供更加直第 5 页 共 14 页观的学习资源。在此基础上，我们学习 js 的各种控件、事例、覆盖物、图层、工具和各种服务。在此，我们要有脚本编写软件，对示例代码进行编写和修改调试。与之对应我们要有与百度地图 api 支持兼容的浏览器进行展示 7。2 基于网络地图的虚拟校园建设的技术路线首先利用百度地图 api 中的 JavaScript 提供的示例代码，简单的把百度地图引用到脚本中，再对
14、地图进行代码操作，用添加代码的方法实现地图中地物的显示。这些代码包括控件、覆盖物、事件等，以用于地图大小的显示、缩放、拖拽等，添加覆盖物用于突出地图中的地物，使地物更直观的显现在地图中。本文中所用的覆盖物是用坐标点生成的一个个多边形绘制的地物形状，附之以不同的颜色进而将地表的建筑、街道显示出来。通过标注把主要信息通过红色小水滴标注出来，通过点击小水滴触发事件，从而达到显示信息的效果 8。然后在把脚本做好之后，我们需要把它显示出来，我们通过申请免费空间的方法，通过 ftp 上传软件把我们做好的 html 文件上传到空间中，其他人通过访问主页的形式就可以看到做好的文件。如下图所示：图 1 技术路线
15、图第 6 页 共 14 页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/
16、javascript“ src=“http:/ /版本 1.4第二步：创建地图事例与点坐标并进行地图初始化var map = new BMap.Map(“container“);/创建地图实例 第 7 页 共 14 页var point = new BMap.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 = 第 8 页 共 14 页width : 100, /文本框宽度height: 80, /文本框高度title : “南阳师院“ /文本框标题var infoWindow = new BMap.InfoWindow(“环境科学与旅游学院“, opts); /文本框内容m
18、ap.openInfoWindow(infoWindow,point);如下：图 3 展示了添加的文本信息第四步：根据地物坐标生成多边形来表示地图上的建筑道路等，多边形通过添加覆盖物的形式向地图中添加var map = new BMap.Map(“container“); var point = new BMap.Point(116.404, 39.915); 第 9 页 共 14 页map.centerAndZoom(point, 15); / 添加自定义覆盖物 var mySquare = new SquareOverlay(map.getCenter(), 100, “red“); ma
19、p.addOverlay(mySquare); var 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 = n
20、ew BMap.Polygon(new BMap.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 个多边形覆盖物，多边形各有四个点坐标构成，有代码自动生成多边形，其它的绘制方法同上，此处不再显第 10 页 共 14 页示。效果如下 9：图
21、 4 添加的多边形第五步：向地图中添加标注信息，对每个多边形所标示的建筑物进行命名和注释var map = new BMap.Map(“container“); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var marker = new BMap.Marker(point); /创建标注 map.addOverlay(marker); / 将标注添加到地图中var sContent1 =“科技楼“ + “ + 第 11 页 共 14 页“; / 定义标注尺寸和名称var point =
22、new BMap.Point(112.497662, 32.980972);var marker = new BMap.Marker(point);var infoWindow = new BMap.InfoWindow(sContent1); map.addOverlay(marker);marker.addEventListener(“click“, function() / 设置监听事件this.openInfoWindow(infoWindow);document.getElementById(imgDemo).onload = function ()infoWindow.redraw
23、(); / 信息展示);上图以科技楼为例来说明，增加监听事件，点击自动返回值，其他在此省去，效果如图 10:图 5 点击显示的标注信息4 成果展示第 12 页 共 14 页汇总以上步骤，得到如下成果图示：图 6 最终成果5 结论与展望本文主要是在前人研究的基础进行总结和改进，试图对 js 网络和地理信息技术进行结合，把校园平面信息进行整合展示到网络平台上，并提供信息查询，能够有效地将校园信息的了解范围扩展到最大。由于本人在数据库方面知识有限，并没有结合数据库技术提供更多的信息查询。加之网络取点难度大，所以在地物描绘精度上不是很好，在技术上还需要更大的改进。在当今社会，信息化突飞猛进，网络技术更
24、是一日千里，用好网络这个工具能给我们生活带来无尽的方便，给我们展示网络平台强大的信息量。随着社会的发展，开源逐渐成为一种时尚，自定义让人们的生活更加充满生机。网络虚拟逐渐走入人们的生活，让现实的东西在网络世界里都能找到映像，虚拟校园旨在打造网络的校园平台，丰富我们的生活。在借鉴了 google 地图 api 的基础上，和吸收了国内学者基于百度地图 api 在其他领域的开发经验，给本文的写作提供了有力的指导特别是广东培正学院的梁广荣、黎红的基于百度地图 API 的虚拟校园实 现，让本文的写作有了方向和参考。文中有些不完善的地方还请见谅，由于时间关系建筑物的坐标点只取了 4 个，距离现实还第 13
25、 页 共 14 页有很大差距，信息展示的不是很全面，在虚拟校园的建设上还有很长的路要走。参 考 文 献1 Online baidubaike . 2013-4-1http:/ 梁广荣、黎红等.基于百度地图 API 的虚拟校园实现 J.廊坊师范学院学报，2012 年 12 月 6 日2013-4-1.3杜传明.百度地图 API 在小型地理信息系统中的应用J，2011 年 4 月,2013-4-1.4 赵文雪.百度 MapAPI 在气象自动站监测的应用，2012 年 6 月，2013-4-1.5王红崧、周海晏等.基于百度地图 API 的旅游地理信息系统开发J.现代计算机.2012 年 8 月, 6
26、0-636 Online baidubaike .baidumap api 2013-4-1http:/ 高峰. JavaScript 在基于 SVG 的网络地图中的应用，2004 江西师范大学学报：自然科学版.8 Online 百度地图 api 2013-4-1http:/ Online 百度地图开发指南，覆盖物 http:/ 10 Online 百度地图 api 示例 Demo http:/ construction of digital campus based on web map platform Abstract：Through the construction of digita
27、l 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 effecti
28、veness of management, guarantee the smooth and orderly campus 第 14 页 共 14 页life. In order to provide a broader space for the school in the development of the network, but also provides a good channel for students and the community to understand school.This paper introduces the construction of digita
29、l campus network based on map, the map of API in Baidu show specific application of campus plane map, the use of JavaScript language, add the campus plan and other campus geographic information to the electronic map platform, the realization of digital campus map service, due to some reasons to show the quantity of information is limited, rendering is not very fine.Key words：Baidu map API; digital campus; WebGIS
