基于百度地圖API的校園綜合信息服務(wù)系統(tǒng)的設(shè)計與實現(xiàn)

潘安寧++楊昆

摘要：基于百度地圖API的校園電子地圖可以將地理信息數(shù)據(jù)進(jìn)行捆綁，從地圖的視角整合校內(nèi)各個信息服務(wù)系統(tǒng)，將地圖作為入口為用戶提供各類校園服務(wù)。本系統(tǒng)以云南師范大學(xué)呈貢校區(qū)空間信息為基礎(chǔ)數(shù)據(jù)，利用百度地圖API，結(jié)合ASP.NET、AJAX、數(shù)據(jù)庫等技術(shù)來實現(xiàn)。系統(tǒng)采用B/S架構(gòu)，利用IIS進(jìn)行網(wǎng)站發(fā)布，包括了校園信息查詢、校園全景圖展示、校園生活服務(wù)及校園路徑導(dǎo)航等功能。

關(guān)鍵詞：百度地圖API；AJAX；JavaScript；校園地圖

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）07-0072-03

Design and Implementation of Integrated Information Service System on Campus Based on Baidu Maps API

PAN An-ning1，2， YANG Kun1，2

（1. School of Information Science and Technology， Yunnan Normal University， Kunming 650500， China； 2. GIS Technology Engineering Research Centre for West-China Resources and Environment of Educational Ministry， Kunming 650500， China）

Abstract： Campus-based electronic map Baidu Maps API can bundle the campus GIS data and integrate each of the information service system from the perspective of each map，and it can make the map as an entry point for users to provide a wide range of campus services.It is based on Yunnan Normal University of Cheng Gong campus spatial information data and the use of Baidu Maps API， and the achievement of this system is based on the technologies about ASP.NET， AJAX and database. The system uses B /S architecture， and using IIS to publish websites. Functions of the system include campus information inquiries， campus panorama show， campus life services and campus walking path planning.

Key words： Baidu Maps API； AJAX ； JavaScript； school map

1 概述

1.1 研究背景和意義

隨著高校及大學(xué)城的發(fā)展，校園面積越來越大。云南師范大學(xué)呈貢校區(qū)占地面積達(dá)3300多畝，眾多部門設(shè)施混合分布[1]。很多校內(nèi)外人士不了解校內(nèi)各個場所的地理位置也無法直觀地從校園空間地理信息的角度去獲取相關(guān)信息。傳統(tǒng)的校園信息服務(wù)系統(tǒng)因缺乏對空間信息的分析和處理能力，無法直觀地表達(dá)數(shù)據(jù)的空間概念，而基于百度API的校園信息服務(wù)系統(tǒng)可以彌補這些不足。它既能方便師生和來訪人員結(jié)合地圖快速、直觀地了解校園地理環(huán)境概況和相關(guān)服務(wù)信息，又能給校園的管理、規(guī)劃等提供準(zhǔn)確而詳細(xì)的數(shù)據(jù)[2]?？梢?，設(shè)計出完善的校園綜合信息服務(wù)系統(tǒng)格外重要。

1.2 基于百度地圖API的研究現(xiàn)狀

百度地圖API是免費為開發(fā)者們提供的一套基于百度地圖服務(wù)的應(yīng)用接口，目前被廣泛應(yīng)用于移動設(shè)備、互聯(lián)網(wǎng)、車廠等行業(yè)，主要涉及團購、電商、移動手機應(yīng)用等。給網(wǎng)絡(luò)地圖應(yīng)用開發(fā)提供了便利，最大限度地滿足了開發(fā)者的需求[3]。

隨著校園地理信息系統(tǒng)不斷發(fā)展，越來越多的人將基于百度地圖API的新興技術(shù)與傳統(tǒng)的數(shù)據(jù)庫信息系統(tǒng)相結(jié)合并很好地應(yīng)用到實際中。例如，2013年，曾江峰基于百度地圖 API 設(shè)計并實現(xiàn)了門店信息搜集系統(tǒng)，作者基于百度地圖 API 編程，“實現(xiàn)了靜尚傳媒門店信息搜集系統(tǒng)”的設(shè)計與開發(fā)[4]。2014年，謝黨恩等人以空間信息為基礎(chǔ)數(shù)據(jù)，利用PHP、JavaScript及XML技術(shù)實現(xiàn)了基于百度地圖API的校園導(dǎo)航系統(tǒng)[5]。此外，“百度地圖API在WebGIS中的應(yīng)用”，“基于百度地圖API的虛擬校園的設(shè)計”等越來越多的應(yīng)用也大量出現(xiàn)。諸多應(yīng)用實例表明，百度地圖API不僅能解決Web地圖應(yīng)用開發(fā)中遇到的數(shù)據(jù)源問題，還能降低企業(yè)開發(fā)成本，具有很好的發(fā)展前景。

2 系統(tǒng)需求分析

2.1 功能需求

本文結(jié)合校園地理位置信息，有效地將百度地圖API引入到校園信息服務(wù)系統(tǒng)中。該系統(tǒng)分為地圖瀏覽、校園地點查詢、校園信息顯示、校園路徑導(dǎo)航以及其他功能服務(wù)和后臺數(shù)據(jù)庫管理六大功能模塊。其基本功能框架如圖1所示：

2.2系統(tǒng)功能模塊介紹

1）地圖瀏覽：直觀地顯示校園信息及各操作的結(jié)果，便于用戶對地圖進(jìn)行平移，縮放，顯示比例尺等。

2）地點查詢：根據(jù)用戶的查詢需求，分別從數(shù)據(jù)庫中進(jìn)行分類信息檢索和根據(jù)用戶輸入的關(guān)鍵詞檢索。

3）校園信息顯示：點擊想要了解的具體位置，此位置可以是搜索框內(nèi)查詢的結(jié)果或是左邊導(dǎo)航欄中的分類結(jié)果，點擊后在信息窗口內(nèi)顯示相應(yīng)的介紹信息。

4）分類進(jìn)行校園概況瀏覽：點擊導(dǎo)航欄內(nèi)相應(yīng)類別，顯示出該類別的詳細(xì)校園信息。

5） 校園路徑導(dǎo)航：提供校園內(nèi)兩地之間的具體行程路線，對校園線路進(jìn)行步行規(guī)劃。

6）全景圖展示：點擊全景圖控件，實現(xiàn)對校園任意位置的全景展示。

7）公共服務(wù)和生活服務(wù)：從地圖的視角為用戶提供各類公共服務(wù)和生活服務(wù)。

8）后臺管理：包括登錄和操作兩個模塊。登錄模塊針對的是管理員，操作模塊包括管理員對系統(tǒng)數(shù)據(jù)庫中的數(shù)據(jù)進(jìn)行添加、刪除、修改等。

3 系統(tǒng)總體方案設(shè)計

本系統(tǒng)基于“百度地圖API”，選用Visual Studio 2010為平臺，開發(fā)工具為ASP.NET，前端Web界面結(jié)合HTML，CSS及JavaScript進(jìn)行設(shè)計，后端使用SQL Server數(shù)據(jù)庫存儲校園信息。后臺數(shù)據(jù)庫管理的設(shè)計采用MVC框架，并結(jié)合EasyUI和ASP.NET關(guān)鍵技術(shù)來實現(xiàn)。系統(tǒng)選用B/S模式，中間通過AJAX+jQuery異步交互技術(shù)來實現(xiàn)并運用IIS來發(fā)布網(wǎng)站。

4 系統(tǒng)各功能模塊的設(shè)計與實現(xiàn)

4.1 地圖瀏覽設(shè)計

該模塊設(shè)計并實現(xiàn)了校園核心區(qū)域的展示，首先通過獲取JavaScript API服務(wù)并在HTML文件中賦予div一個id值，在該div元素上實現(xiàn)地圖實例的創(chuàng)建。其次采用BMap.Map.centerAndZoom（point，level）方法實現(xiàn)地圖的初始化。最后通過Control類實現(xiàn)自定義控件，即地圖顯示區(qū)域左下方添加的ScaleControl（比例尺控件），左上方的MapTypeControl（地圖類型控件），右上方的全景圖控件以及右下方的OverviewMapControl（縮略地圖控件），每個控件都能對地圖進(jìn)行相關(guān)操作。主界面如圖2所示。

4.2 校園地點查詢

主要實現(xiàn)搜索框?qū)τ趦Υ嬖赟QL Server 2008數(shù)據(jù)庫內(nèi)數(shù)據(jù)的查詢并將查詢結(jié)果顯示在地圖相應(yīng)位置。查詢時使用的是jQuery框架和AJAX異步交互機制，瀏覽器與服務(wù)器之間傳輸?shù)臄?shù)據(jù)采用JSON字符串格式。

經(jīng)過該模塊的設(shè)計，用戶能通過搜索框?qū)λ栊@信息進(jìn)行搜索，左邊導(dǎo)航欄將列出搜索結(jié)果，并能根據(jù)經(jīng)緯度坐標(biāo)定位至地圖相應(yīng)位置。

4.3 校園信息顯示

結(jié)合校園地圖空間信息，點擊想要了解的具體位置，此位置可以是搜索框內(nèi)查詢的結(jié)果或是點擊左邊導(dǎo)航欄獲取的分類結(jié)果，點擊覆蓋物后在信息窗口內(nèi)顯示相應(yīng)的介紹信息。同時能夠?qū)崿F(xiàn)在附近搜索。

4.4分類進(jìn)行校園概況瀏覽

根據(jù)校園內(nèi)資源的性質(zhì)進(jìn)行分類設(shè)計，點擊導(dǎo)航欄內(nèi)相應(yīng)類別，顯示出該類別的詳細(xì)校園信息。所有分類的名稱和對應(yīng)圖標(biāo)隨著地圖的加載顯示在地圖瀏覽界面左邊區(qū)域。用戶點擊任何分類均能獲取該類下的所有校園信息分布。分類對象包括：學(xué)院、黨群和行政部門、生活服務(wù)設(shè)施、教學(xué)及文體樓、學(xué)生公寓、教工住宅、學(xué)校周邊以及其他場所。

4.5 校園路徑導(dǎo)航

根據(jù)用戶所選擇路徑的起點和終點來規(guī)劃步行路徑，點擊起點或是終點，能進(jìn)行上一步和下一步的路徑導(dǎo)航。

用戶通過起點和終點輸入框來拾取自己步行起始點的經(jīng)緯度坐標(biāo)，點擊搜索即可為您規(guī)劃步行路徑。如：步行導(dǎo)航“信息學(xué)院”至“云南研究院”示例如圖3所示。

4.6 全景圖展示

根據(jù)經(jīng)緯度坐標(biāo)展示校園各全景圖。全景圖控件可以顯示或是隱藏，點擊全景控件后進(jìn)入全景圖，拖動控件，全景圖位置也隨著改變。

4.7 公共服務(wù)和生活服務(wù)

該模塊緊扣校園綜合信息服務(wù)系統(tǒng)這一主題，充分考慮了用戶在瀏覽校園地圖時有可能需要的各類公共服務(wù)和生活必須服務(wù)，通過在地圖顯示模塊添加按鈕控件，借助下拉列表設(shè)置相應(yīng)服務(wù)，設(shè)置彈出層和遮罩層實現(xiàn)對于具體服務(wù)的點擊事件。

5后臺數(shù)據(jù)庫管理的設(shè)計與實現(xiàn)

該模塊的設(shè)計主要基于九個數(shù)據(jù)庫表：學(xué)院信息表、學(xué)校周邊信息表、黨群和行政部門信息表、生活服務(wù)設(shè)施信息表、其他信息表、學(xué)生公寓信息表、教學(xué)及文體樓信息表、教工住宅信息表及后臺管理員信息表。

以下表1為該系統(tǒng)設(shè)計中使用的“學(xué)院信息表”的示例，其余表的設(shè)計類似。

最終后臺數(shù)據(jù)庫管理模塊實現(xiàn)的功能包括：管理員登錄、后臺管理主頁面下的校園信息添加、校園信息刪除、校園信息編輯等。

6 總結(jié)

本文基于百度地圖API，從地圖的視角整合了校內(nèi)各個信息服務(wù)系統(tǒng)，將用戶所需的各種校園服務(wù)從校園空間地理信息的角度進(jìn)行展示，給用戶更為直觀的感受。該系統(tǒng)不僅實現(xiàn)了關(guān)于地圖的基本操作，還針對校園現(xiàn)狀，實現(xiàn)了校園內(nèi)部所有興趣點之間的路徑導(dǎo)航，界面簡潔直觀、操作方便。

此外，除上述成就外本文還有一些問題有待進(jìn)一步研究，例如，如何更加系統(tǒng)地利用百度地圖API來完善校園綜合信息服務(wù)系統(tǒng)的開發(fā)，如何更好地為校內(nèi)外人士提供服務(wù)，另外，在未來的工作中會考慮加入GPS定位服務(wù)并著手移動設(shè)備客戶端系統(tǒng)的開發(fā)，真正實現(xiàn)校內(nèi)實時的校園綜合信息服務(wù)，力求在新生入學(xué)、校外人士來訪等方面發(fā)揮更大的實用價值。

參考文獻(xiàn)：

[1] 程鋼，梁曉莉，張得群，等. 基于地圖API的校園在線電子地圖設(shè)計與實現(xiàn)[J]. 測繪工程，2014（1）：5-11.

[2] 孫曉茹， 趙軍. Google Maps API在WEBGIS中的應(yīng)用. 微計算機信息， 2006， 22（19）：224-226.

[3] 游蘭，彭慶喜.基于Google Maps API的地圖解析研究與實現(xiàn).湖北大學(xué)學(xué)報，2010，32（2）：161-164.

[4] 曾江峰.基于百度地圖API的門店信息搜集系統(tǒng)設(shè)計與實現(xiàn)[D].武漢：華中科技大學(xué)，2013.

[5] 謝黨恩，頓貝貝，張志立. 基于百度地圖API的校內(nèi)路徑導(dǎo)航系統(tǒng)的實現(xiàn)[J]. 許昌學(xué)院學(xué)報，2014（2）：78-81.