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

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

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

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

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

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

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

1 引 言

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

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

在系統(tǒng)開發(fā)過程中，輕量級與重量級之間的區(qū)別在于架構與對象耦合度及對象是否很難脫離架構運行。輕量級系統(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)，很少與服務器交互[6]等特性。根據(jù)輕量級系統(tǒng)的特性，基于Google Map的輕量級企業(yè)信息標注系統(tǒng)采用SOA(面向服務的體系架構)，通過Web Service發(fā)布服務，服務使用者調(diào)用發(fā)布的服務，在客戶端與Google Map地圖服務混搭，實現(xiàn)企業(yè)信息的圖上標注與展示。該系統(tǒng)將SOA優(yōu)點和實際應用相結(jié)合，不僅具有WebGIS應用的基本功能，而且還可根據(jù)相關算法實現(xiàn)空間分析查詢功能等。

2.1 基于AJAX引擎的客戶端設計

AJAX引擎相當于在客戶端和服務端中搭建一個橋梁，使客戶端與服務器響應異步化，其架構如圖1所示。通過AJAX引擎向服務端發(fā)送請求時，每次只和服務端交換需要的數(shù)據(jù)，避免客戶端對服務器的請求致使瀏覽器頁面或地圖整個刷新，加快了頁面的響應速度。當發(fā)送請求時可預先讀取客戶端緩存，這樣可平衡客戶端與服務端的壓力。AJAX引擎主要實現(xiàn)XMLHttpRequest對象的生成，用于發(fā)送和接收JSON數(shù)據(jù)包；根據(jù)Web Service接口的地址向服務端發(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 客戶端架構圖

2.2 基于Web Service的服務端設計

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

圖2 基于Web Service的服務端架構

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

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

圖3 輕量級的企業(yè)信息標注系統(tǒng)架構

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

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

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

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

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

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

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

AJAX引擎主要實現(xiàn)響應客戶的請求及調(diào)用和接收Web Service的響應等功能。在系統(tǒng)開發(fā)時，由于AJAX在不同瀏覽器中的實現(xiàn)存在著一些差異，如IE6支持的是ActiveXObject類型，而在FireFox中則直接支持XMLHttpRequest類型，因此為了更好地保證兼容性，在南寧市企業(yè)信息標注系統(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ā)送信息至服務器時內(nèi)容編碼類型，因在系統(tǒng)中使用JSON數(shù)據(jù)包進行交互，所以指定編碼類型為JSON；url指所需調(diào)用的Web Service接口地址；data為發(fā)送到Web Service接口的數(shù)據(jù)包括參數(shù)名與參數(shù)值；dataType為預期調(diào)用Web Service接口返回結(jié)果的數(shù)據(jù)類型，在這里指定為JSON；success函數(shù)表示W(wǎng)eb Service響應成功后的回調(diào)函數(shù)，其結(jié)果由Web Service返回，并根據(jù)dataType參數(shù)將需返回的結(jié)果轉(zhuǎn)換為相應的格式。針對發(fā)送的數(shù)據(jù)采用eval將傳回的JSON格式的數(shù)據(jù)轉(zhuǎn)化為JSON對象進行解析。

(2)基于Web Service服務端的調(diào)用與響應

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

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

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

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

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

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

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

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

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

以沿線查詢?yōu)槔Ｑ鼐€查詢是指根據(jù)用戶在地圖上繪制的折線，查詢出位于該折線上或周圍一定范圍內(nèi)的信息標注點。其實現(xiàn)算法是:假設在Google Map中存在一條線段P1P2，根據(jù)P1、P2兩點的經(jīng)緯度線構成直角三角形△OP1P2，如圖6所示。設P1P2上有一點P，從點P沿Y軸負方向作射線，與OP1邊交于點A。若AP平行于OP2，根據(jù)三角形相似定理中的等比公式，可推出AP/OP2=AP1/OP1=PP1/P2P1，即可確定點P在P1P2上。當點P在P1P2上時，可推出AP× OP1—OP2×AP1=0，反之，該關系不等于0。因此可利用該關系的差值及給定的查詢距離值模擬緩沖區(qū)分析，設關系差值為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)技術、系統(tǒng)架構及應用實例三方面出發(fā)，分析了AJAX與Web Service及Google Map API三者在輕量級企業(yè)信息標注系統(tǒng)中的應用，并且針對地圖服務空間分析查詢較弱的問題，設計并實現(xiàn)了基于Google Map的空間查詢算法，提出基于Google Map的輕量級企業(yè)信息標注系統(tǒng)的解決方案，為中小企業(yè)的發(fā)展以及政府的決策提供了參考。實踐表明，搭建的南寧市企業(yè)信息標注系統(tǒng)具有響應速度快、客戶端功能豐富、用戶體驗良好以及應用門檻較低等優(yōu)勢，為輕量級在線地圖服務系統(tǒng)的開發(fā)提供了借鑒。

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

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

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

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

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

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

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

[8] 陳瑞卿，周健，虞烈.一種判斷點與多邊形關系的快速算法[J].西安交通大學學報，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—)，男，碩士研究生，從事地圖服務二次開發(fā)方面的研究。

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