校園電子地圖的設計與實現

劉小英

（攀枝花學院數學與計算機學院，四川攀枝花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.