基于Web APP的校園地理信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

王海穎++樓鋮超++張鵬

摘 要 隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，移動(dòng)端校園信息化產(chǎn)品是高校信息化發(fā)展的必然趨勢(shì)。本文從數(shù)字化校園建設(shè)及應(yīng)用群體的需求出發(fā)，通過(guò)Web APP調(diào)用百度地圖API方式，設(shè)計(jì)了一款校園地理信息系統(tǒng)——“掌上紡服”。

【關(guān)鍵詞】Web APP 百度地圖AngularJS Ajax

1 引言

數(shù)字校園是高校信息化發(fā)展的必然趨勢(shì)，通過(guò)數(shù)字校園建設(shè)，可以快速有效地獲得大量校園信息，并實(shí)現(xiàn)信息之間的交互共享。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，數(shù)據(jù)網(wǎng)絡(luò)傳輸更加快捷，移動(dòng)終端設(shè)備迅速普及。當(dāng)前運(yùn)用移動(dòng)端人均上網(wǎng)時(shí)間已經(jīng)超過(guò)PC端，應(yīng)用程序研發(fā)重心也正由傳統(tǒng)的PC平臺(tái)向智能終端平臺(tái)傾斜。可見(jiàn)，智能終端的發(fā)展正在逐步影響高校數(shù)字化建設(shè)的方式。本文根據(jù)數(shù)字化校園建設(shè)及應(yīng)用群體的需求分析，設(shè)計(jì)并實(shí)現(xiàn)了一款基于Web APP的校園地理信息系統(tǒng)——“掌上紡服”。

2 校園地理信息系統(tǒng)設(shè)計(jì)

鑒于當(dāng)前存在很多新生因?yàn)椴皇煜さ乩憝h(huán)境而導(dǎo)致走錯(cuò)教室、上課遲到等現(xiàn)象，在當(dāng)前新生擁有智能手機(jī)比例已經(jīng)達(dá)到90%以上的今天，為方便學(xué)生盡快熟悉校園地理、盡快適應(yīng)校園生活，設(shè)計(jì)一款能通過(guò)智能手機(jī)方便操作的校園地理信息系統(tǒng)。

Web APP，是運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上，基于網(wǎng)頁(yè)技術(shù)開(kāi)發(fā)實(shí)現(xiàn)特定功能的應(yīng)用，該開(kāi)發(fā)具有跨平臺(tái)的優(yōu)勢(shì)，編寫(xiě)一次、可到處運(yùn)行的移動(dòng)開(kāi)發(fā)方法構(gòu)建的跨平臺(tái)移動(dòng)應(yīng)用程序可以在多個(gè)設(shè)備上運(yùn)行。為了更好的推廣應(yīng)用，選用了Web APP方式進(jìn)行開(kāi)發(fā)，用戶(hù)只需要輸入網(wǎng)址或者掃面二維碼就能夠簡(jiǎn)單方便地使用，同時(shí)Web APP的自適應(yīng)性能夠很好的適應(yīng)不同分辨率的手機(jī)屏幕。

2.1 相關(guān)技術(shù)簡(jiǎn)介

2.1.1 百度地圖API

百度地圖API是為開(kāi)發(fā)者免費(fèi)提供的一套基于百度地圖服務(wù)的應(yīng)用接口，包括JavaScript API、Web服務(wù)API、Android SDK、iOS SDK、定位SDK、車(chē)聯(lián)網(wǎng)API、LBS云等多種開(kāi)發(fā)工具與服務(wù)。其中百度地圖JavaScript API是一套由JavaScript語(yǔ)言編寫(xiě)的應(yīng)用程序接口，不僅包含構(gòu)建地圖的基本功能接口，還提供了諸如本地搜索、路線(xiàn)規(guī)劃等數(shù)據(jù)服務(wù)。適用于PC或移動(dòng)設(shè)備端的基于瀏覽器的開(kāi)發(fā)。

2.1.2 AngularJS

AngularJS是一款由Google公司開(kāi)發(fā)的前端JS框架。AngularJS支持單頁(yè)動(dòng)態(tài)應(yīng)用程序的開(kāi)發(fā)，簡(jiǎn)化了開(kāi)發(fā)過(guò)程及測(cè)試的復(fù)雜度，在編寫(xiě) Web APP的過(guò)程中可以實(shí)時(shí)看到代碼產(chǎn)生的效果。AngularJS的核心思想是將管理數(shù)據(jù)的代碼（model）、應(yīng)用邏輯代碼（controller），以及向用戶(hù)展示數(shù)據(jù)的代碼（view）清晰地分離開(kāi)，實(shí)現(xiàn)View層與model層數(shù)據(jù)同步，一方的改變會(huì)影響另一方。

2.1.3 AJAX（Asynchronous JavaScirpt and XML）

是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，整合了幾種現(xiàn)有的技術(shù)：JavaScirpt、CSS、DOM和XmlHttpRequest。jQuery是一個(gè)輕量級(jí)的Ajax框架，對(duì)Ajax操作進(jìn)行了良好的封裝，提供了一套完整的Ajax功能，使Ajax應(yīng)用開(kāi)發(fā)過(guò)程簡(jiǎn)單化。同時(shí)在無(wú)刷新技術(shù)實(shí)現(xiàn)上引入jQuery很多優(yōu)勢(shì)。

2.2 系統(tǒng)框架設(shè)計(jì)

“掌上紡服”校園地理信息系統(tǒng)的設(shè)計(jì)原則為：在實(shí)現(xiàn)客戶(hù)端簡(jiǎn)潔、易操作的同時(shí)，盡量減少響應(yīng)時(shí)間、占用較小的帶寬。

基于上述設(shè)計(jì)原則，前端采用AngularJS框架實(shí)現(xiàn)單頁(yè)應(yīng)用，服務(wù)器端采用SSH框架來(lái)實(shí)現(xiàn)，而前端與服務(wù)器端之間的交互通過(guò)JSON數(shù)據(jù)來(lái)實(shí)現(xiàn)。JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交互格式，簡(jiǎn)單，易于讀寫(xiě)，占用帶寬小，服務(wù)器端和客戶(hù)端的解析較為方便。系統(tǒng)的整體設(shè)計(jì)框架如圖1所示。

3 主要功能實(shí)現(xiàn)

3.1 初始化百度地圖

百度地圖JavaScript API是一套由JavaScript語(yǔ)言編寫(xiě)的應(yīng)用程序接口，通過(guò)

地圖容器設(shè)置：

創(chuàng)建Map實(shí)例，初始化地圖：

var map=new BMap.Map（"allmap"， { enableMapClick ： false }）； // 創(chuàng)建Map實(shí)例

map.centerAndZoom（CurrentPoint， 18）； // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別

3.2 單頁(yè)應(yīng)用架構(gòu)

傳統(tǒng)的網(wǎng)頁(yè)，頁(yè)面加載時(shí)會(huì)重繪整張頁(yè)面，當(dāng)瀏覽器從服務(wù)器獲取數(shù)據(jù)時(shí)，頁(yè)面會(huì)假死并有“閃爍”現(xiàn)象。單頁(yè)應(yīng)用頁(yè)面加載時(shí)只重繪界面上需要變化的部分，擁有和Native APP一樣的響應(yīng)速度。

AngularJS的單頁(yè)應(yīng)用執(zhí)行流程如圖2所示。

在應(yīng)用執(zhí)行過(guò)程中，完整的頁(yè)面只加載一次，就是“ng-APP”所在的頁(yè)面。對(duì)于客戶(hù)端的請(qǐng)求，頁(yè)面只是重繪“ng-APP”中的內(nèi)容。

主頁(yè)（index.jsp）中“ng-APP”的設(shè)置：

路由規(guī)則設(shè)置：

var APP = angular.module（zjff， [ ng， ngRoute， ngAnimate ]）；

APP.config（function（$routeProvider） {

$routeProvider.when（/main， {templateUrl ： main.jsp，controller ： mainCtr}）

}）；

控制器：

APP.controller（mainCtr， function（$scope， $location） {

createMap（）；//初始化地圖

}）；

3.3 無(wú)刷新查詢(xún)

$watch是AngularJs的scope函數(shù)，用于監(jiān)聽(tīng)查詢(xún)關(guān)鍵字的變化。jQuery是一個(gè)輕量級(jí)的Ajax框架，對(duì)Ajax操作進(jìn)行了良好的封裝。當(dāng)查詢(xún)關(guān)鍵字變化時(shí)通過(guò)jQuery的$.getJSON（）方法向服務(wù)器發(fā)送請(qǐng)求，異步查詢(xún)。查詢(xún)結(jié)果返回后通過(guò)$scope.geotableList = data； $scope.$APPly（）；重新綁定數(shù)據(jù)，顯示最新查詢(xún)結(jié)果。

$scope.$watch（kw， function（） {

if （$scope.kw） {

$.getJSON（geotableByKw.action？kw= + $scope.kw，

function（data） {

$scope.geotableList = data；

}

}）；

3.4 步行規(guī)劃

步行路線(xiàn)規(guī)劃功能通過(guò)調(diào)用百度API實(shí)現(xiàn)

創(chuàng)建一個(gè)步行導(dǎo)航實(shí)例：

var walking = new BMap.WalkingRoute（map， {renderOptions ： {map ： map， panel ： "r-result"，autoViewport ： true} }）；

發(fā)起檢索，變量CurrentPoint是當(dāng)前位置，p1是目標(biāo)位置：

walking.search（CurrentPoint， new BMap.Point（p1.getPosition（）.lng，p1.getPosition（）.lat））；

通過(guò)第三方地圖控件控制規(guī)劃面板的顯示與隱藏

var div = document.createElement（"div"）；// 創(chuàng)建一個(gè)DOM元素

div.onclick = function（e） {

$（"#r-result"）.toggle（"normal"）；//控件綁定顯示/隱藏事件

}

map.getContainer（）.APPendChild（div）；//將控件添加到地圖容器中

4 結(jié)束語(yǔ)

本文在當(dāng)前互聯(lián)網(wǎng)技術(shù)水平和智能手機(jī)普及率均較高的應(yīng)用背景下，提出了基于Web APP的校園地理信息系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。Web APP前端采用AngularJS實(shí)現(xiàn)單頁(yè)應(yīng)用，服務(wù)器端采用SSH框架，前端與服務(wù)端之間通過(guò)JSON數(shù)據(jù)實(shí)現(xiàn)交互，凸顯了本款Web APP 簡(jiǎn)潔、易操作、響應(yīng)速度快的特點(diǎn)，更易于推廣。

參考文獻(xiàn)

[1]劉玉萍.HTML5從零開(kāi)始學(xué)[M].北京：清華大學(xué)出版社，2015.

[2]孫迪，李沛鴻.百度地圖在WebGIS中的應(yīng)用[J].交通與建筑科學(xué)，2013（11）：165-166.

[3]董英茹.簡(jiǎn)談AngularJS在下一代Web開(kāi)發(fā)中的應(yīng)用[J].軟件工程師，2015（05）：30-31.

[4]張佳佳，王楊，韓力英.基于SSH+jQuery框架的餐飲Web APP的設(shè)計(jì)與實(shí)現(xiàn)[J].電子設(shè)計(jì)工程，2016（03）：20-22.

作者簡(jiǎn)介

王海穎（1982-），女，浙江省寧波市人。碩士學(xué)位?，F(xiàn)為浙江紡織服裝職業(yè)技術(shù)學(xué)院講師。主要研究方向移動(dòng)端軟件開(kāi)發(fā)。

樓鋮超（1995-），男，浙江省寧波市人?，F(xiàn)為浙江紡織服裝職業(yè)技術(shù)學(xué)院在讀。主要研究方向軟件開(kāi)發(fā)。

張鵬（1996-），男，浙江省溫州市人。現(xiàn)為浙江紡織服裝職業(yè)技術(shù)學(xué)院在讀。主要研究方向軟件開(kāi)發(fā)。

作者單位

浙江紡織服裝職業(yè)技術(shù)學(xué)院 浙江省寧波市 315211