基于地图API的WebGIS课程实验设计

周贵云，刘晓莉

(电子科技大学资源与环境学院，四川 成都 611731)

WebGIS是Internet技术应用于GIS(地理信息系统)开发的产物[1]，随着计算机技术不断得到创新和发展，逐渐成了GIS的重要发展方向。作为GIS技术服务于社会的体现，WebGIS被广泛应用于大众的日常生活中，在农业、林业、气象和环境保护[2－5]等领域，WebGIS技术也得到广泛的应用。

WebGIS课程是GIS及其相关专业课程的重要组成部分。WebGIS技术的不断发展和创新，使得WebGIS课程具有知识更新速度快的特点[6]。同时，WebGIS课程教学涉及较多的计算机和GIS方面的知识，对学生的编程能力有一定的要求。该课程的教学目的是让学生掌握WebGIS的理论知识和核心技术，并具备对WebGIS进行二次开发的能力。纯粹的理论教学，无法实现该课程提高学生实践能力的教学目标。因此，教学过程中，将理论知识教学与课程实验密切结合起来，能够在帮助学生加深对理论知识理解的同时，提升学生的实践能力和提高学生的学习兴趣[7]。

应用程序编程接口API(application programming interface)，是软件平台为程序开发人员提供的一些预先定义的函数，可以被用于调用一组例程功能的时候，无须访问例程的底层代码或理解其内部工作机制的细节而实现相关的功能。地图API能够利用JavaScript语言或其他语言将地图服务嵌入到网页中，并能向地图服务添加各种地图功能，从而在网站上创建功能全面的地图应用。

本文设计了基于两种地图API的WebGIS课程实验，让学生可以根据自身的实验条件，对两种实验方案进行选择性的实现，并在实验过程中进一步学习和掌握Web程序设计基础知识与WebGIS技术相关的理论知识。

1 基于百度地图JavaScript API的实验设计

百度地图JavaScript API是百度向开发人员提供的一套由JavaScript语言编写的、用于Web开发的、免费的应用程序接口，可以帮助开发者在网站中构建功能丰富、交互性强的地图应用[8－9]。百度地图API向用户免费开放，使用百度地图API的二次开发具有开发成本低、维护成本低的特点[10]。

在实验过程中，百度地图JavaScript API能够很容易地被学生获取，并且其对实验平台没有较高的要求，学生可以在没有安装与百度地图相关的软件的情况下，进行WebGIS实验。

该实验目的是让学生在实验过程中，逐渐掌握百度地图JavaScript API的使用方法。在实验中涉及了Web程序设计、HTML基础知识、JavaS-cript语言和WebGIS基础等知识点。学生能够在实验中继续学习和巩固WebGIS课程的知识点，避免了纯理论学习带来的枯燥感。

1.1 地图加载与初始化

百度地图API免费向用户开放，用户只需要向百度申请密钥(AK)，就可以获得无使用次数限制的百度地图API服务。使用

设计Web界面的样式，其中包括设计一个容器(map＿container)来存放地图:

将容器以id为 “map＿container” 的div标签的形式放入

百度地图API以BMap作为命名空间。使用命名空间创建一个地图实例和一个点坐标，其中点坐标的现实地理位置为电子科技大学清水河校区，是地图初始显示的中心点:

初始化地图，并设置地图初始显示级别。百度地图自身有17个级别，其中3～18级共16个级别向开发人员提供。开发人员可以根据实际需求，选择性地设置地图的初始显示级别。在该实验设计中，为了能够直接显示电子科技大学校园范围，将地图初始显示级别设置为第16级:

1.2 地图功能实现

百度地图JavaScript API向开发人员提供了多种构建地图功能的接口。利用这些接口，可以让地图在初始化以后，实现地图缩放、添加地图控件、测距、本地搜索和公交检索等功能。在该实验设计中，要求学生实现地图基本功能、鼠标测距、本地搜索和公交检索4种地图功能应用。

首先，实现地图基本功能:

//添加地图类型控件，实现地图基于2D图、3D图、卫星图的切换

根据需求，向地图中添加测距、本地搜索、公交检索功能:

1.3 界面展示

根据上述介绍的地图功能实现方法，编写基于百度地图JavaScript API的WebGIS应用程序。为了让Web界面更加美观、合理，对Web界面进行了简单的设计和美化，最终实现用户对上述地图功能的访问，如图1所示。

图1 使用百度地图API创建Web地图应用

2 基于ArcGIS API for JavaScript的实验设计方案

ArcGIS API for JavaScript是美国ESRI公司基于dojo框架和REST风格实现的一套编程接口，可以利用 ArcGIS API for JavaScript调用 ArcGIS for Server提供的地图服务，并将其嵌入到Web应用中，实现快速创建交互式的Web地图应用[11－12]。

ArcGIS软件系列是高校中主流的地理信息系统实验软件，GIS及其相关专业的学生对该软件系列具有一定的熟悉程度。ArcGIS API for JavaScript作为ArcGIS系列中的一个组成部分，能够较快地被学生所熟悉。

该实验的目的是让学生在实验过程中，掌握基于 ArcGIS API for JavaScript的 WebGIS开发的能力。

2.1 制作电子地图

从Google Maps中获取电子科技大学清水河校区范围内的高分辨率遥感影像。在ArcMap中对影像进行矢量化，制作完成电子科技大学校园电子地图，如图2所示。

图2 电子科技大学电子地图

2.2 ArcGIS for Server发布电子地图

电子地图制作完成后，需要使用ArcGIS Server将其发布成为GIS服务，服务支持两种类型的服务接口，分别是SOAP API和REST API。ArcGIS API for JavaScript能够访问来自于REST API的GIS服务。REST API具有结构简单、访问方便的特点，其基本格式为:

http://主机名:端口号/arcgis/rest/services/服务名/MapServer

2.3 创建Web地图应用

创建一个HTML页面，向页面中添加引用。ArcGIS API for JavaScript的引用方式分为在线引用和基于本地部署的引用。在线引用的优点在于使用方法简单，缺点在于当处于离线或网络不稳定时，会存在无法访问或访问速度较慢的问题；基于本地部署的引用优点在于可以在不连接互联网的情况下，进行局域网内的访问，缺点是与在线引用相比，增加了本地部署的过程。为了简化实验过程，本实验使用在线引用方法:

设置Web界面样式，为地图创建一个容器(map)，然后将ArcGIS for Server中发布的地图加载到界面上:

根据实验目的和用户需求，在界面中为地图添加相应的功能:

向地图应用中添加导航功能和绘图功能。

2.4 界面展示

编写基于ArcGIS API for JavaScript的WebGIS应用程序，实现上述功能，如图3所示。

3 结束语

本文为WebGIS教学提供了两种基于不同的地图服务平台的实验设计方案。

基于百度地图JavaScript API的实验具有服务平台和开发平台易于获取、实验过程易于实现的特点。学生可以在课后根据个人兴趣进行WebGIS设计与开发。这不仅能提高学生的学习兴趣，还能让学生在实验过程中提高WebGIS开发能力。

基于ArcGIS API for JavaScript的实验，是在GIS专业主要的教学软件ArcGIS上实现的。该实验能够将ArcGIS软件系列的重要功能联系起来，让学生在学习WebGIS技术的同时，学习与该实验相关的ArcGIS的知识，扩展学生的知识面。

[1]宋关福，钟耳顺，王尔琪.WebGIS——基于Internet的地理信息系统[J].中国图像图形学报，1998，3(3):251－254.

[2]吴建军，段淑敏.嵌入WebGIS的农产品电子商务系统研究[J].物流技术，2015，34(5):270－273.

[3]徐艳，尹黎明，潘剑君.基于WebGIS的森林资源管理信息系统的设计与实现——以安徽滁州管店林场为例[J].安徽农业科学，2015，43(21):361－363.

[4]李军虎.基于WEBGIS的宝丰县气象服务业务平台的设计与实现[D].成都:电子科技大学，2014.

[5]贾卓，汤友华，李秀，等.基于WebGIS的入海排污口信息管理系统的设计与实现[J].海洋技术学报，2016， 35(2):38－45.

[6]黄华国，张晓丽.WebGIS课程教学模式构建[J].中国林业教育，2008，26(5):4－7.

[7]武澎，杨扬.计算机课程中任务驱动教学法的应用研究[J].电脑知识与技术，2010，6(16):4591－4592.

[8]贾振，韩印.基于百度地图API的智能交通信息展示[J].物流工程与管理，2016，38(7):211－213.

[9]谢党恩，顿贝贝，张志立.基于百度地图API的校内路径导航系统的实现[J].许昌学院学报，2014，33(2):78－81.

[10]程彬，段浩宇，董炜华.基于百度地图API的购房平台系统开发[J].长春师范学院学报 (自然科学版)，2014，33(4):86－90.

[11]李道震，张长生，强小俊，等.基于Arc GIS Server的高铁基础设施安全监测管理系统研究[J].测绘工程，2016，25(6):70－75.

[12]王海鹰，赵如意.基于WebGIS的数字校园地图设计与实现[J].软件导刊，2015，14(11):71－74.