校园电子地图的设计与实现

刘小英

（攀枝花学院数学与计算机学院，四川攀枝花617000）

校园电子地图的设计与实现

刘小英

（攀枝花学院数学与计算机学院，四川攀枝花617000）

针对已有主流地理信息系统平台存在价格昂贵、且对开发者技术要求高等局限性，采用地图搜索引擎提供的API，结合JSP与JavaScript技术，根据学校的地理结构，设计开发了校园在线电子地图。实现了校园地图显示、建筑物快速定位，到校公交线路查询，建筑物管理等功能。结果表明，电子地图方便了广大师生及来访人员熟悉学校环境，快速信息查询，满足了管理者对校园基础信息管理的需求。

计算机应用技术；电子地图；JSP；API

随着各大高校的扩招，校区不断扩建，校园建筑日益增加，高校教学楼、宿舍楼、实验楼、食堂及教师家属楼四处林立，给新生及家长或来访人员带来不便，为方便不熟悉校园人员能够快速获取校园地理信息，便于学校进行管理，开发校园地图服务系统是最行之有效的途径。

目前，很多学校都在致力于这一研究，有的使用WebGIS进行地图开发［1_4］，特点是操作简单、表现直观、维护简易、交互性强；有的采用地图API开发［5_8］，为其他技术提供了API接口，便于用户自行开发地图服务。以攀枝花学院为研究样本的校园电子地图以在线地图搜索引擎为基础，建立相关应用数据库及数据服务器，设计出方便易用的客户端界面，通过调用地图API实现电子地图的各种交互功能。

1　技术路线

设计在技术上采用百度地图提供的API与第三方数据相结合实现了局域在线地图服务［9_14］。调用百度地图API完成校园的基本轮廓，以及平移、缩放、鹰眼、比例尺等功能；使用JSP进行页面的展示；JavaScript主要用于调用百度地图API，并实现提示信息等功能；MySQL数据库用来存储建筑物相关信息，包括建筑物的空间数据及属性数据，以保证校园建筑的动态规划；TomCat做为整个系统的服务器，用于发布校园电子地图系统。

2　功能设计与实现

为使地图操作简单、互动性强且美观大方，地图主界面上设置了主页、地图展示页面、建筑物管理页面跳转菜单，根据用户操作转向对应功能区。整体设计如图1所示。

图1　整体设计

2.1地图浏览功能

点击主界面菜单栏的地图展示，即可进入地图浏览功能模块。地图浏览功能模块是本次设计中的一个重要模块，该模块页面包括：地图展示区、标签区、查询区、到校公交路线查询功能。

2.1.1地图展示区

地图展示区是页面的主要的区域，用于显示出整个校园的轮廓、主要道路、建筑物等，其中包括缩放平移按钮、比例尺、地图展示类型以及鹰眼视图，如图2所示。

图2　地图展示区

这部分利用JSP内嵌百度地图API的方式实现地图信息的基本浏览功能。地图中，各个主要建筑物位置通过添加文字标注显示其具体名称，文字标注上通过加入超链接来显示出建筑物图片及文字信息。

左上角的图标是缩放平移图标，主要用于地图的放大、缩小以及拖动地图进行平移；比例尺用于显示当前级别下的地图比例尺；地图展示类型如图中右上角所示，可以选择地图以平面图或卫星图来显示。鹰眼图是GIS中的一个基本功能，它可以从俯视图的角度展示地图框中显示部分地图在整体地图中所处位置。鹰眼导航功能中的导航窗口相当于整个地图的一个缩略图，能查看整个地图及为地图导航，并快速定位地图具体区域，如图2中右下角方框所示。实现时只要添加鹰眼图控件即可。添加代码为：map.addContro1（new BMap. OverviewMapContro1（）。

2.1.2标签区

由于建筑物功能的不同，所以将每个建筑物分别冠以不同的标签，设计将所有建筑物划分为5大标签，包括办公地点、教学区域、文体活动、学生公寓以及后勤服务，单击任何一个标签，即可在地图中显示属于该标签的所有建筑物。实现主要原理：在点击某一标签之后，系统会将该标签的值传入到后台，通过相应的Serv1et和Mapdao中的方法，在数据库中查询出数据，并将这些数据返回到前台，最终显示在界面上。主要代码如下：

String 1abe1=new String（request.getParameter（″1abe1″）. getBytes（″iso_8859_1″），″UTF_8″）j

List＜Map＞m1=new ArrayList＜Map＞（）j

m1=MapDao.getMapByLabe1（1abe1）j

request.setAttribute（″m1″，m1）j

request.getRequestDispatcher（″page/map.jsp″）.forward（request，response）j

2.1.3查询区

查询建筑物所在地理位置，是校园电子地图的另一个便利之处，根据建筑物名称的不同，每次正确输入建筑物名称之后，即可在地图上快速定位到该建筑，如图3所示，在左侧查询区输入“羽毛球场”后，地图中用黑框显示了羽毛球场的具体位置。

图3　查询羽毛球场的结果

查询区是根据用户输入的建筑物名称，将该值传入到后台，通过在数据库中的查找，找到相对应的数据，返回并显示在页面上。主要代码如下：

String tit1e=request.getParameter（″tit1e″）j

List＜Map＞m1=new ArrayList＜Map＞（）j

m1=MapDao.getMapByTit1e（tit1e）j

request.setAttribute（″m1″，m1）j

request.getRequestDispatcher（″page/map.jsp″）.forward （request，response）j

2.1.4到校公交路线

到校公交路线用于帮助刚到攀枝花学院或者不熟悉攀枝花公交路线的访客快速查询公交线路，在该页面中，输入起点，点击查询，即可快速显示出相关路线，如图4所示，输入起点“攀枝花火车站”，点击查询即可显示出6种乘坐公交的线路方案，并且在每一种方案最上方，统计了距离及历经时长。

到校公交路线查询主要实现代码：

图4　到校公交路线查询

//创建地图容器

var map=new BMap.Map（″container″）j

//初始化地图

map.centerAndZoom（newBMap.Point （101.733822，26.573553），16）j

//添加平移缩放控件

map.addContro1（new BMap.NavigationContro1（）j

//添加比例尺控件

map.addContro1（newBMap.Sca1eContro1（｛anchor：BMAP_ANCHOR_TOP_LEFT｝）j

//启用滚轮放大缩小

map.enab1eScro11Whee1Zoom（）j

//构造一个查询

var 1oca1=new BMap.Loca1Search（map，｛onSearchComp1ete：searchComp1ete｝）j

1oca1.search（″攀枝花学院″）j

var transit=new BMap.TransitRoute（map，｛renderOptions：｛map：map，pane1：″resu1ts″｝｝）j

//定义查询

function bus_end（）｛

transit.search（document.getE1ementById（″point_end″）. va1ue，thisPoint）j

｝

2.2建筑物管理功能模块

点击主界面菜单栏的建筑物管理，即可进入到建筑物管理模块。在地图浏览功能模块中，地图上的所有建筑物都是通过该模块进行管理的。其中包括建筑信息列表、建筑物详情展示、添加建筑物、修改建筑物和删除建筑物。

建筑物信息列表是将所有的建筑物名称按照分类标签分别显示出来，如标签办公地点、教学区域、学生公寓等，标签上方有“添加建筑物”按钮，通过此按钮可以添加建筑物的名称、标签、坐标点、图标、实景图片和建筑物描述信息。点击标签下的建筑物名称，即可进入到建筑物详情展示页面中，在该页面，可以看到建筑物的实景图片、建筑物名称和建筑物描述，如图5为学生会堂详情。

该功能是从数据库中读取建筑物的相关信息，依次显示

出来，主要实现代码如下：

int id=Integer.parseInt（request.getParameter（″id″）j

List＜Map＞m1=new ArrayList＜Map＞（）j

m1=MapDao.getMapByID（id）j

request.setAttribute（″m1″，m1）j

request.getRequestDispatcher（″page/mapShow.jsp″）.forward（request，response）j

在右方建筑物名称和描述页面，点击修改按钮，可以修改建筑物的名称、标签、坐标点、图标、实景图片和建筑物描述；点击删除按钮，可以删除对应的信息。

图5　学生会堂详情

3　结论

基于地图搜索引擎提供的API，根据学校的地理结构，设计开发了校园在线电子地图，使用地图API与第三方数据相结合实现局域在线地图服务。地图为访客提供学校整体布局信息，便于建筑物、公交信息查询，也为学校管理者提供学校规划情况及建筑物管理功能，有利于学校规划建设，为学校带来更多更好的社会效益。

［1］黄露，谢忠，罗显刚.感知校园服务平台的设计与实现［J］.测绘科学，2015，40（9）：69_73.

［2］王红崧，周海晏.基于WebGIS和虚拟现实的旅游信息系统设计与实现［J］.桂林理工大学学报，2014，34（2）：355_359.

［3］朱丽萍，李洪奇，杜萌萌，等.基于WebGL的三维WebGis场景实现［J］.计算机工程与设计，2014，35（10）：3645_3650.

［4］姬英杰，徐鹏，杨怀卿.基于ArcGIS F1ex API的校园电子地图研究与实现［J］.微型机与应用，2014，33（7）：74_76，79.

［5］程钢，梁晓莉，张得群，等.基于地图API的校园在线电子地图设计与实现［J］.测绘工程，2014，23（1）：5_10

［6］刘丽军，蔡金锭，江修波，等.基于Goog1e地图API的典型供电模型实用化配置研究［J］.福州大学学报：自然科学版，2014，42（5）：719_725.

［7］吴肖，彭璇，朱明磊.基于Goog1e Map API的校园电子地图开发［J］.测绘工程，2010，19（3）：35_38.

［8］彭璇，吴肖.Goog1e Map API在网络地图服务中的应用［J］.测绘信息与工程，2010，35（1）：25_27.

［9］陈育春.Goog1e Maps API开发大全［M］.北京：机械工业出版社，2010.

［10］刘光，曾敬文，曾庆丰.Web GIS从基础到开发实践（基于ArcGIS API for JavaScript）［M］.北京：清华大学出版社，2015.

［11］王小龙，刘光明，赵志威.基于ExtJs的集群作业调度策略配置系统的设计与实现［J］.工业仪表与自动化装置，2015 （3）：22_27.

［12］龚成莹，曹博.基于智能终端的城市照明管理系统设计与实现［J］.工业仪表与自动化装置，2013（5）：100_102.

［13］张志，勋王娟，何辉.基于Goog1e Maps的甘肃旅游景点Web GIS构建［J］.工业仪表与自动化装置，2013（6）：69_71.

［14］吕佩吾，张丽静，李嘉，等.级信息监控系统的B/S化实现［J］.陕西电力，2014（6）：34_37，54.

Deslgn and lmPlementatlon of camPus electronlc maP

LIU Xiao_ying
（School of Mathematics and Computer Science，Panzhihua University，Panzhihua 617000，China）

The current mainstream geographica1 information systems p1atforms have the disadvantages of high cost and strict demanding of deve1opers'ski11.Aiming at these 1imitations，an on1ine e1ectronic campus map based on the API provided by map search engine and using JSP and JavaScript techno1ogy is designed in this paper.The on1ine e1ectronic map，which con

computer app1ication techno1ogy；e1ectronic map；JSP；API

TN391

A

1674_6236（2016）10_0049_03

2015_10_19稿件编号：201510122

四川省教育厅2013年度科研计划自然科学项目（13ZA0309）

刘小英（1980—），女，新疆呼图壁人，硕士，讲师。研究方向：计算机应用技术。

cerning the geographica1 structure of campus，achieves the functions of campus map disp1aying，fast bui1ding 1ocating，bus routes querying，and structure management.According to the simu1ation resu1ts，this e1ectronic map can offering conveniences for teachers，students，and visitors who need to fami1iar with the campus environment and rapid1y search information，at the same time，meet the requirements of administrators to obtain the basic information.