基于Google Map的輕量級企業信息標注系統設計方法

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

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

基于Google Map的輕量級企業信息標注系統設計方法

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

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

企業；AJAX；Google Map；Web Service

1 引 言

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

2 基于Google Map輕量級企業信息標注系統框架設計

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

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

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

圖1 客戶端架構圖

2.2 基于Web Service的服務端設計

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

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

2.3 基于Google Map輕量級的企業信息標注系統架構

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

圖3 輕量級的企業信息標注系統架構

3 南寧市企業信息標注系統實現方法

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

3.1 系統功能分析

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

圖4 南寧市企業信息標注系統功能

3.2 系統功能實現

(1)AJAX引擎實現方法

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

$.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指定發送信息至服務器時內容編碼類型，因在系統中使用JSON數據包進行交互，所以指定編碼類型為JSON；url指所需調用的Web Service接口地址；data為發送到Web Service接口的數據包括參數名與參數值；dataType為預期調用Web Service接口返回結果的數據類型，在這里指定為JSON；success函數表示Web Service響應成功后的回調函數，其結果由Web Service返回，并根據dataType參數將需返回的結果轉換為相應的格式。針對發送的數據采用eval將傳回的JSON格式的數據轉化為JSON對象進行解析。

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

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

①根據Web Service接口名與前臺發送的調用接口所需的參數名和參數類型，判斷Web Service下是否存在與調用要求一致的接口，若存在，則執行下一步；若否，則返回503錯誤。

②根據該接口中的參數名與參數值，調用相關的函數完成該接口功能。

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

(3)企業信息標注功能實現

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

圖5 企業信息標注實現效果

(4)企業空間查詢功能實現

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

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

圖6 沿線查詢示意圖

圖7 企業信息空間查詢實現效果

4 結 語

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

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

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

[3] 羅英偉，黃寶琦，汪小林等.輕量級WebGIS系統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—)，男，碩士研究生，從事地圖服務二次開發方面的研究。

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