校園電子地圖的設(shè)計(jì)與實(shí)現(xiàn)

劉小英

（攀枝花學(xué)院數(shù)學(xué)與計(jì)算機(jī)學(xué)院，四川攀枝花617000）

校園電子地圖的設(shè)計(jì)與實(shí)現(xiàn)

劉小英

（攀枝花學(xué)院數(shù)學(xué)與計(jì)算機(jī)學(xué)院，四川攀枝花617000）

針對(duì)已有主流地理信息系統(tǒng)平臺(tái)存在價(jià)格昂貴、且對(duì)開發(fā)者技術(shù)要求高等局限性，采用地圖搜索引擎提供的API，結(jié)合JSP與JavaScript技術(shù)，根據(jù)學(xué)校的地理結(jié)構(gòu)，設(shè)計(jì)開發(fā)了校園在線電子地圖。實(shí)現(xiàn)了校園地圖顯示、建筑物快速定位，到校公交線路查詢，建筑物管理等功能。結(jié)果表明，電子地圖方便了廣大師生及來(lái)訪人員熟悉學(xué)校環(huán)境，快速信息查詢，滿足了管理者對(duì)校園基礎(chǔ)信息管理的需求。

計(jì)算機(jī)應(yīng)用技術(shù)；電子地圖；JSP；API

隨著各大高校的擴(kuò)招，校區(qū)不斷擴(kuò)建，校園建筑日益增加，高校教學(xué)樓、宿舍樓、實(shí)驗(yàn)樓、食堂及教師家屬樓四處林立，給新生及家長(zhǎng)或來(lái)訪人員帶來(lái)不便，為方便不熟悉校園人員能夠快速獲取校園地理信息，便于學(xué)校進(jìn)行管理，開發(fā)校園地圖服務(wù)系統(tǒng)是最行之有效的途徑。

目前，很多學(xué)校都在致力于這一研究，有的使用WebGIS進(jìn)行地圖開發(fā)［1_4］，特點(diǎn)是操作簡(jiǎn)單、表現(xiàn)直觀、維護(hù)簡(jiǎn)易、交互性強(qiáng)；有的采用地圖API開發(fā)［5_8］，為其他技術(shù)提供了API接口，便于用戶自行開發(fā)地圖服務(wù)。以攀枝花學(xué)院為研究樣本的校園電子地圖以在線地圖搜索引擎為基礎(chǔ)，建立相關(guān)應(yīng)用數(shù)據(jù)庫(kù)及數(shù)據(jù)服務(wù)器，設(shè)計(jì)出方便易用的客戶端界面，通過(guò)調(diào)用地圖API實(shí)現(xiàn)電子地圖的各種交互功能。

1　技術(shù)路線

設(shè)計(jì)在技術(shù)上采用百度地圖提供的API與第三方數(shù)據(jù)相結(jié)合實(shí)現(xiàn)了局域在線地圖服務(wù)［9_14］。調(diào)用百度地圖API完成校園的基本輪廓，以及平移、縮放、鷹眼、比例尺等功能；使用JSP進(jìn)行頁(yè)面的展示；JavaScript主要用于調(diào)用百度地圖API，并實(shí)現(xiàn)提示信息等功能；MySQL數(shù)據(jù)庫(kù)用來(lái)存儲(chǔ)建筑物相關(guān)信息，包括建筑物的空間數(shù)據(jù)及屬性數(shù)據(jù)，以保證校園建筑的動(dòng)態(tài)規(guī)劃；TomCat做為整個(gè)系統(tǒng)的服務(wù)器，用于發(fā)布校園電子地圖系統(tǒng)。

2　功能設(shè)計(jì)與實(shí)現(xiàn)

為使地圖操作簡(jiǎn)單、互動(dòng)性強(qiáng)且美觀大方，地圖主界面上設(shè)置了主頁(yè)、地圖展示頁(yè)面、建筑物管理頁(yè)面跳轉(zhuǎn)菜單，根據(jù)用戶操作轉(zhuǎn)向?qū)?yīng)功能區(qū)。整體設(shè)計(jì)如圖1所示。

圖1　整體設(shè)計(jì)

2.1地圖瀏覽功能

點(diǎn)擊主界面菜單欄的地圖展示，即可進(jìn)入地圖瀏覽功能模塊。地圖瀏覽功能模塊是本次設(shè)計(jì)中的一個(gè)重要模塊，該模塊頁(yè)面包括：地圖展示區(qū)、標(biāo)簽區(qū)、查詢區(qū)、到校公交路線查詢功能。

2.1.1地圖展示區(qū)

地圖展示區(qū)是頁(yè)面的主要的區(qū)域，用于顯示出整個(gè)校園的輪廓、主要道路、建筑物等，其中包括縮放平移按鈕、比例尺、地圖展示類型以及鷹眼視圖，如圖2所示。

圖2　地圖展示區(qū)

這部分利用JSP內(nèi)嵌百度地圖API的方式實(shí)現(xiàn)地圖信息的基本瀏覽功能。地圖中，各個(gè)主要建筑物位置通過(guò)添加文字標(biāo)注顯示其具體名稱，文字標(biāo)注上通過(guò)加入超鏈接來(lái)顯示出建筑物圖片及文字信息。

左上角的圖標(biāo)是縮放平移圖標(biāo)，主要用于地圖的放大、縮小以及拖動(dòng)地圖進(jìn)行平移；比例尺用于顯示當(dāng)前級(jí)別下的地圖比例尺；地圖展示類型如圖中右上角所示，可以選擇地圖以平面圖或衛(wèi)星圖來(lái)顯示。鷹眼圖是GIS中的一個(gè)基本功能，它可以從俯視圖的角度展示地圖框中顯示部分地圖在整體地圖中所處位置。鷹眼導(dǎo)航功能中的導(dǎo)航窗口相當(dāng)于整個(gè)地圖的一個(gè)縮略圖，能查看整個(gè)地圖及為地圖導(dǎo)航，并快速定位地圖具體區(qū)域，如圖2中右下角方框所示。實(shí)現(xiàn)時(shí)只要添加鷹眼圖控件即可。添加代碼為：map.addContro1（new BMap. OverviewMapContro1（）。

2.1.2標(biāo)簽區(qū)

由于建筑物功能的不同，所以將每個(gè)建筑物分別冠以不同的標(biāo)簽，設(shè)計(jì)將所有建筑物劃分為5大標(biāo)簽，包括辦公地點(diǎn)、教學(xué)區(qū)域、文體活動(dòng)、學(xué)生公寓以及后勤服務(wù)，單擊任何一個(gè)標(biāo)簽，即可在地圖中顯示屬于該標(biāo)簽的所有建筑物。實(shí)現(xiàn)主要原理：在點(diǎn)擊某一標(biāo)簽之后，系統(tǒng)會(huì)將該標(biāo)簽的值傳入到后臺(tái)，通過(guò)相應(yīng)的Serv1et和Mapdao中的方法，在數(shù)據(jù)庫(kù)中查詢出數(shù)據(jù)，并將這些數(shù)據(jù)返回到前臺(tái)，最終顯示在界面上。主要代碼如下：

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查詢區(qū)

查詢建筑物所在地理位置，是校園電子地圖的另一個(gè)便利之處，根據(jù)建筑物名稱的不同，每次正確輸入建筑物名稱之后，即可在地圖上快速定位到該建筑，如圖3所示，在左側(cè)查詢區(qū)輸入“羽毛球場(chǎng)”后，地圖中用黑框顯示了羽毛球場(chǎng)的具體位置。

圖3　查詢羽毛球場(chǎng)的結(jié)果

查詢區(qū)是根據(jù)用戶輸入的建筑物名稱，將該值傳入到后臺(tái)，通過(guò)在數(shù)據(jù)庫(kù)中的查找，找到相對(duì)應(yīng)的數(shù)據(jù)，返回并顯示在頁(yè)面上。主要代碼如下：

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到校公交路線

到校公交路線用于幫助剛到攀枝花學(xué)院或者不熟悉攀枝花公交路線的訪客快速查詢公交線路，在該頁(yè)面中，輸入起點(diǎn)，點(diǎn)擊查詢，即可快速顯示出相關(guān)路線，如圖4所示，輸入起點(diǎn)“攀枝花火車站”，點(diǎn)擊查詢即可顯示出6種乘坐公交的線路方案，并且在每一種方案最上方，統(tǒng)計(jì)了距離及歷經(jīng)時(shí)長(zhǎng)。

到校公交路線查詢主要實(shí)現(xiàn)代碼：

圖4　到校公交路線查詢

//創(chuàng)建地圖容器

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

//構(gòu)造一個(gè)查詢

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

1oca1.search（″攀枝花學(xué)院″）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建筑物管理功能模塊

點(diǎn)擊主界面菜單欄的建筑物管理，即可進(jìn)入到建筑物管理模塊。在地圖瀏覽功能模塊中，地圖上的所有建筑物都是通過(guò)該模塊進(jìn)行管理的。其中包括建筑信息列表、建筑物詳情展示、添加建筑物、修改建筑物和刪除建筑物。

建筑物信息列表是將所有的建筑物名稱按照分類標(biāo)簽分別顯示出來(lái)，如標(biāo)簽辦公地點(diǎn)、教學(xué)區(qū)域、學(xué)生公寓等，標(biāo)簽上方有“添加建筑物”按鈕，通過(guò)此按鈕可以添加建筑物的名稱、標(biāo)簽、坐標(biāo)點(diǎn)、圖標(biāo)、實(shí)景圖片和建筑物描述信息。點(diǎn)擊標(biāo)簽下的建筑物名稱，即可進(jìn)入到建筑物詳情展示頁(yè)面中，在該頁(yè)面，可以看到建筑物的實(shí)景圖片、建筑物名稱和建筑物描述，如圖5為學(xué)生會(huì)堂詳情。

該功能是從數(shù)據(jù)庫(kù)中讀取建筑物的相關(guān)信息，依次顯示

出來(lái)，主要實(shí)現(xiàn)代碼如下：

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

在右方建筑物名稱和描述頁(yè)面，點(diǎn)擊修改按鈕，可以修改建筑物的名稱、標(biāo)簽、坐標(biāo)點(diǎn)、圖標(biāo)、實(shí)景圖片和建筑物描述；點(diǎn)擊刪除按鈕，可以刪除對(duì)應(yīng)的信息。

圖5　學(xué)生會(huì)堂詳情

3　結(jié)論

基于地圖搜索引擎提供的API，根據(jù)學(xué)校的地理結(jié)構(gòu)，設(shè)計(jì)開發(fā)了校園在線電子地圖，使用地圖API與第三方數(shù)據(jù)相結(jié)合實(shí)現(xiàn)局域在線地圖服務(wù)。地圖為訪客提供學(xué)校整體布局信息，便于建筑物、公交信息查詢，也為學(xué)校管理者提供學(xué)校規(guī)劃情況及建筑物管理功能，有利于學(xué)校規(guī)劃建設(shè)，為學(xué)校帶來(lái)更多更好的社會(huì)效益。

［1］黃露，謝忠，羅顯剛.感知校園服務(wù)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)［J］.測(cè)繪科學(xué)，2015，40（9）：69_73.

［2］王紅崧，周海晏.基于WebGIS和虛擬現(xiàn)實(shí)的旅游信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.桂林理工大學(xué)學(xué)報(bào)，2014，34（2）：355_359.

［3］朱麗萍，李洪奇，杜萌萌，等.基于WebGL的三維WebGis場(chǎng)景實(shí)現(xiàn)［J］.計(jì)算機(jī)工程與設(shè)計(jì)，2014，35（10）：3645_3650.

［4］姬英杰，徐鵬，楊懷卿.基于ArcGIS F1ex API的校園電子地圖研究與實(shí)現(xiàn)［J］.微型機(jī)與應(yīng)用，2014，33（7）：74_76，79.

［5］程鋼，梁曉莉，張得群，等.基于地圖API的校園在線電子地圖設(shè)計(jì)與實(shí)現(xiàn)［J］.測(cè)繪工程，2014，23（1）：5_10

［6］劉麗軍，蔡金錠，江修波，等.基于Goog1e地圖API的典型供電模型實(shí)用化配置研究［J］.福州大學(xué)學(xué)報(bào)：自然科學(xué)版，2014，42（5）：719_725.

［7］吳肖，彭璇，朱明磊.基于Goog1e Map API的校園電子地圖開發(fā)［J］.測(cè)繪工程，2010，19（3）：35_38.

［8］彭璇，吳肖.Goog1e Map API在網(wǎng)絡(luò)地圖服務(wù)中的應(yīng)用［J］.測(cè)繪信息與工程，2010，35（1）：25_27.

［9］陳育春.Goog1e Maps API開發(fā)大全［M］.北京：機(jī)械工業(yè)出版社，2010.

［10］劉光，曾敬文，曾慶豐.Web GIS從基礎(chǔ)到開發(fā)實(shí)踐（基于ArcGIS API for JavaScript）［M］.北京：清華大學(xué)出版社，2015.

［11］王小龍，劉光明，趙志威.基于ExtJs的集群作業(yè)調(diào)度策略配置系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)［J］.工業(yè)儀表與自動(dòng)化裝置，2015 （3）：22_27.

［12］龔成瑩，曹博.基于智能終端的城市照明管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.工業(yè)儀表與自動(dòng)化裝置，2013（5）：100_102.

［13］張志，勛王娟，何輝.基于Goog1e Maps的甘肅旅游景點(diǎn)Web GIS構(gòu)建［J］.工業(yè)儀表與自動(dòng)化裝置，2013（6）：69_71.

［14］呂佩吾，張麗靜，李嘉，等.級(jí)信息監(jiān)控系統(tǒng)的B/S化實(shí)現(xiàn)［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稿件編號(hào)：201510122

四川省教育廳2013年度科研計(jì)劃自然科學(xué)項(xiàng)目（13ZA0309）

劉小英（1980—），女，新疆呼圖壁人，碩士，講師。研究方向：計(jì)算機(jī)應(yīng)用技術(shù)。

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.