1、 第 1 页 共 14 页 基于网上电子地图平台的数字校园建设 摘要 ： 通过 网上电子地图平台的 数字 校园建设能够将校园各项信息在网络上进行展示，使有关信息得到及时的传达和显示，为宣传和增加学校知名度提供平台，同时简化校园管理难度，增加管理的有效性，保障校园各项生活平稳有序进行 ， 从而为学校 在网络上 的发 展提供了更广阔的天地，也为学生和社会各界了解学校提供了很好的通道。 本文 介绍了基于网络地图的数字校园建设，阐述了百度地图 API 在展示校园平面图方面的具体应用，使用 JavaScript 语言，将校园的平面图等校园地理信息添加到电子地图平台 上，实现数字校园地图服务 。目前的展示
2、信息量有限，绘制 还 不是很精细 ，需要进一步的完善 。 关键词： 百度地图 API； 数字校园 ； WebGIS； 网上电子地图 0 引 言 数字校园建设有很早的历史，最早始于美国 克莱蒙特 大学教授凯尼斯 格林 (Kenneth Green)发起并主持的一项名为 “ 信息化校园计划 ” 的大型科研项目。我国高等学校大规模的信息化建设大多从20 世纪 90 年代开始，并得到快速发展，在 “ 面向 21 世纪 教育振兴行动计 划 ” 中提出并强调了要利用信息技术来推进教育的改革。我国 “ 数字校园 ” 就是在这一 教育改革 的理念上提出来的 1。在随后的数字校园建设实践过程中，数字校园的理念得
3、到了逐步扩充和完善。 数字化校园是利用计算机技术、网络技术、 通讯技术 以及科学规范的管理对校园内的教学、科研、管理和生活服务有关的所有信息资源进行整合、集成和全面的数字化，以构成统一的用户管理、统一的资源管理和统一的权限控制；通过组织和 业务流程再造 ，推动学校进行制度创新、管理创新，最终实现教育信息化、决策科学化和管理规范化 1。 随着互联网的迅猛发展，网络已深入社会的方方面面，网络地图作为网络时代的产物为人们的出行、导航、定位等提供了方便快捷的服务，逐渐成为人们生活中不可或缺的产品。基于网络地图的虚拟校园建设能够把握网络发展潮流 ，充分利用网络平台第 2 页 共 14 页 与资源来展示校
4、园，成为宣传和发展校园自身的利器。 本文主要介绍基于百度地图的数字校园地图建设，只对校园交通及平面图进行网络化，以供在互联网上展示和查询，向人们提供校园交通和位置信息，方便我校师生出行和游客游览。 目前我国很多高校都建立起了自己的数字虚拟校园，在基于电子地图平台的校园建设方面却处于起步阶段， 但 前景十分广阔 。为此提供的平台越来越多，国外很多先进技术的引入，及我国近几年互联网技术的突飞猛进，都为虚拟校园建设做出来重要贡献。 目前关于基于百度地图 API 的应用方面的论述不是很 丰富。主要有廊坊师范学院学报出版的广东培正学院的梁广荣、黎红的基于百度地图 API 的虚拟校园实现，主要是把采集到的
5、校园图景通过 flash 处理成全景图页面，以及 3DMax 制作的校园三维地图，通过 JavaScript语言在 HTML 中调用实现的，实现了校园的某一指定地物的全方位可视化，却没有漫游浏览的功效 2。德州房产测绘队的杜传明百度地图API 在小型地理信息系统中的应用，只要是基于百度地图的房产信息的管理、查询与展示，对数据库的要求比较高 3。青岛气象局的赵文雪的百度 MapAPI 在气象自动站监测的应用，主要介 绍了基于公共网络地图的接口实现各气象站气象信息的实时更新，这种构想最大的问题是容易受到网络入侵而影响到整个系统的稳定 4。西南林业大学生态旅游学院的王红 崧、周海晏的基于百度地图 A
6、PI 的旅游地理信息系统开发，主要针对传统 GIS 开发周期长、过程复杂、建设成本高的缺陷，利用百度地图 API 技术建立基于 WebGIS 的旅游信息系统，进行了系统结构设计和数据库的构建，从而实现在互联网上展示旅游信息，对数据库技术的要求高，更需要对数据进行维护、更新 5。 国内关于网络平台的数字校园建设目前正处于成长阶段，数字、3D 技术 等日趋成熟，虚拟校园更加逼真，但也存在很多不足 :数据库技术不成熟，数据量大，处理难度增加。 3D 技术发展有限，实物虚拟数字化达不到应有的水平。我国缺乏 对数据、地理信息、网络技术、虚拟技术等进行融合汇总的 综合性技术人才 。这些严重影响了我国在虚拟
7、校园建设方面的发展。 1 基于网络地图的虚拟校园建设的平台选择 第 3 页 共 14 页 1.1平台比较 百度地图 API 是为开发者免费提供的一套基于百度地图服务的应用接口，包括 JavaScript API、 Web服务 API、 Android SDK、 iOS SDK、定位 SDK、车联网 API、 LBS 云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆 /地理编码、路线规划、 LBS 云存储与检索等功能，适用于 PC 端、移动端、服务器等多种设备，多操作系统下的地图应用开发。百度地图 API 免费对外开放，业已广泛应用互联网、移动设备、车厂等行业，主要涉及房产、电商、团购、
8、移动手机应用、生活服务网站等。主要有搜房、糯米、去哪儿网、百姓网、 12580、酷讯旅游、同程网、途牛旅游网、好大夫在线、豆角网、墨迹天气、食神摇摇等。百度地图宣称百度地图 API 免费对外开放，提供给进行PC 端、移动设备端、服务端的地图应用 开发者。百度地图 API 具有官方网站，使用者最好具有一定编程经验，若毫无开发经验，也可以根据每款产品提供的开发指南进行入门学习。此外，读者若对地图产品有一定的了解，会更容易入门 6。 Google Maps API 是 Google 为开发者提供的 Maps 编程 API。它 允许开 发者在不 必建立 自己的 地图服务 器的情 况下， 将Google
9、Maps 地图数据 嵌入 到网站之中，从而实现嵌入 Google Maps的地图服务应用，并借助 Google Maps 的地图数据为用户提供 位置服务 。 Google Maps API 除了帮助开发者将地图 嵌入 到 Web 应用中之外，还允许开发者利用 JavaScript 脚本 进行应用开发拓展，给地图添加标注和路径及其他图层覆盖物，或者响应用户的点击动作，并显示包含内容信息在内的气泡提示窗口。通过 Google Maps 为开发者提供的地图 API，可以开发出各种各样有趣的地图 Mash-up 应用，还可以将不同地图图层加载到应用中，如 卫星影像 、根据 海拔高度 绘制的高山和植被地
10、形图、街道视图等，从而帮助开发者打造个性化的地图应用站点。 Google 地图 API 是一种通过 JavaScript 将 Google 地图 嵌入 到您的网页的 API。该 API 提供了大量实用工具用以处理地图 ,并通过各种服 务向地图添加内容，从而使您能够在您的网站上创建功能全面的地图 应用程序 。 第 4 页 共 14 页 1.2选择 百度地图 API 是为开发者免费提供的一套基于百度地图服务的应用接口 ， 由 JavaScript 语言编写 ， 它能够帮助您在网站中构建功能丰富、交互性强的地图 应用程序 。百度地图 API 不仅包含构建地图的基本功能接口，还提供 了诸如本地搜索、路
11、线规划等数据服务。功能强大，开发过程大大简化，特别是开源库为大家提供更广阔的开发空间。 基于网络地图的虚拟校园建设，主要基于 JavaScript 把相关信息以脚本的形式展现到 网页中去，人们可以通过域名网址进行访问。百 度地图 JavaScript API 是一套由 JavaScript语言编写的 应用程序接口 ，它能够帮助您在网站中构建功能丰富、交互性强的地图 应用程序 。百度地图 API 不仅包含构建地 图 的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于 PC 或移动设备端的基于浏览器的开发。 JS 版本还为用户开放了开源库，简化开发。 比较适用于初级开发者，而且其功能
12、越来越完善，加之，考虑到 google 服务器退出大陆地区，其稳定性欠缺，故而选择国内的百度地图 api 中的JavaScript。 1.3 准备工作 我们首先了解什么是脚本（ JavaScript） ,JavaScript 是一种基于对象 和 事件驱动 并具有相对安全性的客户端 脚本 语言。同时也是一种广泛用于客户端 Web 开发的脚本语言，常用来给 HTML 网页添加动态功能，比如响应用户的各种操作 。百度地图 api 为用户提供更加简易便捷的 JavaScript 入门和各种实例，给初学者提供更加直观的学习资源。在此基础上，我们学习 js 的各种控件、事例、覆盖物、图层、工具和各种服务。
13、在此，我们要有脚本编写软件，对示例代码进行编写和修改调试。与之对应我们要有与百度地图 api 支持兼容的浏览器进行展示 7。 2 基于网络地图的虚拟校园建设的 技术路线 首先利用百度地图 api 中的 JavaScript 提供的示例代码，简单的第 5 页 共 14 页 把百度地图引用到脚本中，再对地图进行代码操作， 用添加代码的方法实现地图中地物的显示。这些代码包括控件、覆盖物、事件等，以用于地图大小的显示、缩放、拖拽等，添加覆盖物用于突出地图中的地物，使地物更直观的显现在地图中。本文中所用的覆盖物是用坐标点生成的一个个多边形绘制的地物形状，附之以不同的颜色进而将地表的建筑、街道显示出来。通
14、过标注把主要信息通过红色小水滴标注出来，通过点击小水滴触发事件，从而达到显示信息的效果 8。 然后在把脚本做好之后，我们需要把它显示出来，我们通过申请免费空间的方法，通过 ftp 上传软件把我们做好的 html 文件上传到空间中， 其他人通过访问主页的形式就可以看到做好的文件。 如下 图所示 ： 图 1 技术 路线图 3 基于网络地图的虚拟校园建设的具体 实现 3.1 代码引用编写与修改调试 第一步：引用百度地图最新版本 1.4，并自定义地图大小尺寸 定义尺寸 第 6 页 共 14 页 body, html,#allmap width: 100%;height: 100%;overflow:
15、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/javascript“ src=“http:/ /版本 1.4 第二步：创建地图事例与点坐标并进行地图初始化 var map = new BMap.Map(“container“);/创建地图实例 var point = new BMap.Point(116.4
16、04, 39.915);/创建点坐标 map.centerAndZoom(point, 15); / 初始化地图，设置中心点坐 标和地图级别 BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必 须经过初始化才可以执行其他操作。 之后我们可以增加一个监听事件，而且可以设置返回值，此处增加返回坐标信息 第 7 页 共 14 页 map.addEventListener(“click“,function(e) alert(e.point.lng + “,“ + e.point.lat); ); 以上做完 ， 返回坐标值 ， 其效果如下： 图 2 监听事件对点击
17、触发的回应 第三步：增加文本信息窗口并加载显示，可以设置窗口的大小和要显示的信息 var opts = width : 100, /文本框宽度 height: 80, /文本框高度 title : “南阳师院 “ /文本框标题 var infoWindow = new BMap.InfoWindow(“环境科学与旅游学院 “, opts); /文本框内容 第 8 页 共 14 页 map.openInfoWindow(infoWindow,point); 如下： 图 3 展示了添加的文本信息 第四步：根据地物坐标生成多边形来表示地图上的建筑道路等，多边形通过添加覆盖物的形式向地图中添加 var
18、 map = new BMap.Map(“container“); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); / 添加自定义覆盖物 var mySquare = new SquareOverlay(map.getCenter(), 100, “red“); map.addOverlay(mySquare); var polygon = new BMap.Polygon( /添加多边形 new BMap.Point(112.497061,32.980949), /添加 多边形 坐标点 第
19、9 页 共 14 页 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.982735), n
20、ew BMap.Point(112.497455,32.981448), new BMap.Point(112.496386,32.98135) , strokeColor:“blue“, strokeWeight:3, strokeOpacity:0.5); 现在向地图中添加 2 个多边形覆盖物， 多边形各有四个点坐标构成，有代码自动生成多边形，其它的绘制方法同上，此处不再显示。 效果如下 9： 第 10 页 共 14 页 图 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 = “科技楼 “ + “ + “; / 定义标注尺寸和名称 var point = new BMap.Point(112.497662, 32.980972);
