基于Google Maps的不動產可視化管理系統研究

趙建保

（1.廣東農工商職業技術學院，廣東 廣州510507）

不動產具有地理位置固定、個別性、耐久性和供給數量的有限性等自然特性，又具有價值量大、用途多樣性、權益受限性、變現性差和保值增值性等社會經濟特性。地理位置是決定不動產價值的根本因素，不動產管理分為物業管理、資產管理、組合投資管理3個層次[1,2]。

地理信息系統是分析和處理空間數據不可或缺的工具。系統開發方式有2種:一是采用標準的GIS電子地圖開發平臺進行開發，如 ArcGIS，MapXtreme和SuperMap平臺，這種方式需購買開發平臺和電子地圖，二次開發工作量較大。二是采用Google Maps進行開發。Google Maps提供了免費開放的電子地圖和強大的地方信息數據庫，Google Maps JavaScript API編程接口提供了大量實用工具，支持處理地圖，支持向地圖添加內容，實現位置定位、個性化圖示標記、設置標簽、設置提示、地圖縮放、平移等功能[3]，目前使用發行版第3版。運用Google JavaScript API可構建位置服務、地理空間數據的互動可視化內容和自定義地圖等地圖應用[4]。空間數據是不動產管理信息化的基礎，在Google地圖和Google Maps JavaScript API基礎上，加載企業不動產地理信息，增加不動產的屬性數據，提供空間基礎數據服務、經營管理數據服務和決策支持服務，實現對不動產的直觀高效科學管理，能滿足企業不動產管理信息化和可視化的應用需求。

1 系統功能需求分析

支持在Google Maps上繪制不動產矢量圖。用戶可直接在地圖上繪制不動產矢量圖，系統自動采集矢量圖經緯度數據，并據此生成矢量圖，通過在地圖上疊加不動產矢量圖層，為不動產管理的各級人員提供一個統一的電子地圖入口，實現不動產在Google地圖上的可視化顯示。

支持在不動產矢量圖上添加屬性信息功能。可追加項目名稱、項目地址、項目用途、面積、類別等信息，實現不動產空間數據與屬性數據的聯合操控。

支持不動產的信息分類查詢和明細查詢功能。支持按不動產類型分類查詢，支持對特定不動產明細信息查詢。

提供不動產的分布情況漫游功能。

支持地圖基本操作，如地圖放大縮小、不動產分類顯示等功能。

2 系統設計

2.1 系統架構

系統體系結構采用B/S架構模式，包括3層體系結構，分為表現層、業務邏輯層和數據層，分別對應瀏覽器、Web服務器和數據庫服務器3層體系架構，如圖1所示。Web瀏覽器通過Web服務器獲取地圖服務和不動產信息數據。Apache Web服務器從Google Maps服務器獲取地圖數據及地方數據庫數據，從MySQL數據庫獲取不動產屬性數據，實現了不動產矢量圖添加、矢量圖更新、矢量圖分類漫游、屬性數據維護更新等操作。MySQL數據庫服務器存儲系統不動產屬性數據，Google Maps服務器提供GIS服務和地圖數據服務[5-8]。

2.2 數據庫設計

數據庫主要包括不動產信息表和用戶信息表，其中不動產信息表結構如表1所示。

圖1 系統架構

表1 不動產信息表

3 系統關鍵模塊實現

前端開發采用HTML5+CSS+JavaScript技術，開發環境為WAMP，即操作系統為Windows 2003，Web服務器為Apache，數據庫服務器為MySQL，開發語言為PHP，使用AJAX處理客戶端與服務器端的數據通信。系統實現過程包括不動產數據采集、Google地圖界面定制、不動產矢量圖的顯示與交互事件添加、不動產添加、修改和刪除模塊開發、不動產明細查詢、不動產分類漫游模塊開發等過程。

3.1 不動產數據采集

不動產數據采集包括空間屬性數據采集和產權屬性數據采集2項工作。空間屬性數據采集內容有地塊坐落、測量面積、層次等級、地段牌號等[9]。產權屬性數據采集內容有名稱、編號、地址、開發單位、建設單位、用途、許可證信息等產權屬性數據。

3.2 Google地圖界面定制模塊

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

然后，定義初始化函數initialize，定義地圖選項mapOptions設置地圖中心點經緯度、縮放級別和地圖類型等，再使用Map類的對象依據地圖選項創建嵌入#map-canvas的地圖對象，并設置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地圖后，地圖界面默認提供了平移、縮放和地圖與衛星地圖切換功能。

3.3 不動產矢量圖的顯示與交互事件添加

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

3.4 不動產添加模塊

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

3.5 不動產明細查詢模塊

地圖應用頁面刷新需重新下載地圖和再次執行后臺程序，程序設計時應盡量控制頁面刷新次數，提高系統響應性能。對于不動產信息提示功能，采用Ajax能顯著地提高系統響應性能。實現信息提示的Ajax代碼為：

3.6 不動產分類漫游模塊

將不動產按照地塊、商業地產、住宅和其他4種類型進行分類管理和篩選，表單部分采用HTML表單的復選框，通過onchange檢測復選框的變化，然后再通過Ajax刷新不動產矢量圖的顯示。

4 應用效果

圖2 系統操作界面

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

5 結 語

將不動產地理位置信息與傳統不動產管理系統相結合，基于Google Maps、PHP+MySQL和網站前端技術，分析不動產管理業務需求，進行系統架構設計，編程實現了系統的關鍵模塊。系統能夠彌補傳統不動產信息系統缺乏地理屬性的缺陷，具有不動產可視化程度高、信息與地理空間信息融合、可擴展性強等特點。能為管理人員提供不動產的分布狀況及詳細信息，為客戶提供可視化的不動產分布及漫游功能，提供了一種較為便捷可行的不動產管理系統建設方案。

[1]王豐. 不動產押品管理信息系統研究[D]. 南京：南京師范大學，2012

[2]楊福云. 提升廣東農墾城市不動產經營效率之探討[J]. 中國農墾，2008(10): 51-52

[3]錢慧如,羅榮良,朱勇. Google Maps在渠道管理系統中的應用[J]. 商場現代化，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開發研究[J]. 測繪與空間地理信息，2013(8): 8-11

[6]陳驥,宋瑞霞,陳舜湖. 基于Google Maps的畜禽養殖場定位系統[J]. 河北農業科學，2011(2): 137-138

[7]楊小晴,羅畏,黃文嘉. 基于Google Map的樓盤信息發布系統的設計與實現[J]. 測繪工程，2011(2): 49-52

[8]梁智學. 基于Google Maps API的旅游信息系統設計與實現[J].計算機與現代化，2013(7): 208-211

[9]李柏,李平. 不動產統一登記后的測繪對策研究[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