基于百度地圖API的WebGIS研究與實現(xiàn)

田力 欒紹鵬

摘要：本文從理論研究以及技術(shù)實踐出發(fā)，自主設(shè)計并開發(fā)完成了基于百度地圖API的信息查詢系統(tǒng)?？蛻舳嘶诎俣鹊貓DAPI實現(xiàn)了地圖展示、查詢等功能，并通過Ajax請求服務(wù)端的SqlServer數(shù)據(jù)庫將服務(wù)端存儲的信息查詢出來并顯示到瀏覽器中;同時瀏覽器端基于HTML5 GeolocationAPI實現(xiàn)了定位功能。

關(guān)鍵詞：百度地圖;HTML5;WebGIS;XML

近些年互聯(lián)網(wǎng)技術(shù)在全球高速發(fā)展，萬維網(wǎng)成為便捷高效的全球信息發(fā)布工具。GIS和Web技術(shù)的結(jié)合，讓GIS插上網(wǎng)絡(luò)的翅膀迅速走進(jìn)了千家萬戶。借助Web技術(shù)，GIS實現(xiàn)了從桌面到Web瀏覽器的轉(zhuǎn)移，使得人們在任何能夠接入互聯(lián)網(wǎng)的電腦前使用瀏覽器，就能夠迅速獲取所需要的地理信息。傳統(tǒng)的WebGIS應(yīng)用開發(fā)相對復(fù)雜和困難，因為這涉及到很多關(guān)于地圖數(shù)據(jù)的收集、位置信息的收集和處理等各種各樣的服務(wù)能力。而地圖API則把地圖數(shù)據(jù)處理、位置獲取甚至空間計算的大部分工作來完成，把GIS功能封裝為簡單的應(yīng)用程序接口供應(yīng)用開發(fā)人員來調(diào)用，開發(fā)者只需要考慮應(yīng)用本身的邏輯，使用JavaScript或者其他語言調(diào)用百度地圖的API，即可將需要的GIS功能嵌入到自己的網(wǎng)頁或其他應(yīng)用中。

1百度地圖API

觀察在線地圖的發(fā)展現(xiàn)狀，繼國際上Google地圖之后，近些年國內(nèi)百度地圖、搜狗地圖、高德地圖、阿里云地圖和騰訊SOSO地圖等都紛紛推出了自己的地圖搜索服務(wù)和路況等應(yīng)用服務(wù)，極大的便利了人們的出行。

百度地圖API是LBS位置應(yīng)用的開發(fā)平臺，API和SDK的應(yīng)用模式是：API和SDK本身并不面向最終用戶，開發(fā)者在開發(fā)應(yīng)用時調(diào)用API或SDK來開發(fā)LBS應(yīng)用，然后把應(yīng)用提供給最終的用戶。百度地圖API平臺有四大核心能力：1、數(shù)據(jù)，可以檢索周邊餐飲、旅館等各類信息。百度出身于數(shù)字搜索，在數(shù)據(jù)方面經(jīng)驗豐富，擁有并提供大量的信息數(shù)據(jù);2、搜索，包括所有跟計算有關(guān)的能力，比如POI的搜索，檢索附近的餐飲、酒店等等;3、導(dǎo)航，比如路徑計算，駕車導(dǎo)航，公交檢索等;4、定位，定位是LBS應(yīng)用的關(guān)鍵功能。

2平臺總體架構(gòu)設(shè)計

本系統(tǒng)基于百度地圖API，目標(biāo)是實現(xiàn)任意區(qū)域的信息檢索，并將搜索結(jié)果合理展現(xiàn)在網(wǎng)頁文檔中。對于位置信息，采用百度地圖API提供的接口數(shù)據(jù);對于詳細(xì)信息，采用自己架設(shè)ASP.NET服務(wù)器提供Web服務(wù)的方式提供詳細(xì)數(shù)據(jù)。

本系統(tǒng)的核心功能是提供地圖展示，允許用戶通過修改地圖視野，并點擊“查詢”按鈕立即查詢本地圖視野區(qū)域的信息，并以標(biāo)注的方式展示在地圖中。同時允許用戶點擊任意一個結(jié)果標(biāo)注查詢詳細(xì)信息。圖1描述了系統(tǒng)的設(shè)計邏輯。

2.1 JavaScript API實現(xiàn)地圖功能

使用JavaScript API只需將百度地圖API的JS文件加載到網(wǎng)頁，并設(shè)置初始化地圖容器的代碼即可。百度地圖API支持2D、3D、衛(wèi)星圖的展示、平移、縮放、拖拽等操作。還可以在地圖展示控件：添加/刪除鷹眼、工具條、比例尺、自定義版權(quán)、地圖類型及定位控件，并可以設(shè)置各類控件的顯示位置。

自1.5版本之后，需先百度地圖API官網(wǎng)申請密鑰。ak的使用方法如下：

其中參數(shù)v為API當(dāng)前的版本號，目前最新版本為1.5。

由于JavaScript在網(wǎng)頁中的加載是自上而下進(jìn)行的，而在本系統(tǒng)中，網(wǎng)頁模型、API類、初始化動作都是有先后邏輯次序的。因此要求網(wǎng)頁DOM（文檔對象模型）的加載先于百度地圖JS文件的加載，百度地圖JS的加載要先于地圖初始化代碼。

為此，我們需要借助百度地圖API異步加載技術(shù)，同時運用適當(dāng)?shù)姆椒ń鉀Q以上次序問題。首先，我們將地圖API的加載封裝為loadBaiduJs的函數(shù)，然后在網(wǎng)頁文檔的head標(biāo)簽中加入window.onload = loadBaiduJs;即可等網(wǎng)頁所有DOM（文檔對象模型）加載完畢之后再加載百度的JS代碼。如圖是loadBaiduJs函數(shù)的邏輯代碼。

其中，引入百度地圖JS文件的參數(shù)callback=initialize代表加載完成百度地圖JS文件后的回調(diào)函數(shù)，這就確保了initialize初始化函數(shù)的執(zhí)行是在百度地圖JS文件加載之后進(jìn)行的。在自定義的initialize回調(diào)函數(shù)中，需要對地圖展示的初始參數(shù)進(jìn)行初始化，包括設(shè)置地圖初始的中心點、縮放級別等。

2.2 Javascript API實現(xiàn)POI搜索

百度地圖API中，BMap.LocalSearch提供本地搜索服務(wù)，在使用本地搜索時需要為其設(shè)置一個檢索區(qū)域，檢索區(qū)域可以是BMap.Map對象、BMap.Point對象或者是省市名稱（比如："北京市"）的字符串。BMap.LocalSearch構(gòu)造函數(shù)的第二個參數(shù)是可選的，可以在其中指定結(jié)果的呈現(xiàn)。BMap.RenderOptions類提供了若干控制呈現(xiàn)的屬性，其中map屬性指定了結(jié)果所展現(xiàn)的地圖實例，panel屬性指定了結(jié)果列表的容器元素。

本文所設(shè)計的系統(tǒng)為檢索商場信息，因此現(xiàn)以檢索當(dāng)前視野內(nèi)的POI商場信息為例。我們的搜索參數(shù)設(shè)置為renderOptions：{ map：myMap，panel：win2，autoViewport：true，selectFirstResult：false }，即搜索結(jié)果展現(xiàn)在myMap地圖實例，搜索結(jié)果面板展現(xiàn)在“win2”面板，搜索完成后自動調(diào)整地圖視野，并選擇第一條搜索結(jié)果。

同時，本系統(tǒng)要求點擊搜索結(jié)果的地圖標(biāo)注后要觸發(fā)自定義的事件，我們在自定義的事件代碼中使用Ajax訪問Web Service，因此，我們需要在本地搜索的第二個參數(shù)中設(shè)置onMarkersSet屬性，在標(biāo)注添加完成后給每個標(biāo)注添加Click事件的綁定函數(shù)。我們的本地搜索參數(shù)設(shè)置如圖2，其中addInfoWindow函數(shù)是為標(biāo)注添加點擊事件的函數(shù)：

2.3 Javascript API實現(xiàn)公交線路查詢

BMap.TransitRoute類提供公交導(dǎo)航搜索服務(wù)。和本地搜索類似，在搜索之前需要指定搜索區(qū)域，注意公交導(dǎo)航的區(qū)域范圍只能是市，而不能是省。如果搜索區(qū)域為BMap.Map對象，路線結(jié)果會自動添加到地圖上。如果網(wǎng)頁中提供了結(jié)果容器，相應(yīng)的路線描述也會展示在頁面上。創(chuàng)建一個公交導(dǎo)航對象的方法為：var transit= new BMap.TransitRoute（map，{ renderOptions：{map：myMap，panel："results"}.這樣便聲明了一個公交線路查詢對象transit，第二個參數(shù)指明了此次查詢結(jié)果標(biāo)注展現(xiàn)在myMap地圖對象上，結(jié)果內(nèi)容展示在“result”網(wǎng)頁容器內(nèi)。公交對象定義完成后執(zhí)行transit.search（起點字符串，終點字符串）便可執(zhí)行線路查詢。

3 總結(jié)

本文從理論研究以及技術(shù)實踐出發(fā)，自主設(shè)計開發(fā)完成的基于百度地圖API的獨立于GIS平臺的信息查詢系統(tǒng)，采用HTML5和CSS3作為客戶前端UI展現(xiàn)方式，基于百度地圖API接口實現(xiàn)了地圖展示、關(guān)鍵詞搜索、大學(xué)位置檢索、大學(xué)信息查詢、公交線路檢索、定位等功能。借助ASP.NET創(chuàng)建的Web Service，實現(xiàn)了自定義數(shù)據(jù)在地圖上的展現(xiàn)。

參考文獻(xiàn)：

[1] 易曉飛.HTML5 Geolocation API 研究與應(yīng)用[J].計算機光盤軟件與應(yīng)用，2012，6：101.

[2]王紅崧，周海晏.基于百度地圖 API 的旅游地理信息系統(tǒng)開發(fā)[J].現(xiàn)代計算機：上半月版，2012（8）：60-63.

[3]李艷，高揚.基于地圖 API 的 Web 地圖服務(wù)及應(yīng)用研究[J].地理信息世界，2010，8（002）：54-57.

[4]趙文雪.百度 MapAPI 在氣象自動站監(jiān)測的應(yīng)用[J].科技資訊，2012，15：005.

作者簡介：

田力（1963-），研究方向：國土資源信息管理、測繪地理信息、智慧城市等

（作者單位：煙臺市地理信息中心）