(1.桂林理工大學(xué)測繪地理信息學(xué)院，廣西桂林 541004； 2.廣西空間信息與測繪重點實驗室，廣西桂林 541004)

傅毓1，2?，李景文1，2，王輝1，2，陳俊任1，2

基于Google Map的輕量級企業(yè)信息標(biāo)注系統(tǒng)設(shè)計方法

(1.桂林理工大學(xué)測繪地理信息學(xué)院，廣西桂林 541004； 2.廣西空間信息與測繪重點實驗室，廣西桂林 541004)

從中小企業(yè)的發(fā)展需要出發(fā)，采用面向服務(wù)的結(jié)構(gòu)，利用AJAX技術(shù)與Google Map API的天然結(jié)合性及Web Service技術(shù)設(shè)計了基于Google Map的輕量級企業(yè)信息標(biāo)注系統(tǒng)，探討了基于Google Map的輕量級系統(tǒng)的設(shè)計與實現(xiàn)方法，并在此基礎(chǔ)上實現(xiàn)了南寧市企業(yè)信息標(biāo)注系統(tǒng)以及基于Google Map的企業(yè)信息的空間查詢。

企業(yè)；AJAX；Google Map；Web Service

1 引 言

在線地圖服務(wù)的多樣化應(yīng)用給中小型企業(yè)的發(fā)展帶來了新的機遇。企業(yè)可以通過在線電子地圖直觀地展示自身的業(yè)務(wù)、產(chǎn)品以及地理位置等信息，使用戶能夠輕松及時地查詢到自己感興趣的企業(yè)相關(guān)信息，同時為政府的決策提供數(shù)據(jù)支撐，因此如何搭建一個具有良好用戶體驗、快速響應(yīng)速度以及高擴展性的基于WebGIS的企業(yè)標(biāo)注信息系統(tǒng)顯得尤為重要。眾多的學(xué)者對WebGIS系統(tǒng)的設(shè)計方法[1～4]、信息傳輸?shù)霓k法[5]以及地圖的空間分析方法[6～8]做了大量研究，但在實際應(yīng)用中仍然存在系統(tǒng)過大、軟硬件要求較高、數(shù)據(jù)量偏大等問題。本文針對中小企業(yè)發(fā)展的實際需求及現(xiàn)有WebGIS技術(shù)存在開發(fā)平臺龐大、需要大型的空間數(shù)據(jù)庫和復(fù)雜的GIS服務(wù)器支持的問題，以Google Map為基礎(chǔ)，利用AJAX的異步刷新的特性構(gòu)建客戶端，采用Web Service技術(shù)搭建服務(wù)端，選用了輕量級JSON數(shù)據(jù)格式作為數(shù)據(jù)傳輸與交換的中間格式，設(shè)計了基于Google Map的輕量級的企業(yè)信息標(biāo)注系統(tǒng)，將企業(yè)信息與Google Map地圖服務(wù)相結(jié)合，并將其應(yīng)用于南寧市企業(yè)信息標(biāo)注系統(tǒng)，使企業(yè)可在地圖上標(biāo)注個性化信息，為基于在線地圖服務(wù)的WebGIS實際應(yīng)用提供了較好的參考。

2 基于Google Map輕量級企業(yè)信息標(biāo)注系統(tǒng)框架設(shè)計

在系統(tǒng)開發(fā)過程中，輕量級與重量級之間的區(qū)別在于架構(gòu)與對象耦合度及對象是否很難脫離架構(gòu)運行。輕量級系統(tǒng)的優(yōu)勢在很大程度上呈現(xiàn)為開發(fā)速度快，不需要部署一個很龐大的容器系統(tǒng)就可以實現(xiàn)以前需要容器才能實現(xiàn)的功能，不需要做太多的工作就可以搭建系統(tǒng)，這些特性對于開發(fā)人員來說非常有吸引力。因此輕量級主要體現(xiàn)在以下幾個方面:系統(tǒng)規(guī)模較??；能快速開發(fā)；系統(tǒng)涉及的客戶端操作通過JavaScript調(diào)用DOM接口實現(xiàn)，很少與服務(wù)器交互[6]等特性。根據(jù)輕量級系統(tǒng)的特性，基于Google Map的輕量級企業(yè)信息標(biāo)注系統(tǒng)采用SOA(面向服務(wù)的體系架構(gòu))，通過Web Service發(fā)布服務(wù)，服務(wù)使用者調(diào)用發(fā)布的服務(wù)，在客戶端與Google Map地圖服務(wù)混搭，實現(xiàn)企業(yè)信息的圖上標(biāo)注與展示。該系統(tǒng)將SOA優(yōu)點和實際應(yīng)用相結(jié)合，不僅具有WebGIS應(yīng)用的基本功能，而且還可根據(jù)相關(guān)算法實現(xiàn)空間分析查詢功能等。

2.1 基于AJAX引擎的客戶端設(shè)計

AJAX引擎相當(dāng)于在客戶端和服務(wù)端中搭建一個橋梁，使客戶端與服務(wù)器響應(yīng)異步化，其架構(gòu)如圖1所示。通過AJAX引擎向服務(wù)端發(fā)送請求時，每次只和服務(wù)端交換需要的數(shù)據(jù)，避免客戶端對服務(wù)器的請求致使瀏覽器頁面或地圖整個刷新，加快了頁面的響應(yīng)速度。當(dāng)發(fā)送請求時可預(yù)先讀取客戶端緩存，這樣可平衡客戶端與服務(wù)端的壓力。AJAX引擎主要實現(xiàn)XMLHttpRequest對象的生成，用于發(fā)送和接收J(rèn)SON數(shù)據(jù)包；根據(jù)Web Service接口的地址向服務(wù)端發(fā)送調(diào)用所需的參數(shù)及參數(shù)值；使用Eval()函數(shù)將返回的JSON數(shù)據(jù)包轉(zhuǎn)換為JSON對象，并按照一定的規(guī)則讀取數(shù)據(jù)；針對地圖與企業(yè)信息進行的動態(tài)更新、屬性操作的異步查詢和結(jié)果處理或完成前臺數(shù)據(jù)驗證、動態(tài)加載列表框等頁面控件中的內(nèi)容以及創(chuàng)建工具提示、提供表單自動完成等。

圖1 客戶端架構(gòu)圖

2.2 基于Web Service的服務(wù)端設(shè)計

Web Service簡單來說就是一個對外的接口，里面有函數(shù)可供外部用戶調(diào)用。使用Web Service將數(shù)據(jù)通過Web服務(wù)的形式提供給用戶，隱藏了軟件運行的平臺差異、屏蔽了軟件之間數(shù)據(jù)結(jié)構(gòu)的差異，并且任何客戶端都可以通過授權(quán)調(diào)用相關(guān)的服務(wù)。在基于Google Map的輕量級的企業(yè)信息標(biāo)注系統(tǒng)中采用Web Service作為服務(wù)端，其封裝了特定的功能，并向外界提供可以調(diào)用的Web服務(wù)接口，當(dāng)服務(wù)使用者遠(yuǎn)程調(diào)用該Web服務(wù)接口，Web服務(wù)調(diào)用相應(yīng)的程序，處理請求并返回操作結(jié)果，其架構(gòu)如圖2所示。服務(wù)端提供的信息服務(wù)主要由企業(yè)信息服務(wù)與地理信息服務(wù)組成。其中企業(yè)信息服務(wù)主要包括對企業(yè)信息的查詢，處理，分類等。而地理信息服務(wù)主要實現(xiàn)地圖相關(guān)數(shù)據(jù)的處理，解析用戶的空間查詢請求，并根據(jù)用戶的請求調(diào)用相關(guān)函數(shù)執(zhí)行，完成后將結(jié)果返回給客戶端，如地圖的沿線查詢等。

圖2 基于Web Service的服務(wù)端架構(gòu)

2.3 基于Google Map輕量級的企業(yè)信息標(biāo)注系統(tǒng)架構(gòu)

基于Google Map輕量級的企業(yè)信息標(biāo)注系統(tǒng)以SOA為基礎(chǔ)，采用AJAX客戶端和Web Service服務(wù)器端結(jié)構(gòu)設(shè)計，其系統(tǒng)架構(gòu)如圖3所示?？蛻舳酥饕蛻舳藶g覽器、Google Map地圖服務(wù)與AJAX引擎，其中Google Map地圖服務(wù)是調(diào)用相關(guān)方法把企業(yè)數(shù)據(jù)與Google Map混搭，進行信息的圖上展示及圖上信息操作等；Ajax引擎的主要是控制客戶端與服務(wù)端進行交互。服務(wù)端采用Web Service進行搭建。主要包括UDDI(服務(wù)注冊中心)和應(yīng)用服務(wù)組成，UDDI提供了Web Service的注冊和查找的機制，通過它可以注冊服務(wù)和查找定位所需服務(wù)。UDDI本身也是Web服務(wù)，使用者可通過JSON消息來訪問UDDI。應(yīng)用服務(wù)由若干企業(yè)信息服務(wù)、地理信息服務(wù)及標(biāo)準(zhǔn)Web服務(wù)構(gòu)成，提供實際的業(yè)務(wù)功能，如執(zhí)行算法、流程控制或從數(shù)據(jù)庫中獲取數(shù)據(jù)等。數(shù)據(jù)庫則主要由企業(yè)信息數(shù)據(jù)庫及空間數(shù)據(jù)庫組成，企業(yè)信息數(shù)據(jù)庫包含企業(yè)的相關(guān)信息，空間數(shù)據(jù)庫則包含行政區(qū)劃信息與企業(yè)的空間位置、周邊區(qū)域的空間信息。

圖3 輕量級的企業(yè)信息標(biāo)注系統(tǒng)架構(gòu)

3 南寧市企業(yè)信息標(biāo)注系統(tǒng)實現(xiàn)方法

南寧市企業(yè)信息標(biāo)注系統(tǒng)旨在改變中小企業(yè)營銷預(yù)算短缺、營銷手段單一、效果不明顯，營銷競爭激烈、目標(biāo)客戶難把握等問題，以中小企業(yè)的發(fā)展需要及政府的決策需要為出發(fā)點，把企業(yè)信息通過地圖表達(dá)，直觀的地圖展示可以讓對企業(yè)感興趣的客戶更加輕松地了解企業(yè)，并且也可為政府的決策提供支撐。該系統(tǒng)在ASP.Net(C#)的環(huán)境下采用AJAX客戶端—Web Service服務(wù)端的方式進行搭建，以SqlServer2005作為系統(tǒng)數(shù)據(jù)庫，利用Google Maps API進行二次開發(fā)，實現(xiàn)了南寧市企業(yè)信息的地圖標(biāo)注，信息展示及空間查詢等。

3.1 系統(tǒng)功能分析

南寧市企業(yè)信息標(biāo)注系統(tǒng)結(jié)合南寧市管轄的6縣6城區(qū)范圍內(nèi)的中小企業(yè)的管理推廣以及政府的決策需要進行設(shè)計，涵蓋了與企業(yè)相關(guān)的各方面信息。其主要功能包括:地圖基本操作、地理信息關(guān)鍵字查詢、空間分析查詢、企業(yè)信息管理等，具體的系統(tǒng)功能設(shè)計如圖4所示。

圖4 南寧市企業(yè)信息標(biāo)注系統(tǒng)功能

3.2 系統(tǒng)功能實現(xiàn)

(1)AJAX引擎實現(xiàn)方法

AJAX引擎主要實現(xiàn)響應(yīng)客戶的請求及調(diào)用和接收Web Service的響應(yīng)等功能。在系統(tǒng)開發(fā)時，由于AJAX在不同瀏覽器中的實現(xiàn)存在著一些差異，如IE6支持的是ActiveXObject類型，而在FireFox中則直接支持XMLHttpRequest類型，因此為了更好地保證兼容性，在南寧市企業(yè)信息標(biāo)注系統(tǒng)中采用輕量級的JS框架jQuery實現(xiàn)信息的異步發(fā)送。AJAX引擎主要調(diào)用jQuery.AJAX ([options])方法加載數(shù)據(jù)。其實現(xiàn)的代碼如下:

$.AJAX({

type："POST"，

contentType："application/JSON"，

url："WS_hubo.asmx/InsertmarkerInfo"，

data："{"+strData+"}"，

dataType：'JSON'，

success：function(){

var JSON=eval('('+result.d+')')；

}

})；

其中type表示Http請求的方式(POST或GET)；contentType指定發(fā)送信息至服務(wù)器時內(nèi)容編碼類型，因在系統(tǒng)中使用JSON數(shù)據(jù)包進行交互，所以指定編碼類型為JSON；url指所需調(diào)用的Web Service接口地址；data為發(fā)送到Web Service接口的數(shù)據(jù)包括參數(shù)名與參數(shù)值；dataType為預(yù)期調(diào)用Web Service接口返回結(jié)果的數(shù)據(jù)類型，在這里指定為JSON；success函數(shù)表示W(wǎng)eb Service響應(yīng)成功后的回調(diào)函數(shù)，其結(jié)果由Web Service返回，并根據(jù)dataType參數(shù)將需返回的結(jié)果轉(zhuǎn)換為相應(yīng)的格式。針對發(fā)送的數(shù)據(jù)采用eval將傳回的JSON格式的數(shù)據(jù)轉(zhuǎn)化為JSON對象進行解析。

(2)基于Web Service服務(wù)端的調(diào)用與響應(yīng)

.NET平臺中內(nèi)建了對Web Service的支持，包括Web Service的構(gòu)建與使用。與其他的開發(fā)平臺不同，使用.NET平臺無需使用其他的工具或SDK就可完成Web Service的開發(fā)，.NET中對服務(wù)器端的請求處理和對客戶端的發(fā)送以及消息的接受都提供了支持。創(chuàng)建Web Service時，只需建立一個.asmx文件，設(shè)置好相應(yīng)的屬性，就可進行編寫。如需對外部暴露某個函數(shù)時，必須在函數(shù)上面添加函數(shù)的描述信息，如[WebMethod (Description=”函數(shù)的描述信息”)]。如該函數(shù)未聲明，將無法被外部用戶調(diào)用。當(dāng)Web Service被調(diào)用時，其響應(yīng)的過程如下:

①根據(jù)Web Service接口名與前臺發(fā)送的調(diào)用接口所需的參數(shù)名和參數(shù)類型，判斷Web Service下是否存在與調(diào)用要求一致的接口，若存在，則執(zhí)行下一步；若否，則返回503錯誤。

②根據(jù)該接口中的參數(shù)名與參數(shù)值，調(diào)用相關(guān)的函數(shù)完成該接口功能。

③當(dāng)處理完畢后，將返回的數(shù)據(jù)按封裝成一個JSON格式的字段串，并返回給AJAX引擎。在AJAX引擎中轉(zhuǎn)換為JSON對象后按層次規(guī)則讀取。

(3)企業(yè)信息標(biāo)注功能實現(xiàn)

企業(yè)標(biāo)注功能主要在Google Map地圖放置一個可拖動的標(biāo)記，把該標(biāo)記拖動到企業(yè)的圖上位置，點擊標(biāo)記可彈出企業(yè)信息輸入窗口，完成信息輸入后把企業(yè)信息以及所處位置的空間信息存入數(shù)據(jù)庫中。其具體實現(xiàn)為:使用Marker類根據(jù)指定屬性創(chuàng)建一個可拖動的標(biāo)記，注意在創(chuàng)建標(biāo)記時，設(shè)置該標(biāo)記draggable屬性值為true，否則該標(biāo)記無法拖動，為標(biāo)記綁定點擊事件。調(diào)用標(biāo)記的setMap方法在指定地圖渲染標(biāo)記。為指定的地圖對象添加點擊事件，當(dāng)觸發(fā)其點擊事件時，根據(jù)mouseEvent參數(shù)獲取該點擊位置的經(jīng)緯度，并根據(jù)該經(jīng)緯度在調(diào)用標(biāo)記的setPosition方法，把標(biāo)記放置在該點擊位置。使用InfoWindow類創(chuàng)建一個創(chuàng)建帶有指定屬性的信息窗口，當(dāng)標(biāo)記的點擊事件觸發(fā)時，調(diào)用信息窗口的setContent方法把設(shè)置好的企業(yè)信息添加窗口的Html代碼載入，調(diào)用open方法在標(biāo)記的右上方打開信息窗口。當(dāng)提交企業(yè)信息時，把企業(yè)的信息拼接成JSON格式的字符串，使用AJAX引擎把需要提交的信息及條件參數(shù)發(fā)送指定相應(yīng)的Web Service地址，在Web Service中使用泛型接收J(rèn)SON格式的企業(yè)信息，再調(diào)用相應(yīng)的函數(shù)添加入數(shù)據(jù)庫中。其實現(xiàn)的效果如圖5所示。

圖5 企業(yè)信息標(biāo)注實現(xiàn)效果

(4)企業(yè)空間查詢功能實現(xiàn)

為了更好地對企業(yè)信息進行分析，南寧市企業(yè)信息標(biāo)注系統(tǒng)中設(shè)計實現(xiàn)了企業(yè)信息的沿線查詢、自定義區(qū)域查詢、圓查詢及矩形查詢4種查詢方式以滿足用戶對企業(yè)信息的查詢需求。這4種空間查詢方式可讓用戶在地圖上繪制相應(yīng)的圖形，并根據(jù)一定的算法查詢出繪制區(qū)域內(nèi)的企業(yè)信息。

以沿線查詢?yōu)槔?。沿線查詢是指根據(jù)用戶在地圖上繪制的折線，查詢出位于該折線上或周圍一定范圍內(nèi)的信息標(biāo)注點。其實現(xiàn)算法是:假設(shè)在Google Map中存在一條線段P1P2，根據(jù)P1、P2兩點的經(jīng)緯度線構(gòu)成直角三角形△OP1P2，如圖6所示。設(shè)P1P2上有一點P，從點P沿Y軸負(fù)方向作射線，與OP1邊交于點A。若AP平行于OP2，根據(jù)三角形相似定理中的等比公式，可推出AP/OP2=AP1/OP1=PP1/P2P1，即可確定點P在P1P2上。當(dāng)點P在P1P2上時，可推出AP× OP1—OP2×AP1=0，反之，該關(guān)系不等于0。因此可利用該關(guān)系的差值及給定的查詢距離值模擬緩沖區(qū)分析，設(shè)關(guān)系差值為L，L=AP×OP1—OP2×AP1，D為查詢范圍的距離值，若L在(-D，D)范圍內(nèi)，則得出點P在P1P2緩沖區(qū)內(nèi)；若超出該范圍，則點P不在P1P2緩沖區(qū)內(nèi)。四種企業(yè)信息的空間查詢方式的實現(xiàn)效果如圖7所示。

圖6 沿線查詢示意圖

圖7 企業(yè)信息空間查詢實現(xiàn)效果

4 結(jié) 語

本文從實現(xiàn)技術(shù)、系統(tǒng)架構(gòu)及應(yīng)用實例三方面出發(fā)，分析了AJAX與Web Service及Google Map API三者在輕量級企業(yè)信息標(biāo)注系統(tǒng)中的應(yīng)用，并且針對地圖服務(wù)空間分析查詢較弱的問題，設(shè)計并實現(xiàn)了基于Google Map的空間查詢算法，提出基于Google Map的輕量級企業(yè)信息標(biāo)注系統(tǒng)的解決方案，為中小企業(yè)的發(fā)展以及政府的決策提供了參考。實踐表明，搭建的南寧市企業(yè)信息標(biāo)注系統(tǒng)具有響應(yīng)速度快、客戶端功能豐富、用戶體驗良好以及應(yīng)用門檻較低等優(yōu)勢，為輕量級在線地圖服務(wù)系統(tǒng)的開發(fā)提供了借鑒。

[1] 李愷毅，李景文，黃俊華等.基于Web Services的空間信息服務(wù)平臺設(shè)計方法[J].桂林理工大學(xué)學(xué)報，2010，30 (4)：585～589.

[2] 徐卓揆.基于HTML5_Ajax和Web Service的WebGIS研究[J].測繪科學(xué)，2012，37(1)：145～147.

[3] 羅英偉，黃寶琦，汪小林等.輕量級WebGIS系統(tǒng)PKGML [J].計算機輔助設(shè)計與圖形學(xué)學(xué)報，2005，17(4)：852～861.

[4] 李細(xì)杰，鄔群勇，蔡旺華.基于JSON的輕量級WebGIS模型與應(yīng)用[J].測繪工程，2011，20(2)：53～56.

[5] 葉波，王芳，朱明等.Google地圖服務(wù)與Web服務(wù)信息交互方法[J].桂林理工大學(xué)學(xué)報，2011，31(3)：381～385.

[6] 劉釗，朱小冬，王紅亮等.基于SVG的輕量級WebGIS的空間分析研究[J].測繪科學(xué)，2009，34(4)：129～131.

[7] 江平，劉民士.射線法判斷點與包含簡單曲線多邊形關(guān)系的完善[J].測繪科學(xué)，2009，34(5)：220～222.

[8] 陳瑞卿，周健，虞烈.一種判斷點與多邊形關(guān)系的快速算法[J].西安交通大學(xué)學(xué)報，2007，47(1)：59～63.

Design Procedure of Lightweight Enterprise Information Labeling System Based on Google M ap

Fu Yu1，2，Li Jingwen1，2，Wang Hui1，2，Chen Junren1，2
(1.College of Geomatics and Geoinformation，Guilin University of Technology，Guilin 541004，China；2.Guangxi Key Laboratory of Spatial Information and Geomatics，Guilin 541004，China)

This paper based on the developing demand ofmedium-sized and small enterprises，uses the structure of service-oriented，utilizes natural combination of Ajax technology and Google Map API，aswell asweb service technology，it designs lightweight enterprise information labeling system which is based on Google Map，discusses the design and implementmethod of lightweight system based on Google Map，meanwhile it realizes enterprise information labeling system of Nan ning and spatial query of enterprise information based on Google Map.

enterprise；AJAX；googlemap；web service

傅毓1，2?，李景文1，2，王輝1，2，陳俊任1，2

1672-8262(2013)03-25-05

P208.2

A

2012—12—01

傅毓(1986—)，男，碩士研究生，從事地圖服務(wù)二次開發(fā)方面的研究。

廣西自然科學(xué)基金重點項目(桂科自2011GXNSFD018003)；廣西空間信息與測繪重點實驗室基金項目(桂科能1103108-03)。