基于Mapbar地圖API的WebGIS設(shè)計與開發(fā)

白春鴻 ，梁曉莉，王學杰

（1.廣東重工建設(shè)監(jiān)理有限公司，廣東 廣州510034；2.廣東省重工建筑設(shè)計院有限公司，廣東 廣州510034；3.河南理工大學 測繪學院，河南 焦作454000；4.河南省地質(zhì)調(diào)查院，河南 鄭州 450001）

地理信息服務(wù)已從早期以地圖為載體的信息傳遞方式發(fā)展到建立在計算機技術(shù)、網(wǎng)絡(luò)技術(shù)、空間技術(shù)、通信技術(shù)以及地理信息技術(shù)等基礎(chǔ)上的現(xiàn)代地理信息服務(wù)模式[1,2]?；赪ebGIS的網(wǎng)絡(luò)地圖服務(wù)及應(yīng)用給企業(yè)和個人在業(yè)務(wù)宣傳、應(yīng)用拓展和搜索服務(wù)等方面帶來極大的便利，越來越多的企業(yè)和個人開展基于網(wǎng)絡(luò)地圖的服務(wù)和應(yīng)用[3]。許多企業(yè)希望擁有自己的WebGIS，但獨立開發(fā)和運營WebGIS系統(tǒng)對中小型企業(yè)負擔太重[4]。Mapbar地圖提供了以企業(yè)為中心的動態(tài)電子地圖，以及企業(yè)周邊信息、駕車路線和公交換乘等信息，為那些沒有網(wǎng)站又需要地圖服務(wù)的企業(yè)提供了很大便利。Mapbar地圖API技術(shù)的快速發(fā)展為中小型企業(yè)低成本W(wǎng)ebGIS的快速普及帶來了新希望。本文基于Mapbar地圖API進行WebGIS的設(shè)計與開發(fā)，并對開發(fā)流程和技術(shù)實現(xiàn)進行探討和研究。

1 基本架構(gòu)

基于地圖API開發(fā)的WebGIS系統(tǒng)多基于B/S結(jié)構(gòu)組織數(shù)據(jù)和發(fā)布信息，采用用戶服務(wù)層、業(yè)務(wù)邏輯層、數(shù)據(jù)存儲層3層模型架構(gòu)。用戶服務(wù)層主要提供用戶與Web服務(wù)器良好的交互界面，用于管理界面顯示、系統(tǒng)交互等功能；業(yè)務(wù)邏輯層負責接收用戶提交的請求，處理后進行數(shù)據(jù)庫的訪問，可細分為Web程序服務(wù)層和Map bar服務(wù)層，實現(xiàn)地圖的縮放、查詢分析等功能；數(shù)據(jù)存儲層負責空間數(shù)據(jù)和屬性數(shù)據(jù)的存儲和管理，并在接到查詢指令后執(zhí)行相應(yīng)的操作, 進而完成地圖的發(fā)布。

這種架構(gòu)使系統(tǒng)開發(fā)的結(jié)構(gòu)層次分明、分工明確，從而保證了系統(tǒng)的高效運行性、較強的靈活性、可擴展性和可伸縮性，使系統(tǒng)易于維護，穩(wěn)定性大大增強。

2 設(shè)計與開發(fā)

2.1 界面及功能設(shè)計

WebGIS設(shè)計要求簡潔、清晰、美觀大方，以便于用戶的使用和查詢。系統(tǒng)界面主要包含地圖顯示瀏覽區(qū)、查詢功能區(qū)、用戶交互區(qū)、鷹眼區(qū)等。地圖顯示瀏覽區(qū)是地圖的主要區(qū)域，包括地圖的顯示、縮放、平移、比例尺等各種控件。查詢功能區(qū)主要包括地圖查詢、公交查詢、駕車導(dǎo)航查詢和周邊查詢等。用戶交互區(qū)主要是為了豐富地圖的功能，增加與用戶的交互而設(shè)計的功能，主要包括視野內(nèi)搜索、測距、添加標記和截圖等操作。

2.2 專題分類

根據(jù)系統(tǒng)建立的要求，對系統(tǒng)涉及的數(shù)據(jù)進行專題分類。以面向旅游的GIS信息分類為例，可以將專題劃分為交通出行、餐飲美食、旅游住宿、娛樂休閑、購物消費、文化教育和汽車服務(wù)等。通過專題分類，用戶可根據(jù)需要縮小查詢范圍，快速檢索、準確查詢各種所需的信息。

2.3 數(shù)據(jù)存儲

數(shù)據(jù)是GIS的“血液”，沒有基礎(chǔ)數(shù)據(jù)，再強大的功能都無法實現(xiàn)[5]。WebGIS系統(tǒng)數(shù)據(jù)庫按數(shù)據(jù)性質(zhì)可分為空間數(shù)據(jù)和屬性數(shù)據(jù)2大類。屬性數(shù)據(jù)基于專題分類進行存儲，根據(jù)數(shù)據(jù)量的大小，可選擇不同的數(shù)據(jù)庫類型。目前關(guān)系型數(shù)據(jù)庫應(yīng)用較為廣泛，如小型開發(fā)可選擇MYSQL、Access等。面向?qū)ο箝_發(fā)也逐漸引入到數(shù)據(jù)庫當中，利用面向?qū)ο蟮拈_發(fā)方式，將數(shù)據(jù)庫系統(tǒng)中的各種功能對象化，將數(shù)據(jù)庫管理的各種功能封裝在各類對象中，使得開發(fā)應(yīng)用程序更為簡便，極大地簡化了用戶的開發(fā)工作?？臻g數(shù)據(jù)可劃分為點、線、面3種基本類型，每一個要素具有唯一的標識碼，用以與屬性數(shù)據(jù)關(guān)聯(lián)，可采用大型空間數(shù)據(jù)庫，也可對關(guān)系數(shù)據(jù)庫進行擴展，或采用XML格式存儲空間數(shù)據(jù)。XML作為一種可擴展置標語言，在數(shù)據(jù)存取上比以往數(shù)據(jù)庫具有更大的優(yōu)越性，不僅能實現(xiàn)不同平臺間的數(shù)據(jù)交換和數(shù)據(jù)共享，而且具有更強大的檢索功能[6]。在WebGIS中引入XML能夠?qū)ML自身優(yōu)點應(yīng)用到WebGIS中，在傳統(tǒng)的的WebGIS 3層結(jié)構(gòu)中發(fā)揮數(shù)據(jù)存儲、表現(xiàn)和交換等方面的重要應(yīng)用，構(gòu)建可伸縮、靈活動態(tài)、分布式的WebGIS系統(tǒng)[7]。根據(jù)XML的語法特性結(jié)合空間數(shù)據(jù)表達的需要可自定義空間數(shù)據(jù)形式，如可定義面數(shù)據(jù)的存儲結(jié)構(gòu)如下:

x1

y1

x2

y2

........

xn

yn

3 開發(fā)流程

基于Mapbar API的開發(fā)流程一般包括引入Map bar地圖 API、創(chuàng)建地圖容器、創(chuàng)建地圖實例、初始化地圖、添加地圖操作的各種功能等過程。

3.1 引入Map bar地圖的API

，其中，v 表示所使用的 API 的版本標識；k為申請的密鑰；若只進行本地調(diào)試，可以使用公共密鑰。

3.2 創(chuàng)建地圖容器

要使地圖在網(wǎng)頁中顯示，必須為其留出一個位置。創(chuàng)建名為"mapbar"的div元素存放地圖，并設(shè)置其尺寸和樣式。

3.3 創(chuàng)建地圖實例并初始化

maplet = new Maplet("mapbar");

maplet.centerAndZoom(new MPoint(116.38672,39.90805), 8);

在對地圖執(zhí)行任何其他操作（包括設(shè)置地圖本身的任何其他屬性）之前，通過Maplet構(gòu)造函數(shù)創(chuàng)建地圖實例，并用centerAndZoom() 的經(jīng)緯度坐標和縮放級別對其進行定位和初始化。

3.4 添加地圖事件

瀏覽器中的 Javascript 是事件驅(qū)動的，意味著Javascript 通過生成事件處理程序來響應(yīng)交互，并用程序來偵聽這些事件。通過靜態(tài)方法Event.addListener()可以注冊以獲取這些事件相關(guān)的通知，如為地圖添加點擊事件：

MEvent.addListener(maplet, "click", function() {alert("您點擊了地圖");})

3.5 添加地圖控件

對地圖的各種操作離不開地圖控件，如平移/縮放控件、比例尺控件和縮略圖控件等?？赏ㄟ^addControl()方法將各種控件添加到地圖上并通過 Maplet 對象提供的showControl() 方法來控制控件的顯示狀態(tài)，即

Maplet.addcontrol(new MStandardControl());maplet.showOverview(false);

3.6 添加地圖疊加物

疊加物（Overlay）是地圖上綁定到經(jīng)緯度坐標的對象，會隨拖動或縮放地圖而移動。疊加物表現(xiàn)為“添加”到地圖上以指明點或線的對象。地圖 API 的疊加物包括信息窗口（InfoWindow）、標注（Marker）、折線（Polyline）和地圖熱點。通過 Maplet.addOverlay()方法可以向地圖添加疊加物，如添加一個圖標：

var marker = new MMarker(new MPoint(116.38749,39.90515),new MIcon("tb1.gif",32,32));

maplet.addOverlay(marker);

4 實例分析

本文以河南焦作部分旅游景點為例，說明功能實現(xiàn)的技術(shù)細節(jié)。系統(tǒng)的主界面如圖1所示。系統(tǒng)實現(xiàn)的功能主要包括：

1）地圖展示與操作，主要實現(xiàn)地圖不同等級間的縮放、地圖的平移、比例尺的顯示以及鷹眼圖的顯示等功能。

2）基本查詢功能，包括公交查詢、駕車導(dǎo)航和周邊查詢等功能。在信息搜索框輸入起點和終點，即可獲得相關(guān)的公交換乘或詳細的駕車信息，并可給出大致的里程和行程時間。在周邊查詢的信息框中鍵入所要查詢的地址和查詢的相關(guān)信息就可提供各個查詢地點的詳細信息，如電話、周邊的餐廳、網(wǎng)友評論等。

3）自主標記。為了豐富信息來源，提高地圖與用戶的交互性，系統(tǒng)實現(xiàn)了自主添加標注的功能。用戶可根據(jù)自己的需要在信息框中輸入所要標注的內(nèi)容，使地圖信息更加完整，如圖2所示。

4）測距功能。用戶可在地圖中通過點擊鼠標的方式確定起止點間的距離，見圖3。

5）信息窗的顯示。信息窗口是地圖中的一種特殊覆蓋物，它可以展示更為豐富的文字和多媒體信息，如圖4 所示。

6）其他功能。系統(tǒng)還實現(xiàn)了截圖、鏈接、打印、發(fā)送、手機導(dǎo)航等功能，為用戶的日常生活提拱了便利。

[1]符海月,趙軍,李滿春.從Google Maps看我國全球化地理信息服務(wù)面臨的挑戰(zhàn)和對策[J].地理與地理信息科學,2006,22(2):1-3

[2]劉岳峰.地理信息服務(wù)概述[J].地理信息世界,2004,2(6):26-29,43

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

[4]王衛(wèi)玲,劉瑜,魏艷梅.基于Google Maps API 的電子地圖的開發(fā)研究[J].信息技術(shù)與信息化,2011(3):93-95

[5]胡笳,王彤.校園WebGIS系統(tǒng)設(shè)計與實現(xiàn)——以哈爾濱師范大學為例[J].信息科學,2008(34):98,178

[6]任建華,汪赫瑜.基于XML的數(shù)據(jù)在數(shù)據(jù)庫中的存取技術(shù)[J].信息技術(shù),2004,28(7):82-85

[7]羅予東.基于XML的地理信息Web服務(wù)研究[J].計算機時代,2005,6:23-24