基于Web APP的校園地理信息系統設計與實現

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

摘 要 隨著互聯網技術的發展，移動端校園信息化產品是高校信息化發展的必然趨勢。本文從數字化校園建設及應用群體的需求出發，通過Web APP調用百度地圖API方式，設計了一款校園地理信息系統——“掌上紡服”。

【關鍵詞】Web APP 百度地圖AngularJS Ajax

1 引言

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

2 校園地理信息系統設計

鑒于當前存在很多新生因為不熟悉地理環境而導致走錯教室、上課遲到等現象，在當前新生擁有智能手機比例已經達到90%以上的今天，為方便學生盡快熟悉校園地理、盡快適應校園生活，設計一款能通過智能手機方便操作的校園地理信息系統。

Web APP，是運行于網絡和標準瀏覽器上，基于網頁技術開發實現特定功能的應用，該開發具有跨平臺的優勢，編寫一次、可到處運行的移動開發方法構建的跨平臺移動應用程序可以在多個設備上運行。為了更好的推廣應用，選用了Web APP方式進行開發，用戶只需要輸入網址或者掃面二維碼就能夠簡單方便地使用，同時Web APP的自適應性能夠很好的適應不同分辨率的手機屏幕。

2.1 相關技術簡介

2.1.1 百度地圖API

百度地圖API是為開發者免費提供的一套基于百度地圖服務的應用接口，包括JavaScript API、Web服務API、Android SDK、iOS SDK、定位SDK、車聯網API、LBS云等多種開發工具與服務。其中百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，不僅包含構建地圖的基本功能接口，還提供了諸如本地搜索、路線規劃等數據服務。適用于PC或移動設備端的基于瀏覽器的開發。

2.1.2 AngularJS

AngularJS是一款由Google公司開發的前端JS框架。AngularJS支持單頁動態應用程序的開發，簡化了開發過程及測試的復雜度，在編寫 Web APP的過程中可以實時看到代碼產生的效果。AngularJS的核心思想是將管理數據的代碼（model）、應用邏輯代碼（controller），以及向用戶展示數據的代碼（view）清晰地分離開，實現View層與model層數據同步，一方的改變會影響另一方。

2.1.3 AJAX（Asynchronous JavaScirpt and XML）

是一種創建交互式網頁應用的網頁開發技術，整合了幾種現有的技術：JavaScirpt、CSS、DOM和XmlHttpRequest。jQuery是一個輕量級的Ajax框架，對Ajax操作進行了良好的封裝，提供了一套完整的Ajax功能，使Ajax應用開發過程簡單化。同時在無刷新技術實現上引入jQuery很多優勢。

2.2 系統框架設計

“掌上紡服”校園地理信息系統的設計原則為：在實現客戶端簡潔、易操作的同時，盡量減少響應時間、占用較小的帶寬。

基于上述設計原則，前端采用AngularJS框架實現單頁應用，服務器端采用SSH框架來實現，而前端與服務器端之間的交互通過JSON數據來實現。JSON（JavaScript Object Notation）是一種輕量級的數據交互格式，簡單，易于讀寫，占用帶寬小，服務器端和客戶端的解析較為方便。系統的整體設計框架如圖1所示。

3 主要功能實現

3.1 初始化百度地圖

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，通過

地圖容器設置：

創建Map實例，初始化地圖：

var map=new BMap.Map（"allmap"， { enableMapClick ： false }）； // 創建Map實例

map.centerAndZoom（CurrentPoint， 18）； // 初始化地圖，設置中心點坐標和地圖級別

3.2 單頁應用架構

傳統的網頁，頁面加載時會重繪整張頁面，當瀏覽器從服務器獲取數據時，頁面會假死并有“閃爍”現象。單頁應用頁面加載時只重繪界面上需要變化的部分，擁有和Native APP一樣的響應速度。

AngularJS的單頁應用執行流程如圖2所示。

在應用執行過程中，完整的頁面只加載一次，就是“ng-APP”所在的頁面。對于客戶端的請求，頁面只是重繪“ng-APP”中的內容。

主頁（index.jsp）中“ng-APP”的設置：

路由規則設置：

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 無刷新查詢

$watch是AngularJs的scope函數，用于監聽查詢關鍵字的變化。jQuery是一個輕量級的Ajax框架，對Ajax操作進行了良好的封裝。當查詢關鍵字變化時通過jQuery的$.getJSON（）方法向服務器發送請求，異步查詢。查詢結果返回后通過$scope.geotableList = data； $scope.$APPly（）；重新綁定數據，顯示最新查詢結果。

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

if （$scope.kw） {

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

function（data） {

$scope.geotableList = data；

}

}）；

3.4 步行規劃

步行路線規劃功能通過調用百度API實現

創建一個步行導航實例：

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

發起檢索，變量CurrentPoint是當前位置，p1是目標位置：

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

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

var div = document.createElement（"div"）；// 創建一個DOM元素

div.onclick = function（e） {

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

}

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

4 結束語

本文在當前互聯網技術水平和智能手機普及率均較高的應用背景下，提出了基于Web APP的校園地理信息系統的設計與實現。Web APP前端采用AngularJS實現單頁應用，服務器端采用SSH框架，前端與服務端之間通過JSON數據實現交互，凸顯了本款Web APP 簡潔、易操作、響應速度快的特點，更易于推廣。

參考文獻

[1]劉玉萍.HTML5從零開始學[M].北京：清華大學出版社，2015.

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

[3]董英茹.簡談AngularJS在下一代Web開發中的應用[J].軟件工程師，2015（05）：30-31.

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

作者簡介

王海穎（1982-），女，浙江省寧波市人。碩士學位。現為浙江紡織服裝職業技術學院講師。主要研究方向移動端軟件開發。

樓鋮超（1995-），男，浙江省寧波市人。現為浙江紡織服裝職業技術學院在讀。主要研究方向軟件開發。

張鵬（1996-），男，浙江省溫州市人。現為浙江紡織服裝職業技術學院在讀。主要研究方向軟件開發。

作者單位

浙江紡織服裝職業技術學院 浙江省寧波市 315211