基于Google Maps的不動(dòng)產(chǎn)可視化管理系統(tǒng)研究

趙建保

（1.廣東農(nóng)工商職業(yè)技術(shù)學(xué)院，廣東 廣州510507）

不動(dòng)產(chǎn)具有地理位置固定、個(gè)別性、耐久性和供給數(shù)量的有限性等自然特性，又具有價(jià)值量大、用途多樣性、權(quán)益受限性、變現(xiàn)性差和保值增值性等社會(huì)經(jīng)濟(jì)特性。地理位置是決定不動(dòng)產(chǎn)價(jià)值的根本因素，不動(dòng)產(chǎn)管理分為物業(yè)管理、資產(chǎn)管理、組合投資管理3個(gè)層次[1,2]。

地理信息系統(tǒng)是分析和處理空間數(shù)據(jù)不可或缺的工具。系統(tǒng)開發(fā)方式有2種:一是采用標(biāo)準(zhǔn)的GIS電子地圖開發(fā)平臺(tái)進(jìn)行開發(fā)，如 ArcGIS，MapXtreme和SuperMap平臺(tái)，這種方式需購(gòu)買開發(fā)平臺(tái)和電子地圖，二次開發(fā)工作量較大。二是采用Google Maps進(jìn)行開發(fā)。Google Maps提供了免費(fèi)開放的電子地圖和強(qiáng)大的地方信息數(shù)據(jù)庫(kù)，Google Maps JavaScript API編程接口提供了大量實(shí)用工具，支持處理地圖，支持向地圖添加內(nèi)容，實(shí)現(xiàn)位置定位、個(gè)性化圖示標(biāo)記、設(shè)置標(biāo)簽、設(shè)置提示、地圖縮放、平移等功能[3]，目前使用發(fā)行版第3版。運(yùn)用Google JavaScript API可構(gòu)建位置服務(wù)、地理空間數(shù)據(jù)的互動(dòng)可視化內(nèi)容和自定義地圖等地圖應(yīng)用[4]?？臻g數(shù)據(jù)是不動(dòng)產(chǎn)管理信息化的基礎(chǔ)，在Google地圖和Google Maps JavaScript API基礎(chǔ)上，加載企業(yè)不動(dòng)產(chǎn)地理信息，增加不動(dòng)產(chǎn)的屬性數(shù)據(jù)，提供空間基礎(chǔ)數(shù)據(jù)服務(wù)、經(jīng)營(yíng)管理數(shù)據(jù)服務(wù)和決策支持服務(wù)，實(shí)現(xiàn)對(duì)不動(dòng)產(chǎn)的直觀高效科學(xué)管理，能滿足企業(yè)不動(dòng)產(chǎn)管理信息化和可視化的應(yīng)用需求。

1 系統(tǒng)功能需求分析

支持在Google Maps上繪制不動(dòng)產(chǎn)矢量圖。用戶可直接在地圖上繪制不動(dòng)產(chǎn)矢量圖，系統(tǒng)自動(dòng)采集矢量圖經(jīng)緯度數(shù)據(jù)，并據(jù)此生成矢量圖，通過(guò)在地圖上疊加不動(dòng)產(chǎn)矢量圖層，為不動(dòng)產(chǎn)管理的各級(jí)人員提供一個(gè)統(tǒng)一的電子地圖入口，實(shí)現(xiàn)不動(dòng)產(chǎn)在Google地圖上的可視化顯示。

支持在不動(dòng)產(chǎn)矢量圖上添加屬性信息功能?？勺芳禹?xiàng)目名稱、項(xiàng)目地址、項(xiàng)目用途、面積、類別等信息，實(shí)現(xiàn)不動(dòng)產(chǎn)空間數(shù)據(jù)與屬性數(shù)據(jù)的聯(lián)合操控。

支持不動(dòng)產(chǎn)的信息分類查詢和明細(xì)查詢功能。支持按不動(dòng)產(chǎn)類型分類查詢，支持對(duì)特定不動(dòng)產(chǎn)明細(xì)信息查詢。

提供不動(dòng)產(chǎn)的分布情況漫游功能。

支持地圖基本操作，如地圖放大縮小、不動(dòng)產(chǎn)分類顯示等功能。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)架構(gòu)

系統(tǒng)體系結(jié)構(gòu)采用B/S架構(gòu)模式，包括3層體系結(jié)構(gòu)，分為表現(xiàn)層、業(yè)務(wù)邏輯層和數(shù)據(jù)層，分別對(duì)應(yīng)瀏覽器、Web服務(wù)器和數(shù)據(jù)庫(kù)服務(wù)器3層體系架構(gòu)，如圖1所示。Web瀏覽器通過(guò)Web服務(wù)器獲取地圖服務(wù)和不動(dòng)產(chǎn)信息數(shù)據(jù)。Apache Web服務(wù)器從Google Maps服務(wù)器獲取地圖數(shù)據(jù)及地方數(shù)據(jù)庫(kù)數(shù)據(jù)，從MySQL數(shù)據(jù)庫(kù)獲取不動(dòng)產(chǎn)屬性數(shù)據(jù)，實(shí)現(xiàn)了不動(dòng)產(chǎn)矢量圖添加、矢量圖更新、矢量圖分類漫游、屬性數(shù)據(jù)維護(hù)更新等操作。MySQL數(shù)據(jù)庫(kù)服務(wù)器存儲(chǔ)系統(tǒng)不動(dòng)產(chǎn)屬性數(shù)據(jù)，Google Maps服務(wù)器提供GIS服務(wù)和地圖數(shù)據(jù)服務(wù)[5-8]。

2.2 數(shù)據(jù)庫(kù)設(shè)計(jì)

數(shù)據(jù)庫(kù)主要包括不動(dòng)產(chǎn)信息表和用戶信息表，其中不動(dòng)產(chǎn)信息表結(jié)構(gòu)如表1所示。

圖1 系統(tǒng)架構(gòu)

表1 不動(dòng)產(chǎn)信息表

3 系統(tǒng)關(guān)鍵模塊實(shí)現(xiàn)

前端開發(fā)采用HTML5+CSS+JavaScript技術(shù)，開發(fā)環(huán)境為WAMP，即操作系統(tǒng)為Windows 2003，Web服務(wù)器為Apache，數(shù)據(jù)庫(kù)服務(wù)器為MySQL，開發(fā)語(yǔ)言為PHP，使用AJAX處理客戶端與服務(wù)器端的數(shù)據(jù)通信。系統(tǒng)實(shí)現(xiàn)過(guò)程包括不動(dòng)產(chǎn)數(shù)據(jù)采集、Google地圖界面定制、不動(dòng)產(chǎn)矢量圖的顯示與交互事件添加、不動(dòng)產(chǎn)添加、修改和刪除模塊開發(fā)、不動(dòng)產(chǎn)明細(xì)查詢、不動(dòng)產(chǎn)分類漫游模塊開發(fā)等過(guò)程。

3.1 不動(dòng)產(chǎn)數(shù)據(jù)采集

不動(dòng)產(chǎn)數(shù)據(jù)采集包括空間屬性數(shù)據(jù)采集和產(chǎn)權(quán)屬性數(shù)據(jù)采集2項(xiàng)工作?？臻g屬性數(shù)據(jù)采集內(nèi)容有地塊坐落、測(cè)量面積、層次等級(jí)、地段牌號(hào)等[9]。產(chǎn)權(quán)屬性數(shù)據(jù)采集內(nèi)容有名稱、編號(hào)、地址、開發(fā)單位、建設(shè)單位、用途、許可證信息等產(chǎn)權(quán)屬性數(shù)據(jù)。

3.2 Google地圖界面定制模塊

地圖界面定制模塊主要實(shí)現(xiàn)將頁(yè)面劃分為交互控制區(qū)和地圖顯示區(qū)，#map-canvas提供了地圖顯示的容器。首先使用 聲明將應(yīng)用聲明為HTML5，采用DIV+CSS布局技術(shù)將頁(yè)面分成左右兩欄，使用 script 標(biāo)記引用 Maps API JavaScript，其代碼是：

然后，定義初始化函數(shù)initialize，定義地圖選項(xiàng)mapOptions設(shè)置地圖中心點(diǎn)經(jīng)緯度、縮放級(jí)別和地圖類型等，再使用Map類的對(duì)象依據(jù)地圖選項(xiàng)創(chuàng)建嵌入#map-canvas的地圖對(duì)象，并設(shè)置Maps API為異步加載方式，代碼如下[10]：

var map;var myLatlng=[];var polygon=[];var coords=[];

function initialize() {

var myLatlng = new google.maps.LatLng(23. 1059047 2563574,113.32382440567017); var mapOptions = {zoom:17,center:myLatlng};

map = new google.maps.Map(document.getElement ById('map-canvas'),mapOptions);

google.maps.event.addDomListener(window, 'load',initialize);

嵌入Google Maps地圖后，地圖界面默認(rèn)提供了平移、縮放和地圖與衛(wèi)星地圖切換功能。

3.3 不動(dòng)產(chǎn)矢量圖的顯示與交互事件添加

在地圖初始化函數(shù)執(zhí)行前，從MySQL數(shù)據(jù)庫(kù)遍歷所有不動(dòng)產(chǎn)數(shù)據(jù)，對(duì)于矢量圖經(jīng)緯度數(shù)據(jù)$myarr[‘pshape’]需先按分隔符&拆分為坐標(biāo)點(diǎn)，構(gòu)建生成矢量圖的坐標(biāo)數(shù)組coords，通過(guò)Polygon類并以coords數(shù)組為參數(shù)構(gòu)建不動(dòng)產(chǎn)矢量圖。setMap()方法用于在地圖上顯示該矢量圖，再對(duì)該矢量圖添加鼠標(biāo)事件mouseover，實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到矢量圖上時(shí)執(zhí)行javascript定義的showHint函數(shù)。該函數(shù)定義在不動(dòng)產(chǎn)明細(xì)查詢模塊中，采用Ajax技術(shù)顯示不動(dòng)產(chǎn)屬性數(shù)據(jù)，實(shí)現(xiàn)不動(dòng)產(chǎn)矢量圖顯示、產(chǎn)權(quán)數(shù)據(jù)明細(xì)查詢功能，達(dá)到不動(dòng)產(chǎn)空間數(shù)據(jù)與屬性數(shù)據(jù)聯(lián)合操控的目的，代碼如下：

3.4 不動(dòng)產(chǎn)添加模塊

不動(dòng)產(chǎn)添加模塊實(shí)現(xiàn)不動(dòng)產(chǎn)矢量圖輪廓點(diǎn)經(jīng)緯度的捕捉和不動(dòng)產(chǎn)屬性數(shù)據(jù)輸入，不動(dòng)產(chǎn)屬性數(shù)據(jù)輸入通過(guò)HTML 表單來(lái)實(shí)現(xiàn)，其中項(xiàng)目名稱pname、項(xiàng)目編號(hào)pnumID、項(xiàng)目地址paddress、開發(fā)單位pdeveloper、建設(shè)單位perector、項(xiàng)目用途pfunction、面積parea均為文本框類型。不動(dòng)產(chǎn)類型ptype輸入采用下拉列表項(xiàng)實(shí)現(xiàn)，輪廓數(shù)據(jù)pshape輸入用多行文本框來(lái)實(shí)現(xiàn)，其表單代碼為：。除輪廓圖經(jīng)緯度數(shù)據(jù)外，其他數(shù)據(jù)直接從鍵盤輸入，輪廓數(shù)據(jù)則直接從地圖界面中捕捉，實(shí)現(xiàn)的關(guān)鍵在于為地圖添加鼠標(biāo)單擊事件并把當(dāng)前鼠標(biāo)單擊點(diǎn)經(jīng)緯度數(shù)據(jù)直接填入輪廓數(shù)據(jù)表單pshape，其不動(dòng)產(chǎn)經(jīng)緯度捕捉代碼是：

3.5 不動(dòng)產(chǎn)明細(xì)查詢模塊

地圖應(yīng)用頁(yè)面刷新需重新下載地圖和再次執(zhí)行后臺(tái)程序，程序設(shè)計(jì)時(shí)應(yīng)盡量控制頁(yè)面刷新次數(shù)，提高系統(tǒng)響應(yīng)性能。對(duì)于不動(dòng)產(chǎn)信息提示功能，采用Ajax能顯著地提高系統(tǒng)響應(yīng)性能。實(shí)現(xiàn)信息提示的Ajax代碼為：

3.6 不動(dòng)產(chǎn)分類漫游模塊

將不動(dòng)產(chǎn)按照地塊、商業(yè)地產(chǎn)、住宅和其他4種類型進(jìn)行分類管理和篩選，表單部分采用HTML表單的復(fù)選框，通過(guò)onchange檢測(cè)復(fù)選框的變化，然后再通過(guò)Ajax刷新不動(dòng)產(chǎn)矢量圖的顯示。

4 應(yīng)用效果

圖2 系統(tǒng)操作界面

系統(tǒng)操作界面如圖2所示，位于左側(cè)的交互控制區(qū)提供了分類漫游導(dǎo)航鏈接、不動(dòng)產(chǎn)插入表單和不動(dòng)產(chǎn)明細(xì)信息提示的顯示區(qū)域，位于頁(yè)面右側(cè)的是地圖顯示區(qū)。將不動(dòng)產(chǎn)數(shù)據(jù)輸入不動(dòng)產(chǎn)添加表單，調(diào)整地圖縮放級(jí)別，然后直接在不動(dòng)產(chǎn)輪廓上單擊采集輪廓點(diǎn)經(jīng)緯度數(shù)據(jù)，表單提交后屬性數(shù)據(jù)和經(jīng)緯度數(shù)據(jù)都保存到MySQL數(shù)據(jù)庫(kù)中。不動(dòng)產(chǎn)的顯示及屬性數(shù)據(jù)通過(guò)查詢數(shù)據(jù)庫(kù)得到。當(dāng)鼠標(biāo)移動(dòng)到矢量圖時(shí)，在不動(dòng)產(chǎn)信息區(qū)顯示該不動(dòng)產(chǎn)的屬性數(shù)據(jù)，信息直觀全面，也可以通過(guò)鏈接刪除和修改當(dāng)前不動(dòng)產(chǎn)信息。不動(dòng)產(chǎn)分類查詢表單提供了按不動(dòng)產(chǎn)類型進(jìn)行分類查詢，也實(shí)現(xiàn)了地圖基本操作和不動(dòng)產(chǎn)漫游功能。

5 結(jié) 語(yǔ)

將不動(dòng)產(chǎn)地理位置信息與傳統(tǒng)不動(dòng)產(chǎn)管理系統(tǒng)相結(jié)合，基于Google Maps、PHP+MySQL和網(wǎng)站前端技術(shù)，分析不動(dòng)產(chǎn)管理業(yè)務(wù)需求，進(jìn)行系統(tǒng)架構(gòu)設(shè)計(jì)，編程實(shí)現(xiàn)了系統(tǒng)的關(guān)鍵模塊。系統(tǒng)能夠彌補(bǔ)傳統(tǒng)不動(dòng)產(chǎn)信息系統(tǒng)缺乏地理屬性的缺陷，具有不動(dòng)產(chǎn)可視化程度高、信息與地理空間信息融合、可擴(kuò)展性強(qiáng)等特點(diǎn)。能為管理人員提供不動(dòng)產(chǎn)的分布狀況及詳細(xì)信息，為客戶提供可視化的不動(dòng)產(chǎn)分布及漫游功能，提供了一種較為便捷可行的不動(dòng)產(chǎn)管理系統(tǒng)建設(shè)方案。

[1]王豐. 不動(dòng)產(chǎn)押品管理信息系統(tǒng)研究[D]. 南京：南京師范大學(xué)，2012

[2]楊福云. 提升廣東農(nóng)墾城市不動(dòng)產(chǎn)經(jīng)營(yíng)效率之探討[J]. 中國(guó)農(nóng)墾，2008(10): 51-52

[3]錢慧如,羅榮良,朱勇. Google Maps在渠道管理系統(tǒng)中的應(yīng)用[J]. 商場(chǎng)現(xiàn)代化，2010(9):22

[4]Google. Google Maps API[EB/OL]. https://developers.google.com/maps/?hl=zh-CN，2013-12-27

[5]唐桂文,譚衍濤. 基于AJAX和Google Maps API的WebGIS開發(fā)研究[J]. 測(cè)繪與空間地理信息，2013(8): 8-11

[6]陳驥,宋瑞霞,陳舜湖. 基于Google Maps的畜禽養(yǎng)殖場(chǎng)定位系統(tǒng)[J]. 河北農(nóng)業(yè)科學(xué)，2011(2): 137-138

[7]楊小晴,羅畏,黃文嘉. 基于Google Map的樓盤信息發(fā)布系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 測(cè)繪工程，2011(2): 49-52

[8]梁智學(xué). 基于Google Maps API的旅游信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2013(7): 208-211

[9]李柏,李平. 不動(dòng)產(chǎn)統(tǒng)一登記后的測(cè)繪對(duì)策研究[J].山西建筑，2013,39(28):232-233

[10]Google .Google Maps Javascript API V3 Reference[EB/OL].https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN，2013-08-08