技術(shù)類基于mashup技術(shù)的三維房屋租賃系統(tǒng) - 浙江工商大學(xué)計(jì)算機(jī)

全國高校首屆“創(chuàng)意創(chuàng)新創(chuàng)業(yè)”電子商務(wù)挑戰(zhàn)賽總決賽題目：基于mashup技術(shù)的三維房屋租賃系統(tǒng)作品類別：技術(shù)開發(fā)類組長：曾能賢組員：虞芬飛徐鐳指導(dǎo)老師：楊柏林王勛浙江工商大學(xué)計(jì)算機(jī)與信息工程學(xué)院2009年12月5日文摘Mashup是一種新型的基于Web的數(shù)據(jù)集成應(yīng)用程序，具有第二代Web應(yīng)用程序的特點(diǎn)，此時正成為互聯(lián)網(wǎng)上的新一代紅星，并必將成為Web2．0的流行趨勢之一。本房屋系統(tǒng)租賃系統(tǒng)正是獨(dú)特運(yùn)用Mashup的相關(guān)特性構(gòu)建而成的。在本系統(tǒng)中，我們通過調(diào)用GoogleMapsAPI結(jié)合IBR技術(shù)，在谷歌衛(wèi)星地圖上生成各種不同的小圖釘，并將生成的小圖釘賦予包括文字、圖像、三維立體展示等信息入口，使得用戶在充分瀏覽房屋周圍地理位置信息的同時，還可以詳盡的了解到房屋的相關(guān)的構(gòu)造參數(shù)、房屋出租信息、甚至三維房屋立體展示等。同時，我們在意識到B/S結(jié)構(gòu)的不足時，獨(dú)特利用了Extjs這一針對RIA（富聯(lián)網(wǎng)運(yùn)用）的JavaScript類庫結(jié)合Ajax技術(shù)，在網(wǎng)頁實(shí)現(xiàn)基本無刷新的同時，并對頁面間的跳轉(zhuǎn)進(jìn)行了相應(yīng)的優(yōu)化操作。最終生成了我們可以與桌面客戶端相媲美的瀏覽器運(yùn)用，使得用戶達(dá)到了最完美的體驗(yàn)。本文中在第一章中對本系統(tǒng)進(jìn)行了簡要的概述，在第二章中對系統(tǒng)中涉及到的技術(shù)進(jìn)行了初步的介紹并指出在系統(tǒng)中哪個位置使用到了相應(yīng)的技術(shù)，在第三、第四章中我們對系統(tǒng)進(jìn)行了重點(diǎn)介紹，第五章則簡要的描述了系統(tǒng)的未來發(fā)展前景和可拓展性。本文是本房屋租賃系統(tǒng)的補(bǔ)充，也可當(dāng)做本房屋租賃系統(tǒng)的使用說明關(guān)鍵詞：Mashup，Extjs，GoogleMapsAPI，AJAX，房屋出租，JavaScript

目錄文摘 1第1章引言 41.1選題背景 41.2本系統(tǒng)概述 51.3系統(tǒng)創(chuàng)新點(diǎn) 61.4本文章節(jié)安排 8第2章系統(tǒng)技術(shù)介紹 92.1Mashup介紹 92.1.1Mashup技術(shù)簡介 92.1.2系統(tǒng)中的Mashup運(yùn)用 92.2AJAX介紹 102.2.1AJAX技術(shù)簡介 102.2.2系統(tǒng)中的AJAX運(yùn)用 102.3GoogleMapsAPI介紹 112.3.1GoogleMapsAPI簡介 112.3.2系統(tǒng)中的GoogleMapsAPI運(yùn)用 112.4IBR技術(shù)介紹 112.4.1IBR技術(shù)介紹 112.4.2IBR的主要繪制方法 122.4.3系統(tǒng)中的IBR技術(shù)運(yùn)用 122.5RIA介紹 132.5.1什么是RIA 132.5.2系統(tǒng)中的RIA運(yùn)用 132.6JSON介紹 142.6.1什么是JSON 142.6.2JSON的具體形式 142.6.3系統(tǒng)中的JSON運(yùn)用 142.7Extjs類庫 152.7.1什么是Extjs 152.7.2系統(tǒng)中的Extjs類庫的運(yùn)用 15第3章:關(guān)鍵技術(shù)實(shí)現(xiàn) 163.1基于特征點(diǎn)的圖像拼接算法 163.1.1算法原理 163.1.2Harris角點(diǎn)檢測算法 163.1.3特征點(diǎn)搜索和定位 173.1.4圖像拼接 173.1.5算法實(shí)現(xiàn) 183.1.6實(shí)現(xiàn)過程 183.2GoogleMapsAPI實(shí)現(xiàn) 193.2.1系統(tǒng)中的Mashup集成結(jié)構(gòu) 193.2.2GoogleMapsAPI與JSP語言的結(jié)合方式 203.2.3系統(tǒng)中所使用的MapsAPI函數(shù)及實(shí)現(xiàn)代碼 22第4章三維房屋租賃系統(tǒng)分析設(shè)計(jì)與實(shí)現(xiàn) 234.1體系結(jié)構(gòu)設(shè)計(jì) 234.1.1體系結(jié)構(gòu)設(shè)計(jì) 234.1.2應(yīng)用程序開發(fā)設(shè)計(jì) 244.2數(shù)據(jù)庫設(shè)計(jì) 254.2.1邏輯設(shè)計(jì)E-R圖 254.2.2

物理設(shè)計(jì)表 284.3模塊設(shè)計(jì) 314.3.1模塊功能介紹 314.3.2各模塊部分功能實(shí)現(xiàn)與設(shè)計(jì)代碼 334.4前臺場景界面設(shè)計(jì) 414.4.1頁面結(jié)構(gòu) 414.4.2頁面流程 424.4.3頁面截圖 444.5.1場景一：發(fā)布房屋信息 504.5.2場景二：訪客發(fā)布廣告信息 514.5.4場景四：會員后臺管理 554.5.5場景五：同城交友 574.5.6場景六：管理員后臺管理 58第5章總結(jié)與展望 605.1系統(tǒng)成果 605.2未來工作 605.2.1未來版本拓展功能。 605.2.2運(yùn)用前景 605.2.3市場策略 61參考文獻(xiàn) 62附錄 63附錄1（系統(tǒng)中所使用的GoogleMapsAPI函數(shù)及實(shí)現(xiàn)代碼） 63附錄2（Extjs類庫下的GoogleMaps實(shí)現(xiàn)） 69附錄3（驗(yàn)證碼無刷新替換） 71

正文第1章引言1.1選題背景當(dāng)前網(wǎng)上租房越來越普及，人們對可獲得的信息的要求也越高，普通的網(wǎng)上房屋租賃系統(tǒng)或許能夠滿足客戶基本需求，但對于一般的房屋周邊環(huán)境等，傳統(tǒng)網(wǎng)站上的二維平面視圖在視角上無法提供更為直觀的效果，以致客戶獲得租房信息的不完全或者不真實(shí)。本作品就是為了解決當(dāng)前國內(nèi)大多數(shù)房產(chǎn)網(wǎng)站的這種問題而產(chǎn)生的。通過研究相關(guān)的提供網(wǎng)上租房的房地產(chǎn)網(wǎng)站，我們發(fā)現(xiàn)大多數(shù)的這種類型的網(wǎng)站都存在著這樣那樣的問題。比起我們運(yùn)用Mashups技術(shù)構(gòu)建起來的網(wǎng)站的功能，現(xiàn)有網(wǎng)站存在以下幾點(diǎn)不足。網(wǎng)站內(nèi)容過于復(fù)雜，用戶查詢相關(guān)信息時候，往往眼花繚亂不知從何下手。如圖1.1杭州房地產(chǎn)網(wǎng)門戶首頁。網(wǎng)站形式過于單一，除了個別網(wǎng)站有少量新穎東西，比如視頻或者引用GoogleMapsAPI技術(shù)以外，大多數(shù)網(wǎng)站所提供的住房信息都是單純的“文字加圖片”的形式，缺乏詳細(xì)直觀的效果。如圖1.2商都網(wǎng)房產(chǎn)頻道。圖1.1杭州房地產(chǎn)網(wǎng)門戶圖1.2商都網(wǎng)房屋-圖片加文字展示房屋信息網(wǎng)站用戶結(jié)構(gòu)單一，大多數(shù)租房網(wǎng)站的用戶都是單純的房屋需求者，對于一些普通的網(wǎng)民，他們?yōu)g覽這種網(wǎng)站的幾率少之又少，甚至基本不會上這樣類型的網(wǎng)站。如沈陽房產(chǎn)網(wǎng)、廈門房產(chǎn)網(wǎng)、鄭州房產(chǎn)網(wǎng)等。如圖1.3沈陽房產(chǎn)網(wǎng)。網(wǎng)站無法將房屋真實(shí)信息與廣告內(nèi)容分開，大多數(shù)房產(chǎn)網(wǎng)站的存在著嚴(yán)重的信息不真實(shí)。很多信息的發(fā)布者都是房地產(chǎn)商或者中介發(fā)布的，這樣的情況有的時候就必然對用戶產(chǎn)生信任危機(jī)。如圖1.491理想網(wǎng)福州。圖1.3沈陽房產(chǎn)網(wǎng)圖1.491理想網(wǎng)福州網(wǎng)站后臺過于花哨，當(dāng)前多數(shù)網(wǎng)站的后臺過于繁瑣，功能繁多，有些功能網(wǎng)站的注冊用戶根本不會用到。這既增加了網(wǎng)站的復(fù)雜性，又使得用戶對于相關(guān)的操作感到厭倦。如圖1.5廈房網(wǎng)-繁雜的表格填寫。圖1.5廈房網(wǎng)-繁雜的表格填寫1.2本系統(tǒng)概述本三維虛擬城市房屋租賃系統(tǒng)平臺，利用了Mashups技術(shù)和圖像繪制技術(shù)(Image-BasedRendering，IBR)，通過調(diào)用GoogleMapsAPI函數(shù)，以諸如衛(wèi)星圖，平面圖、地形圖，夜景圖等形式在GoogleMaps上運(yùn)用地圖標(biāo)記和三維立體視覺效果的方式詳細(xì)展示了房屋的信息，同時結(jié)合Extjs框架的獨(dú)特運(yùn)用，將整個系統(tǒng)的瀏覽器頁面通過AJAX技術(shù)實(shí)現(xiàn)了仿桌面運(yùn)用程序的效果。在細(xì)節(jié)方面，結(jié)合了Javascript客戶端技術(shù)，實(shí)現(xiàn)了將房屋圖片的點(diǎn)擊替換，局部放大等效果，以使得用戶得到最好的體驗(yàn)。整個系統(tǒng)仿桌面客戶端實(shí)現(xiàn)，用戶除了可以在本租賃平臺上瀏覽多種形式的房屋信息外，還可以在系統(tǒng)平臺上發(fā)布多種包括廣告、留言、廣告等信息，同時系統(tǒng)還支持房屋收藏、衛(wèi)星導(dǎo)航、全球位置定位以及SNS網(wǎng)站式的人際關(guān)系圈、簡單交友等。在本系統(tǒng)中，一切從用戶出發(fā)，我們主要突出與房屋展示這塊，對于房屋信息的展示，我們力求給予用戶最完美的體驗(yàn)。1.3系統(tǒng)創(chuàng)新點(diǎn)我們建立的系統(tǒng)平臺有以下幾個創(chuàng)新點(diǎn)：(1)仿桌面應(yīng)用程序：系統(tǒng)采用Extjs框架，結(jié)合Ajax技術(shù)，基本實(shí)現(xiàn)了無刷新效果，同時在頁面功能設(shè)計(jì)上，依照人機(jī)交互的原理，從用戶的角度對諸如窗口的隱藏、窗口的設(shè)置等進(jìn)行了多種人性化的設(shè)置，使用戶在B/S結(jié)構(gòu)下得到了和Ｃ/S結(jié)構(gòu)相媲美的體驗(yàn)。(2)直觀顯示:本系統(tǒng)在傳統(tǒng)的“文字+圖片”的基礎(chǔ)上，引用Mashups技術(shù)，將房屋的位置信息在包括衛(wèi)星圖、夜景圖在內(nèi)的幾種類型的地圖上詳細(xì)的展示出來。通過這樣的方式，系統(tǒng)用戶不僅對相應(yīng)住房的周邊信息有更加直觀的把握而且對相應(yīng)房屋的出租信息有更深刻的了解，為用戶搜尋更符合自己要求的信息提供了很大的方便。(3)三維交互:本系統(tǒng)通過運(yùn)用IBR技術(shù)，只需用戶提供相應(yīng)的圖片，即可拼接成相應(yīng)的三維圖片，通過相應(yīng)的控制代碼，方便的實(shí)現(xiàn)了三維虛擬交互功能，用戶可以在房屋的三維圖內(nèi)進(jìn)行放大、縮小、旋轉(zhuǎn)等操作，以對房屋某個特定細(xì)節(jié)進(jìn)行詳細(xì)了解。(4)創(chuàng)新的廣告平臺:系統(tǒng)將房屋的廣告信息分離開來，開發(fā)出了一套獨(dú)立的廣告平臺，該平臺不僅支持公司、企業(yè)在上面添加廣告信息，還開放了所有的系統(tǒng)用戶都可以自由的使用該平臺發(fā)布信息。比如某個用戶今天到長城游玩，然后他就可以在長城的相應(yīng)位置上，貼上相應(yīng)的留言和圖片。系統(tǒng)將自動的生成該圖片的方位信息，這時，只要該用戶將相應(yīng)位置的經(jīng)緯度信息發(fā)給同學(xué)朋友，對方只要瀏覽我們的廣告平臺，輸入相應(yīng)的方位信息，系統(tǒng)將自動定位到相應(yīng)的留言位置。這也大大的滿足了某些用戶對于一些留言既想讓人知道，又不想讓人知道的矛盾心理，只有用戶通過相應(yīng)的方位信息才能找到相應(yīng)的留言，否則，網(wǎng)友想看特別的留言只有通過在地圖上不斷的尋找著，同時也達(dá)到了我們的另外一個目的：大大的提高了我們廣告平臺的瀏覽量。(5)適用面廣:系統(tǒng)還擴(kuò)大了網(wǎng)站用戶的類型，分別針對傳統(tǒng)房屋需求者，房地產(chǎn)商，還有大學(xué)生開辟各種各樣不同的板塊。同時在保證各種用戶的利益的基礎(chǔ)上，我們對各個板塊加入了獨(dú)特的吸引元素。比如針對房地產(chǎn)商，我們開辟了一個廣告發(fā)布平臺，用戶可以在該GoogleMaps平臺上發(fā)布任何廣告信息，并且，可以形象的發(fā)布到整個地圖上的任意位置，比如將Nokia的廣告發(fā)布到歐洲的各個公司的位置之類的。這樣用戶在瀏覽廣告的同時，必然將對整個企業(yè)的文化有了更深入的了解。(6)新穎租房形式——換租:系統(tǒng)還針對大學(xué)生開辟了一個換租試點(diǎn)板塊，目前只針對于大學(xué)生而言，只要某大學(xué)生成功注冊為系統(tǒng)的用戶，就可以瀏覽相應(yīng)的各個大學(xué)的宿舍的信息，也可以發(fā)現(xiàn)某個地方的某個大學(xué)的某個宿舍正好要在放假的時候換租，而這個地方正好是該用戶一直想要去的地方，于是該用戶就可以通過提供的信息來和對方聯(lián)系，并最后達(dá)到了房屋換租的目的。當(dāng)前我們這個功能的主要用戶鎖定為大學(xué)生，只要這個試點(diǎn)成功的話我們將推廣出來，推廣到整個網(wǎng)民群體中，目前，國外已經(jīng)有大量類似的網(wǎng)站的出現(xiàn)，相信我們只要試點(diǎn)成功，也可以實(shí)現(xiàn)了同國外一樣的換租熱潮，相信這必然將帶來國內(nèi)的換租的潮流。(7)商務(wù)功能:未來換租板塊也將是我們的主要發(fā)展方向之一。我們?nèi)蘸髮⒔Y(jié)合支付寶之類的第三方公司，然后向各個用戶收取少量的傭金，同時保證了交易的安全性。(8)特別功能:功能一：為傳統(tǒng)的添加收藏功能，只要用戶看重了相應(yīng)的房屋，就可以先把相應(yīng)的房屋信息改保留到自己的后臺當(dāng)中，這樣只要以后想要再次瀏覽該信息時。就可以方便的找到該房屋。功能二：人際關(guān)系，我們提供了相應(yīng)的后臺搜索功能，只要用戶輸入相應(yīng)的信息，比如城市，大學(xué)之類的，就可以找到相應(yīng)的房屋發(fā)布者的信息，以促進(jìn)系統(tǒng)用戶之間的交流與合作。三維虛擬城市房屋租賃系統(tǒng)平臺，操作簡單，信息量大，信息種類繁多，可以滿足用戶對房屋的全方位了解。我們引用GoogleMapsAPI，直觀的在地圖上標(biāo)記出位置，當(dāng)放大地圖時，可以看清周圍的街道、商店和綠化設(shè)施等等。再利用三維虛擬展示技術(shù)，讓用戶進(jìn)入真實(shí)的房間里面觀看，更加的直觀。同時我們采用了ExtjsJavaScript庫和AJAX技術(shù)從而彌補(bǔ)了B/S架構(gòu)的劣勢，使得整個平臺具備桌面應(yīng)用程序般的人性效果，并初步實(shí)現(xiàn)了頁面間的無刷新跳轉(zhuǎn)，如圖1.6首頁所示。圖1.6房屋租賃系統(tǒng)首頁1.4本文章節(jié)安排本文中在第一章中對本系統(tǒng)的選題背景和系統(tǒng)的構(gòu)建方式進(jìn)行了簡要的概述，在第二章中對系統(tǒng)中涉及到的技術(shù)進(jìn)行了初步的介紹并指出在系統(tǒng)中哪個位置使用到了相應(yīng)的技術(shù)，在第三、第四章中我們對系統(tǒng)的關(guān)鍵性技術(shù)進(jìn)行了重點(diǎn)介紹，并附上了部分較為關(guān)鍵的偽代碼或代碼,在第五章中，對本系統(tǒng)的未來發(fā)展前景可拓展性進(jìn)行了相應(yīng)的描述，并指出系統(tǒng)的未來的發(fā)展工作。附錄中主要為系統(tǒng)的一些功能的基本的實(shí)現(xiàn)代碼。這些代碼對于系統(tǒng)的整個構(gòu)建過程起到了很大的作用。本文是本房屋租賃系統(tǒng)的補(bǔ)充，也可當(dāng)做本房屋租賃系統(tǒng)的使用說明。

第2章系統(tǒng)技術(shù)介紹本系統(tǒng)的構(gòu)建離不開以下幾種技術(shù)，即以Mashup技術(shù)為主導(dǎo)，通過結(jié)合Ajax技術(shù)，IBR技術(shù)、JSON，Extjs類庫等對系統(tǒng)的功能的實(shí)現(xiàn)進(jìn)行了較好的補(bǔ)充和拓展，系統(tǒng)的實(shí)現(xiàn)的基本就在于對這些技術(shù)的靈活掌握與運(yùn)用。以下為系統(tǒng)所涉及到的技術(shù)的簡單介紹和這些技術(shù)在系統(tǒng)中運(yùn)用范圍。2.1Mashup介紹2.1.1Mashup技術(shù)簡介Mashup是一種新型的基于Web的數(shù)據(jù)集成應(yīng)用程序，主要針對于對交互式用戶參與和第三方數(shù)據(jù)的集成。MashupWeb站點(diǎn)的特點(diǎn)就表現(xiàn)為它正在Web上扎根發(fā)芽，它們利用了從組織邊界之外的數(shù)據(jù)源獲取的內(nèi)容和功能。Mashup也是內(nèi)容的一種不常見的創(chuàng)新組合(通常都源自于無關(guān)的數(shù)據(jù)源)，這都是人工進(jìn)行合成的(而不是通過計(jì)算機(jī)來合成的)。實(shí)踐證明Mashup開發(fā)方式簡單，是一種輕型的便捷式開發(fā)方式，通過API及其他方式引用外部提供的服務(wù)和數(shù)據(jù)，減少了重復(fù)工作，并且基于開放的標(biāo)準(zhǔn)，易于進(jìn)行數(shù)據(jù)、服務(wù)的共享和互操作，從而大大降低了開發(fā)成本。最初廣泛流行起來的Mashup之一是一個Web站點(diǎn)，它將芝加哥警局在線數(shù)據(jù)庫中的犯罪記錄與GoogleMaps上的地圖復(fù)合在一起。用戶可以與Mashup站點(diǎn)進(jìn)行交互，例如告訴它在圖形界面上顯示一個包含圖釘?shù)牡貓D，圖釘展示南加州最近所有入室搶劫案件的詳細(xì)信息。這種概念和呈現(xiàn)方式非常簡單，犯罪和地圖數(shù)據(jù)復(fù)合之后提供的可視化的功能非常強(qiáng)大。2.1.2系統(tǒng)中的Mashup運(yùn)用我們房屋租賃平臺獨(dú)特采用了GoogleMapsAPI，在實(shí)現(xiàn)地圖Mashup的同時，我們還結(jié)合了IBR技術(shù)實(shí)現(xiàn)了三維房屋虛擬展示，同時我們實(shí)現(xiàn)了谷歌服務(wù)和本地數(shù)據(jù)庫的整合，在調(diào)用谷歌服務(wù)的同時通過改變相應(yīng)的發(fā)送信息，將用戶發(fā)給本系統(tǒng)的請求轉(zhuǎn)發(fā)到谷歌服務(wù)器，然后再將信息反饋到本系統(tǒng)中顯示給用戶，這使得用戶在本系統(tǒng)中除了瀏覽用戶添加的信息外，還可以得到其他的額外的谷歌服務(wù)信息。同時本系統(tǒng)還將運(yùn)用GoogleMapsAPI來實(shí)現(xiàn)了開辟了一個廣告平臺，除了提供給用戶發(fā)布留言信息外，還可以提供廠商，公司等將他們的公司信息、logo等發(fā)布到地圖上，日后還將；實(shí)現(xiàn)地圖加視頻的功能。2.2AJAX介紹 2.2.1AJAX技術(shù)簡介AJAX全稱為“AsynchronousJavaScriptandXML”（異步JavaScript和XML），是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。類似于DHTML或LAMP，AJAX不是指一種單一的技術(shù)，而是有機(jī)地利用了一系列相關(guān)的技術(shù)。事實(shí)上，一些基于AJAX的“派生/合成”式（derivative/composite）的技術(shù)正在出現(xiàn)，如“AFLAX”。與傳統(tǒng)的Web應(yīng)用不同，AJAX采用異步交互過程。AJAX在用戶與服務(wù)器之間引入一個中間媒介，從而消除了網(wǎng)絡(luò)交互過程中的處理—等待—處理—等待缺點(diǎn)。用戶的瀏覽器在執(zhí)行任務(wù)時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。AJAX引擎允許用戶與應(yīng)用軟件之間的交互過程異步進(jìn)行，獨(dú)立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流。現(xiàn)在，可以用Javascript調(diào)用AJAX引擎來代替產(chǎn)生一個的用戶動作，內(nèi)存中的數(shù)據(jù)編輯、頁面導(dǎo)航、數(shù)據(jù)校驗(yàn)這些不需要重新載入整個頁面的需求可以交給AJAX來執(zhí)行。圖2.1為ajax的網(wǎng)頁應(yīng)用模型。圖2.1Ajax網(wǎng)頁應(yīng)用模型2.2.2系統(tǒng)中的AJAX運(yùn)用本系統(tǒng)在用戶注冊，登錄、房屋信息添加、房屋信息檢索，房屋信息收藏，房屋頁面跳轉(zhuǎn)等諸多模塊中都是用到了AJAX。而谷歌地圖的提供本身也是一種Ajax的實(shí)現(xiàn)，通過實(shí)時的加載地圖數(shù)據(jù)，以實(shí)現(xiàn)地圖的動態(tài)更新。我們將在下文中進(jìn)行相應(yīng)的介紹。2.3GoogleMapsAPI介紹2.3.1GoogleMapsAPI簡介Google地圖API是一種通過JavaScript將Google地圖嵌入到您的網(wǎng)頁的API。它提供了很多處理地圖的功能（類似網(wǎng)頁://ditu.google上的那些功能）和向地圖添加內(nèi)容的服務(wù)，讓您能夠在您的網(wǎng)站上創(chuàng)建功能全面的地圖應(yīng)用。Google地圖（英語：GoogleMaps）是Google公司提供的電子地圖服務(wù)，包括局部詳細(xì)的衛(wèi)星照片。能提供三種視圖：一是矢量地圖（傳統(tǒng)地圖），可提供政區(qū)和交通以及商業(yè)信息；二是不同分辨率的衛(wèi)星照片（俯視圖，跟GoogleEarth上的衛(wèi)星照片基本一樣）；三是后來加上的地形視圖，可以用以顯示地形和等高線。2.3.2系統(tǒng)中的GoogleMapsAPI運(yùn)用在本系統(tǒng)中，我們主要使用的API函數(shù)有地圖的加載，地標(biāo)的創(chuàng)建與添加，地圖動畫的實(shí)現(xiàn)，標(biāo)簽的使用，路線的繪制等，并且在原有GoogleMapsAPI提供的地圖類型的基礎(chǔ)上，增加了夜景圖的地圖類型，為系統(tǒng)的用戶體驗(yàn)進(jìn)行了相應(yīng)的補(bǔ)充。具體的實(shí)現(xiàn)方式我們將在本文第三章的關(guān)鍵性技術(shù)中進(jìn)行相應(yīng)的介紹。2.4IBR技術(shù)介紹2.4.1IBR技術(shù)介紹基于圖像繪制IBR（Image-BasedRender）是使用一組預(yù)先采樣獲得的圖像運(yùn)用變換、插值或者變形等方法進(jìn)行處理，來產(chǎn)生不同視點(diǎn)的場景新視圖，以完成繪制工作，其繪制過程如圖2.2所示。參考圖像參考圖像輸出圖像圖2.2IBR繪制過程與傳統(tǒng)的繪制技術(shù)相比，IBR技術(shù)有著明顯的優(yōu)點(diǎn)：（1）不需要幾何建模因?yàn)閳鼍爸苯佑蓤D像構(gòu)成，而圖像中已經(jīng)包含了大量的圖形細(xì)節(jié)，所以繪制過程不需要繁瑣復(fù)雜的場景幾何建模工作，計(jì)算量適中。對計(jì)算機(jī)的硬件資源要求不高，可以在普通個人計(jì)算機(jī)上實(shí)現(xiàn)真實(shí)感復(fù)雜場景的實(shí)時繪制和顯示。（2）繪制的圖像質(zhì)量較高因?yàn)轭A(yù)先采集存儲的圖像既可以是用普通相機(jī)或者數(shù)碼相機(jī)或者專用拍照工具拍攝的，也可以是計(jì)算機(jī)合成的，而且兩者可以混合使用，所以繪制的圖像質(zhì)量可以達(dá)到照片級別。圖像繪制速度獨(dú)立于場景復(fù)雜性，僅與所要生成的畫面的分辨率有關(guān)，因而能實(shí)地顯示生成的環(huán)境。2.4.2IBR的主要繪制方法IBR技術(shù)經(jīng)過多年的研究與發(fā)展，已取得了一批有推廣意義和應(yīng)用價值的研究成果和高效的繪制方法。按照對象的不同，IBR繪制方法可分為四類：基于全景圖（PanoramicImage）的方法，基于圖像深度信息的方法，基于光場（LightField）信息和基于Morphing的方法?，F(xiàn)階段，相對成熟的技術(shù)是第一種基于全景圖的方法，而且它實(shí)現(xiàn)方便處理量易于在Internet實(shí)現(xiàn)。按照IBR技術(shù)與幾何學(xué)的聯(lián)系，可以將IBR繪制方法分為無幾何制作、含幾何制作和多幾何制作三種類型。其中無幾何制作類繪制方法，如表2.1所示。表2.1無幾何制作類繪制方法名稱創(chuàng)建日期維數(shù)視點(diǎn)空間全視函數(shù)19917無限制全景圖19942固定點(diǎn)全景建模19955無限制光場與光照圖19964界定盒同心拼圖19993固定平面2.4.3系統(tǒng)中的IBR技術(shù)運(yùn)用在本系統(tǒng)中我們通過用戶提供的相互重疊的房屋照片，運(yùn)用IBR技術(shù)采用基于特征點(diǎn)的圖像拼接算法對相應(yīng)的照片進(jìn)行了適當(dāng)?shù)募夹g(shù)合成從而形成360度的全景圖，然后通過相應(yīng)的控制代碼來對圖片進(jìn)行了控制，實(shí)現(xiàn)了對用戶房屋圖片的動態(tài)的三維交互效果。2.5RIA介紹2.5.1什么是RIARIA(RichInternetApplications)即富互聯(lián)網(wǎng)應(yīng)用。RIA具有的桌面應(yīng)用程序的特點(diǎn)包括：在消息確認(rèn)和格式編排方面提供互動用戶界面；在無刷新頁面之下提供快捷的界面響應(yīng)時間；提供通用的用戶界面特性如拖放式（draganddrop）以及在線和離線操作能力。RIA具有的Web應(yīng)用程序的特點(diǎn)包括如：立即部署、跨平臺、采用逐步下載來檢索內(nèi)容和數(shù)據(jù)以及可以充分利用被廣泛采納的互聯(lián)網(wǎng)標(biāo)準(zhǔn)。RIA具有通信的特點(diǎn)則包括實(shí)時互動的聲音和圖像。

客戶機(jī)在RIA中的作用不僅是展示頁面，它可以在幕后與用戶請求異步地進(jìn)行計(jì)算、傳送和檢索數(shù)據(jù)、顯示集成的用戶界面和綜合使用聲音和圖像，這一切都可以在不依靠客戶機(jī)連接的服務(wù)器或后端的情況下進(jìn)行。在過去的兩到三年中，Web開發(fā)人員一直是想構(gòu)建一種比傳統(tǒng)HTML更豐富的客戶端：這是一個用戶接口，它比用HTML能實(shí)現(xiàn)的接口更加健壯、反應(yīng)更加靈敏和更具有令人感興趣的可視化特性。RIA技術(shù)的出現(xiàn)允許我們在因特網(wǎng)上以一種像使用Web一樣簡單的方式來部署富客戶端程序。無論將來RIA是否能夠如人們所猜測的那樣完全代替HTML應(yīng)用系統(tǒng)，對于那些采用C/S架構(gòu)的胖客戶端技術(shù)運(yùn)行復(fù)雜應(yīng)用系統(tǒng)的機(jī)構(gòu)和采用基于B/S架構(gòu)的瘦客戶端技術(shù)部署Web應(yīng)用系統(tǒng)地機(jī)構(gòu)來說，RIA確實(shí)提供了一種廉價的選擇。2.5.2系統(tǒng)中的RIA運(yùn)用項(xiàng)目中的RIA：本項(xiàng)目采用Extjs類庫，更是一種基于RIA的javascirpt類庫。通過對該類庫的使用，我們系統(tǒng)實(shí)現(xiàn)了高度的仿桌面效果。如圖2.4所示。如圖2.4填出窗口2.6JSON介紹2.6.1什么是JSONSON(JavaScriptObjectNotation)是一種輕量級的數(shù)據(jù)交換格式。易于人閱讀和編寫。同時也易于機(jī)器解析和生成。它基于JavaScript（StandardECMA-2623rdEdition-December1999）的一個子集。JSON采用完全獨(dú)立于語言的文本格式，但是也使用了類似于C語言家族的習(xí)慣（包括C,

C++,

C#,

Java,JavaScript,

Perl,

Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語言。2.6.2JSON的具體形式（1）對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”開始，以“}”結(jié)束。每個“名稱”后跟一個“：”，“‘名稱/值’對”之間使用“，”分隔。（2）數(shù)組是值（value）的有序集合。一個數(shù)組以“[”開始，“]”結(jié)束。值之間使用“，”分隔。（3）值（value）可以是雙引號括起來的字符串（String）、數(shù)值(number)、true、false、null、對象(object)或者數(shù)組(array)。這些結(jié)構(gòu)可以嵌套。（4）字符串（string）是由雙引號包圍的任意數(shù)量Unicode字符的集合，使用反斜體轉(zhuǎn)義。一個字符(character)即一個單獨(dú)的字符串(characeterstring).2.6.3系統(tǒng)中的JSON運(yùn)用由于本項(xiàng)目中采用Extjs類庫，為了方便對數(shù)據(jù)的讀取，我們拋棄了傳統(tǒng)的數(shù)據(jù)形式，將數(shù)據(jù)存儲到了JSON中，并通過Extjs的grid展示出來。具體展示效果如圖2.5為JSON數(shù)據(jù)類型。圖2.5JSON數(shù)據(jù)類型，圖2.6為結(jié)合JSON的grid展示圖2.5JSON數(shù)據(jù)類型圖2.6

結(jié)合JSON的grid展示2.7Extjs類庫2.7.1什么是ExtjsExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用，是一個用javascript寫的，主要用于創(chuàng)建前端用戶界面，是一個與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。ExtJs最開始基于YUI技術(shù)，由開發(fā)人員JackSlocum開發(fā)，通過參考JavaSwing等機(jī)制來組織可視化組件，無論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術(shù)的精品。Ext的UI組件模型和開發(fā)理念脫胎、成型于Yahoo組件庫YUI和Java平臺上Swing兩者，并為開發(fā)者屏蔽了大量跨瀏覽器方面的處理。相對來說，EXT要比開發(fā)者直接針對DOM、W3C對象模型開發(fā)UI組件輕松。2.7.2系統(tǒng)中的Extjs類庫的運(yùn)用ExtJs初期僅是對Yahoo!UI的對話框擴(kuò)展，后來逐漸有了自己的特色，深受網(wǎng)友的喜愛。發(fā)展至今，Ext除YUI外還支持Jquery、Prototype等的多種JS底層庫，讓大家自由地選擇。該框架完全基于純Html/CSS+JS技術(shù)，提供豐富的跨瀏覽器UI組件，靈活采用JSON/XML數(shù)據(jù)源開發(fā)，使得服務(wù)端表示層的負(fù)荷真正減輕，從而達(dá)到客戶端的MVC應(yīng)用！ExtJs支持多平臺下的主流瀏覽器InternetExplorer6+FireFox1.5+(PC,Mac)Safari2+、Opera9+。在使用的廠家包括IBM、Adobe、Cisco和更多。本項(xiàng)目的界面均為Extjs類庫實(shí)現(xiàn)，其應(yīng)用截圖可見第五章。

第3章:關(guān)鍵技術(shù)實(shí)現(xiàn)3.1基于特征點(diǎn)的圖像拼接算法3.1.1算法原理首先由圖像像素的灰度值信息提取特征點(diǎn)，然后根據(jù)相似性原則進(jìn)行圖像間的特征匹配，從而實(shí)現(xiàn)對圖像重疊部分對應(yīng)特征點(diǎn)的拼合，通過兩幅圖像間的匹配特征點(diǎn)對，計(jì)算出圖像間的點(diǎn)變換關(guān)系，從而可以將兩幅圖像通過變換矩陣映射到同一平面上，實(shí)現(xiàn)拼接效果。整套算法包括3步：特征點(diǎn)的提取與特征描述符的分配；兩幅圖像間相似特征點(diǎn)的匹配；圖像之間的變換關(guān)系計(jì)算。特征點(diǎn)可以是圖像的角點(diǎn)、封閉輪廓線的中心、紋理特征點(diǎn)或其他的突出點(diǎn)。一般來說，如果在第1幅圖像中以特征點(diǎn)A為中心的窗口與第2幅圖像中以特征點(diǎn)B為中心的同樣大小的窗口內(nèi)容相似,那么，兩個特征點(diǎn)被認(rèn)為是匹配的。最常見的角點(diǎn)檢測算法有：Moravec角點(diǎn)檢測算法，SUSAN角點(diǎn)檢測算法和Harris角點(diǎn)檢測算法。本文所采用的特征點(diǎn)為角點(diǎn)，特征點(diǎn)的提取為Harris角點(diǎn)檢測算法。3.1.2Harris角點(diǎn)檢測算法角點(diǎn),又稱為興趣點(diǎn)，是像素點(diǎn)在其鄰域內(nèi)的各個方向上灰度變化量足夠大的點(diǎn)。它是一種重要的圖像特征點(diǎn)，包含了圖像中豐富的二維結(jié)構(gòu)信息，廣泛應(yīng)用于各種圖像處理技術(shù)中。角點(diǎn)反映了圖像的一個局部灰度特征。各種基于角點(diǎn)的圖像處理方法的本質(zhì)是：用角點(diǎn)代表其鄰域圖像塊進(jìn)行各種操作，從而減小圖像處理的復(fù)雜度，提高計(jì)算速度。我們的意圖也是用角點(diǎn)代表圖像進(jìn)行圖像匹配。當(dāng)然，與圖像本身所包含的復(fù)雜信息相比，角點(diǎn)反映出來的信息極其有限。因此，從嚴(yán)格意義上講，何角點(diǎn)關(guān)系都不足以作為圖像精確匹配的充分條件。幸好在實(shí)際應(yīng)用中，大多數(shù)情況只涉及平滑的自然圖像，而這種圖像可以用角點(diǎn)很好地近似描述，本文也只討論平滑的自然圖像。本文選用Harris角點(diǎn)檢測算法提取的角點(diǎn)作為特征點(diǎn),并應(yīng)用于圖像匹配中。Harris角點(diǎn)檢測算法是一種有效的圖像特征點(diǎn)角點(diǎn)檢測算法，其數(shù)學(xué)描述為：(1)式中:I表示密度變化后的灰度值；I(x,y)表示密度變化之前的灰度值。它的泰勒展開式表示為：(2)其中,M可以用2×2圖像導(dǎo)數(shù)求得(3)式中:Ix、Iy分別為像素點(diǎn)沿x、y的導(dǎo)數(shù)；w為過濾窗口函數(shù)，用來過濾噪聲，保留最顯著的圖像特征選擇。這里選用Gaussian濾波函數(shù)作為w,對Harris圖像矩陣進(jìn)行卷積,可以得到圖像中某一像素點(diǎn)的Harris檢測矩陣。Harris角點(diǎn)檢測算法定義了一個局部滑動窗口，將這個滑動窗口在圖像中沿各方向移動，計(jì)算在每個像素上色彩灰度的變化，根據(jù)變化的強(qiáng)弱確定所經(jīng)過像素點(diǎn)是否為角點(diǎn)。對輸入圖像中所有像素點(diǎn)都進(jìn)行一次角點(diǎn)檢測之后，得到這幅圖像的角點(diǎn)集。然后在角點(diǎn)集中選擇更有局部代表性的點(diǎn)，作為圖像的特征點(diǎn)。3.1.3特征點(diǎn)搜索和定位設(shè)IA和IB表示在兩幅圖像A，B中分別以選擇點(diǎn)PA和PB為中心的圖像塊，設(shè)bIA、bIB為圖像塊IA，IB對應(yīng)的二值圖。圖像塊IA，IB的相似度函數(shù)S定義為：i,j=1…NN為圖像塊寬度定義如果S(IA,IB)>T1,那么，稱選擇點(diǎn)PA與選擇點(diǎn)PB是匹配的。其中，T1為一閾值。為了有效地拼接兩幅相鄰接的圖像，首先在A圖上從上到下和從下往上找到二個選P1，P2，在B圖上找兩個匹配點(diǎn)P1'，P2'，如圖3.1所示。如果無合適的匹配點(diǎn)，那么在A圖中重復(fù)尋找選擇點(diǎn)。圖3.1尋找匹配點(diǎn)3.1.4圖像拼接通過上述搜索，得到兩組對應(yīng)點(diǎn)（P1,P2）和（P1',P2'）。然后將圖像B作平移使得移到P1點(diǎn)，再把B作縮放變換使得|P1P2|=|P1'P2'|。該變換可表示為x=x'*|P1P2|/|P1'P2'|,y=y'*|P1P2|/|P1'P2'|再將圖像B旋轉(zhuǎn)α使得P1和P1',P2與P2'重合。實(shí)現(xiàn)相鄰兩幅圖像的幾何拼接。3.1.5算法實(shí)現(xiàn)根據(jù)基于特征點(diǎn)匹配算法的原理，算法實(shí)施步驟如下五點(diǎn)：Step1，讀入兩幅圖像信息。左邊為參考圖像，右邊為待拼接圖像。Step2，利用Harris角點(diǎn)檢測算法提取圖像的角點(diǎn)。Step3，根據(jù)Step2得到的角點(diǎn)，在左邊圖像上從上到下和從下往上尋找兩個角點(diǎn)，再根據(jù)相似度，在右邊圖像上尋找兩個匹配點(diǎn)。Step4，若有合適匹配點(diǎn)則將圖像B作平移、縮放、變換、旋轉(zhuǎn)，實(shí)現(xiàn)相鄰兩幅圖像的幾何拼接。Step5，若無合適匹配點(diǎn)則返回Step3繼續(xù)。3.1.6實(shí)現(xiàn)過程1）JAVA程序的實(shí)現(xiàn)首先是APPLET初始化。APPLET是JAVA小應(yīng)用程序,可以運(yùn)行在WWW上,而且必須被包含在一個WEB頁中。當(dāng)支持JAVA的WEB瀏覽器裝載了一個包含有一個APPLET引用的HTML文檔時,這個APPLET就可以被裝載和運(yùn)行。PARAM參數(shù)是APPLET與HTML文檔進(jìn)行通信的一種方式。用戶可以通過修改HTML文檔中的PARAM參數(shù)與JAVA類取得聯(lián)系,從而達(dá)到控制JAVA類運(yùn)行的目的。在PARAM參數(shù)的讀入時,為防止HTML文件中漏設(shè)或錯設(shè),我們在程序中預(yù)設(shè)了原始參數(shù)。同樣,為了避免有些參數(shù)設(shè)定得太不合理,在程序中還加入了檢驗(yàn)語句。2）調(diào)入原始參考圖像選定場景都有12~15幅參考圖像。每幅圖像均在PARAM參數(shù)中給出文件名及其參考角度。參考角度記錄在PARAM參數(shù)中分水平和垂直角度兩種。用戶在使用過程中可根據(jù)拼接狀況進(jìn)行調(diào)節(jié)圖像角度。這個過程由APPLET利用異步線程的方式調(diào)入。3）拼接靜態(tài)全景圖所謂靜態(tài)全景圖,即所有圖像信息完整地在一幅圖上再現(xiàn)。圖像的拼接主要是根據(jù)兩幅相鄰照片重疊區(qū)的相關(guān)性來實(shí)現(xiàn)的,本文采用的是特征匹配的拼圖算法。4）拼接動態(tài)全景圖本系統(tǒng)在立體場景結(jié)構(gòu)中,通過指定投影滅點(diǎn)和內(nèi)部矩形方式建立了局部三維模型,以實(shí)現(xiàn)某些景點(diǎn)的任意方向漫游(走近、走遠(yuǎn)、抬頭、低頭)。動態(tài)瀏覽方式是通過JAVA程序的線程控制來實(shí)現(xiàn)的。在建立線程時必須建立一個啟動接口。啟動接口是一個抽象接口,來表示本對象有一些函數(shù)要異步執(zhí)行。要實(shí)現(xiàn)啟動接口,還需要run()函數(shù);程序中停止線程用stop方法。為了實(shí)現(xiàn)交互式功能,有時還需掛起和重新啟動線程。在程序中實(shí)現(xiàn)用鼠標(biāo)控制的方法,當(dāng)用戶對全景圖中的某一部分感興趣時,而且這部分有說明網(wǎng)頁或另一幅全景圖時,則需建立與另一個網(wǎng)頁的鏈接。為此必須調(diào)用URL類和getAppletContext()的方法。進(jìn)入網(wǎng)頁時，你將看到360度全景圖的自由移動。點(diǎn)擊鼠標(biāo)時你會發(fā)現(xiàn)圖片會自動停止轉(zhuǎn)動，向左拖動鼠標(biāo)圖片會向左轉(zhuǎn)移，向右拖動鼠標(biāo)圖片會向右轉(zhuǎn)移，當(dāng)你點(diǎn)擊Shift鍵并且單擊圖片時，它會拉近距離，當(dāng)你點(diǎn)擊Ctrl鍵并且單擊圖片時，它會縮小距離。實(shí)現(xiàn)效果如圖3.2所示。圖3.2IBR房屋虛擬展示3.2GoogleMapsAPI實(shí)現(xiàn)3.2.1系統(tǒng)中的Mashup集成結(jié)構(gòu)本系統(tǒng)結(jié)合Mashup技術(shù)，利用GoogleMapsAPI函數(shù)，將房屋出租數(shù)據(jù)同谷歌地圖融合在一起。用戶可以通過向系統(tǒng)輸入交互信息的方式，也可以通過與谷歌地圖交互的方式，獲取到用戶想要的信息。如圖3.3房屋租賃系統(tǒng)Mashup集成架構(gòu)。本圖簡要介紹了系統(tǒng)的交互圖和系統(tǒng)中運(yùn)用到的Mashup技術(shù)，具體各模塊的實(shí)現(xiàn)將在第四章講述。web用戶web用戶房屋信息谷歌地圖頁面展示Mashup（根據(jù)事件發(fā)生地點(diǎn)關(guān)聯(lián)，瀏覽器端數(shù)據(jù)提供整合）Google地理信息API接口谷歌地理信息房屋信息本機(jī)數(shù)據(jù)庫接口本機(jī)數(shù)據(jù)庫相關(guān)房屋信息表本機(jī)數(shù)據(jù)庫相關(guān)房屋信息表IBR技術(shù)控制接口三維房屋信息圖3.3房屋租賃系統(tǒng)Mashup集成架構(gòu)3.2.2GoogleMapsAPI與JSP語言的結(jié)合方式（1）網(wǎng)頁嵌入：GoogleAPI主要是通過在網(wǎng)頁中嵌入一段JavaScript代碼來實(shí)現(xiàn)的。為此，我們在構(gòu)建網(wǎng)站之前主要考慮的問題是怎么將JavaScript的和動態(tài)語言JSP相互結(jié)合起來運(yùn)用以實(shí)現(xiàn)對數(shù)據(jù)庫的訪問和網(wǎng)頁變量的動態(tài)復(fù)制。為此，系統(tǒng)在使用此種方式的時候貫穿著一個思路：將相應(yīng)功能的JavaScript語句以字符串的形式通過jsp的內(nèi)置函數(shù)out.println()輸出到網(wǎng)頁當(dāng)中。比如當(dāng)我們執(zhí)行數(shù)據(jù)庫查詢操作的時候得到ResultSetrs.然后整個jsp數(shù)據(jù)嵌入到j(luò)avascript當(dāng)中。具體偽代碼如下所示，其中pagesize為分頁的大小,rname為小區(qū)名basicinfo為顯示房屋的基本信息，imginfo為顯示房屋的圖//片信息，3dinfo為顯示房屋的三維信息。while(i<intPageSize&&!rs.isAfterLast()){out.println("basicinfo["+i+"]='"+"小區(qū)名：”+rs.getString(“rname”)；out.println("imginfo["+i+"]=\""+”廚房圖：”+rs.getString(“image”)+"\""); out.println("3Dinfo["+i+"]=\""+”廚房圖：”+rs.getString(“3Dinfo”)+"\"");}然后就可以在JavaScript當(dāng)中，調(diào)用googleAPI函數(shù)，執(zhí)行for(i=0;i<point.length;i++){varmarker=newGMarker(point[i],{draggable:false});varinfoTabs=[ newGInfoWindowTab("房屋基本信息",basicinfo[i]), newGInfoWindowTab("房屋圖片展示",imginfo[i]), newGInfoWindowTab("房屋立體展示",sanweiinfo[i]) ];}實(shí)現(xiàn)google地圖標(biāo)注中標(biāo)簽頁的動態(tài)的實(shí)現(xiàn)，效果如圖3.4所示：圖中共生成了三個標(biāo)簽，每個標(biāo)簽當(dāng)中的數(shù)據(jù)都可以由數(shù)據(jù)庫來實(shí)現(xiàn)動態(tài)的更新。圖3.4標(biāo)簽上顯示房屋信息使用XML和異步遠(yuǎn)程調(diào)用、假設(shè)存在一個靜態(tài)文件data.xml.里面的內(nèi)容如下：<markers><markerlat="39.916978"lng="116.396971"/><markerlat="39.925667"lng="116.388903"/><markerlat="39.909341"lng="116.397486"/><markerlat="39.904535"lng="116.397486"/><markerlat="39.925469"lng="116.416454"/><markerlat="39.908485"lng="116.375084"/><markerlat="39.902165"lng="116.397572"/></markers>在調(diào)用頁面上，我們用GDownloadUrl方法下載這個包含一個經(jīng)緯度列表的XML文件。當(dāng)下載完成，我們用GXml類來解析，并為XML文檔中的每一個點(diǎn)建立一個標(biāo)記，代碼如下所示：varmap=newGMap2(document.getElementById("map"));map.addControl(newGSmallMapControl());map.addControl(newGMapTypeControl());map.setCenter(newGLatLng(37.4419,-122.1419),13);GDownloadUrl("data.xml",function(data,responseCode){varxml=GXml.parse(data);varmarkers=xml.documentElement.getElementsByTagName("marker");for(vari=0;i<markers.length;i++){varpoint=newGLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));map.addOverlay(newGMarker(point));}});3.2.3系統(tǒng)中所使用的MapsAPI函數(shù)及實(shí)現(xiàn)代碼在本系統(tǒng)中，各種功能的實(shí)現(xiàn)均是對于GoogleMapsAPI說提供的功能的結(jié)合，附錄1為本系統(tǒng)中關(guān)于GoogleMapsAPI調(diào)用過程中的一些基本功能。具體代碼可以詳見本文中的附錄1部分。由于本系統(tǒng)中采用了Extjs的框架，對于GoogleMapsAPI的實(shí)現(xiàn)，部分功能我們和Extjs相結(jié)合，使得系統(tǒng)的更加的復(fù)合人機(jī)交互的原理。具體實(shí)現(xiàn)代碼可以常見附錄2.Extjs類庫下的GoogleMaps實(shí)現(xiàn)。實(shí)現(xiàn)效果如圖3.5所示：點(diǎn)擊坐標(biāo)，生成按鈕實(shí)現(xiàn)互動圖3.5Extjs下谷歌地圖展示

第4章三維房屋租賃系統(tǒng)分析設(shè)計(jì)與實(shí)現(xiàn)4.1體系結(jié)構(gòu)設(shè)計(jì)4.1.1體系結(jié)構(gòu)設(shè)計(jì)本三維房屋租賃系統(tǒng)共分為三個模塊如圖4.1所示，即搜索模塊、信息展示模塊、用戶功能模塊。每個大模塊又分各個子模塊。其中搜索模塊分為快速搜索、簡單檢索、衣食住行游搜索、高級搜索，信息展示模塊劃分為文字信息展示模塊、詳盡信息展示模塊（包含圖片和樓房等全部信息）、谷歌地圖展示模塊、三維信息展示模塊、測距離模塊，衛(wèi)星導(dǎo)航模塊，廣告平臺模塊，熱門統(tǒng)計(jì)模塊，用戶功能模塊則分為訪客模塊，用戶模塊，管理員模塊。圖4.1功能模塊圖4.1.2應(yīng)用程序開發(fā)設(shè)計(jì)本網(wǎng)站設(shè)計(jì)以下三種體系結(jié)構(gòu)：JSP+JavaBean模式：通過在jsp頁面當(dāng)中相應(yīng)請求調(diào)用數(shù)據(jù)庫的連接bean，連接數(shù)據(jù)庫完成對數(shù)據(jù)的查詢、修改、刪除、增加、更新等工作。本項(xiàng)目所有的數(shù)據(jù)庫操作和復(fù)雜業(yè)務(wù)邏輯操作都是通過作JavaBean來實(shí)現(xiàn)了。MVC模式：MVC即“Model-View-Controller”模式。通過對JSP、Servlet、JavaBean三者的充分利用。盡量的減少了頁面的代碼，保持了頁面的整潔性與可靠性。通過這種模式，三種技術(shù)實(shí)現(xiàn)了有效的分工。Servlet負(fù)責(zé)相應(yīng)客戶對業(yè)務(wù)邏輯的請求，并根據(jù)用戶的請求行為，決定將調(diào)用的JSP頁面。即（Controller，“C”）JSP頁面處于表示層，也就是視圖（View即“V”）的角色，主要負(fù)責(zé)項(xiàng)目的界面的顯示工作。JavaBean負(fù)責(zé)數(shù)據(jù)的處理，也就是模型（Model即“M”）的角色。具體MVC結(jié)構(gòu)圖如圖4.2所示圖4.2MVC結(jié)構(gòu)圖通過三種模式，在本項(xiàng)目中，我們的用戶注冊功能，還有頁面訪問過濾功能都是通過該種模式實(shí)現(xiàn)的，這樣，通過了對代碼的隱藏和任務(wù)的分工，使得整個項(xiàng)目的邏輯劃分更加的清晰，能夠有效的區(qū)分不同的角色，避免彼此間的相互影響。使得項(xiàng)目可以更好的分塊，并由擅長蓋塊領(lǐng)域的負(fù)責(zé)人來發(fā)揮所長。SOA面向服務(wù)的體系結(jié)構(gòu)本系統(tǒng)通過運(yùn)用AJAX技術(shù)，調(diào)用googlemapsAPI的服務(wù)，實(shí)現(xiàn)了強(qiáng)大的地圖展示。將谷歌利用ajax技術(shù)提供的豐富的用戶體驗(yàn)加載到本系統(tǒng)當(dāng)中，實(shí)現(xiàn)了數(shù)據(jù)的異步獲取與多渠道表達(dá)。我們即使谷歌SOA服務(wù)的受益者，也是SOA服務(wù)的傳承者。本體統(tǒng)中，通過與谷歌地圖的緊密結(jié)合，實(shí)現(xiàn)了路徑的保存獲取，地圖信息的添加，測量兩點(diǎn)距離，衛(wèi)星導(dǎo)航等功能。面向服務(wù)的體系結(jié)構(gòu)中的協(xié)作如圖4.3所示。圖4.3面向服務(wù)的體系結(jié)構(gòu)中的協(xié)作4.2數(shù)據(jù)庫設(shè)計(jì)在本系統(tǒng)中，數(shù)據(jù)庫的功能主要為用戶相應(yīng)信息的保存，如房屋的添加、收藏信息，個人資料的管理，人際關(guān)系信息的保存等。對于其他的信息，我們主要通過GoogleMapsAPI函數(shù)，對谷歌的遠(yuǎn)程數(shù)據(jù)庫進(jìn)行讀取而讀出，隨著谷歌數(shù)據(jù)庫的內(nèi)容的拓展，系統(tǒng)中所能展示的信息也更加的豐富。4.2.1邏輯設(shè)計(jì)E-R圖房屋房屋名字價格轄區(qū)小區(qū)類型型號用戶ID關(guān)鍵字用戶名聯(lián)系方式坐標(biāo)交易類型二維圖1到5三維文件1到5圖4.4房屋信息表E-R圖用戶用戶用戶名用戶IDQQ號性別手機(jī)介紹E-mail密碼頭像圖4.5用戶信息表E-R圖用戶用戶房屋收藏用戶名坐標(biāo)收藏id圖4.6房屋收藏表E-R圖人際關(guān)系人際關(guān)系（同城表）同轄區(qū)同城市同大學(xué)同小區(qū)人機(jī)關(guān)系id圖4.7人際關(guān)系表E-R圖用戶用戶房屋預(yù)定房屋類型房屋型號用戶名價格轄區(qū)交易類型預(yù)定表id圖4.8預(yù)定表E-R圖天涯海角留言天涯海角留言廣告ID坐標(biāo)內(nèi)容圖4.9廣告平臺表E-R圖普通留言普通留言姓名性別E-mail個人主頁標(biāo)題內(nèi)容時間留言id圖4.10留言表E-R圖4.2.2

物理設(shè)計(jì)表表4.1訪客留言表（gbook）表4.2廣告平臺表（message）表4.3房屋信息表（roominfo）表4.4房屋收藏表（sctable）表4.5人際關(guān)系表（tctable）表4.6用戶表（user）表4.7房屋預(yù)定表（ydtable）4.3模塊設(shè)計(jì)4.3.1模塊功能介紹搜索模塊搜索模塊包括了對房屋信息的簡單搜索，高級搜索，衣食住行游搜索，精簡搜索，衛(wèi)星導(dǎo)航，全球定位等。對于各搜索，功能如下所示。簡單搜索：用戶輸入多個搜索條件，只要數(shù)據(jù)庫滿足其中的某個條件，就可以檢索出相應(yīng)的房屋信息。復(fù)雜搜索：用戶需要輸入多個條件，當(dāng)且僅當(dāng)數(shù)據(jù)庫中的信息滿足所有條件時，才能檢索出相應(yīng)的信息。衣食住行游檢索：由管理員自動添加一些熱門信息（也可以是廣告信息），當(dāng)用戶點(diǎn)擊相應(yīng)的標(biāo)簽內(nèi)容中的快捷方式，比如點(diǎn)擊“博物館”，系統(tǒng)自動根據(jù)該信息檢索數(shù)據(jù)庫，將相應(yīng)的有關(guān)于博物館的信息檢索出來。精簡搜索：本搜索位于頁面的上方，提供一個二級聯(lián)動菜單，使得用戶很方便的可以輸入單一信息，并檢索出相應(yīng)的數(shù)據(jù)出來。坐標(biāo)搜索：當(dāng)用戶輸入相應(yīng)的坐標(biāo)時，地圖自動定位到相應(yīng)的地理坐標(biāo)的位置。全球定位：當(dāng)用戶輸入全球各地的任一地點(diǎn)名稱時，地圖自動定位到該地點(diǎn)。用戶搜索：搜索當(dāng)前系統(tǒng)中的所有用戶。衛(wèi)星導(dǎo)航：輸入任意兩個地點(diǎn)，地圖自動調(diào)用谷歌數(shù)據(jù)庫，列出了兩點(diǎn)之間的距離，如何行車等。信息展示模塊信息展示模塊分為普通信息展示模塊、詳盡信息展示模塊、谷歌地圖信息展示模塊、三維信息展示模塊、測量距離模塊、廣告平臺模塊、熱門統(tǒng)計(jì)模塊。各模塊功能如下所示。普通信息展示模塊：本模塊用于展示單一的文字信息。詳盡信息展示模塊：本模塊除了展示單一的文字信息外，還運(yùn)用JavaScript技術(shù)人性化的展示了房屋的圖片信息等。谷歌地圖信息展示模塊：本模塊包括了普通的地圖展示，衛(wèi)星地圖展示，夜景圖展示、混合地圖展示等。通過將房屋信息附加到地圖的圖釘當(dāng)中，以顯示相應(yīng)的信息，并且可以對房屋的周邊信息有所了解。三維信息展示：利用IBR技術(shù)，并編寫相應(yīng)的控制代碼，我們在地圖上360度全方位的展示房屋的三維虛擬照片。以使得用戶可以全方位的對房間信息進(jìn)行檢索。測距離模塊：用戶可以搜索兩點(diǎn)之間的距離，并根據(jù)兩點(diǎn)之間的距離獲取到相應(yīng)的信息。廣告平臺模塊：提供系統(tǒng)使用者發(fā)布相應(yīng)的信息，并將相應(yīng)的信息生成位置標(biāo)注展示在地圖上。用戶使用者可以再此留言發(fā)廣告等，并將相應(yīng)的位置坐標(biāo)轉(zhuǎn)發(fā)給朋友以使得朋友根據(jù)相應(yīng)的地標(biāo)檢索出相應(yīng)的信息。熱門統(tǒng)計(jì)模塊：用于統(tǒng)計(jì)數(shù)據(jù)庫中的各種信息內(nèi)容，如最熱收藏，最新加入，最新推薦等，并將內(nèi)容展示出來以便用戶更好的瀏覽本網(wǎng)站。用戶功能模塊用戶功能模塊包括：訪客模塊，用戶模塊，管理員模塊三個部分。各模塊功能如下。訪客模塊：訪客除了瀏覽相應(yīng)的房屋信息外，還可以在廣告平臺上以guest的身份發(fā)布廣告或留言信息、在平臺上給我們網(wǎng)站管理員留言，或者實(shí)時聊天（暫為實(shí)現(xiàn)）。用戶模塊：包括的發(fā)布廣告模塊，信息管理模塊，人際關(guān)系模塊。其中信息管理模塊又繼續(xù)細(xì)分:包括發(fā)布信息管理，留言管理，收藏管理。人際關(guān)系模塊則為簡單的交友功能，用戶根據(jù)提供的條件，選擇加入不同的人際關(guān)系圈，包括了同一小區(qū)，同城，同一大學(xué)等。收藏模塊則用戶顯示用戶的房屋收藏信息。管理員模塊：包括留言管理，廣告管理，信息管理，會員管理四個部分。4.3.2各模塊部分功能實(shí)現(xiàn)與設(shè)計(jì)代碼搜索模塊按鈕事件Extjs處理方式1，內(nèi)置框架動態(tài)更新于傳值：用戶在首頁點(diǎn)擊相應(yīng)的按鈕，在后臺js腳本中進(jìn)行相應(yīng)的處理。比如當(dāng)id為okButton的按鈕被點(diǎn)擊時，在后臺js中獲取到了相應(yīng)的點(diǎn)擊事件和相應(yīng)的傳遞值，并動態(tài)改變了多個內(nèi)置框架所包含的頁面內(nèi)容。具體偽代碼如下：Ext.get('oKButton_location').on('click',function(){varlist=Ext.get('list');varcondition="搜索條件";varvalue="搜索值"; document.getElementById("list").src="jsp/list.jsp?condition="+condition+"&value="+value;//動態(tài)改變框架list的內(nèi)容頁面Ext.getCmp('east-tp').setActiveTab("1");//自動定位到了1標(biāo)簽document.getElementById("iframe").src="jsp/simpleShowrooms.jsp?condition="+condition+"&value="+value;//動態(tài)改變框架iframe頁面 Ext.getCmp('center-tp').setActiveTab("2");//自動定位到2標(biāo)簽 })按鈕事件處理2，傳值到j(luò)sp并將結(jié)果替換掉首頁某個div層的的內(nèi)容，實(shí)現(xiàn)局部更新除了上述傳遞數(shù)值的方式外，系統(tǒng)中主要使用以下傳遞數(shù)值方式，僅更新局部頁面層的內(nèi)容（每個層內(nèi)動態(tài)加載一個或多個頁面），以達(dá)到無刷新的效果，增強(qiáng)用戶體驗(yàn)。具體偽代碼如下：

Ext.get('oKButton_latlng').on('click',function(){//按鈕點(diǎn)擊 varlist=Ext.get('list');//獲取層id varcount=Ext.get('count');//獲取層id list.load({url:"list.jsp", params:'name='+Ext.get('latlng1').dom.value, text:'Updating...'});//動態(tài)加載層內(nèi)部頁面并賦值下同 list.show();//顯示加載后的層 Ext.getCmp('east-tp').setActiveTab("1");//自動定位到了相應(yīng)的標(biāo)簽 count.load({url:"showrooms.jsp", params:'namea='+Ext.get('latlng1').dom.value, text:'Updatinga...'}); Ext.getCmp('center-tp').setActiveTab("1");//自動定位到了相應(yīng)的標(biāo)簽 count.show(); //alert(Ext.get("latlng1").dom.value); });Extjs彈出窗口的實(shí)現(xiàn)為達(dá)到無刷新效果，在必要的時候我們采用了彈出窗口機(jī)制，如下，當(dāng)用戶點(diǎn)擊登錄按鈕時，彈出用戶登錄信息框，用戶輸入相應(yīng)信息并按確定后，彈出窗口自動關(guān)閉，并動態(tài)加載了相應(yīng)的用戶信息，這樣節(jié)省了空間又增強(qiáng)了用戶體驗(yàn)，代碼如下所示：Ext.onReady(function(){varwin;varbutton=Ext.get('login');button.on('click',function(){//createthewindowonthefirstclickandreuseonsubsequentclicksif(!win){win=newExt.Window({el:'hello-login',layout:'fit',width:500,height:300,closeAction:'hide',plain:true,items:{ /*autoLoad:{url:'jsp/login.jsp', scripts:true },*/ html:’此處放置彈出層的內(nèi)容’, autoScroll:true}buttons:[{//在彈出窗口上添加按鈕并在此處添加相應(yīng)的handler事件}},{text:'關(guān)閉',handler:function(){//隱藏彈出窗口win.hide();}}]});}win.show(this);});});信息展示模塊縮略圖彈出詳細(xì)圖一般頁面的的圖片為了布局考慮，顯示大小都小于實(shí)際大小。

鼠標(biāo)在圖片上移動時，在圖片旁邊獲取一定范圍內(nèi)的圖片信息，并局部放大該信息，以達(dá)到局部放大圖片的效果。如圖4.11局部放大圖效果。圖4.11房屋圖片局部放大點(diǎn)擊照片替換代碼為節(jié)省在地圖標(biāo)簽上顯示圖片的空間，系統(tǒng)在展示房屋圖片信息的時候采用點(diǎn)擊圖片替換的功能，當(dāng)點(diǎn)擊地圖便簽上的圖片信息時候，每點(diǎn)擊一下，系統(tǒng)自動替換圖片的內(nèi)容，比如默認(rèn)顯示臥室圖片，當(dāng)點(diǎn)擊圖片時則開始依次顯示廚房、衛(wèi)生間等圖片。具體實(shí)現(xiàn)代碼如下所示：varimgUrl=newArray();varimgLink=newArray();varimgText=newArray();varpicNum=0;imgUrl[1]="1.gif";imgLink[1]="1.gif";imgText[1]="廚房";imgUrl[2]="2.gif";imgLink[2]="2.gif";imgText[2]="客廳";imgUrl[3]="3.gif";imgLink[3]="3.gif";imgText[3]="臥室";imgUrl[4]="4.gif";imgLink[4]="4.gif";imgText[4]="衛(wèi)生間";imgUrl[5]="5.gif";imgLink[5]="5.gif";imgText[5]="臥室2";functionNextPic(){if(picNum<4)picNum++;//顯示4個圖片elsepicNum=1;if(document.all){//下面注意，如果存在于FORM表單中，需要使用下面的方法，否則可直接使用name。document.imgInit.filters.revealTrans.Transition=document.forms[0].transChoice.value;//Math.floor(Math.random()*23);隨機(jī)顯示效果document.imgInit.filters.revealTrans.apply();document.imgInit.filters.revealTrans.play();}document.images.imgInit.src=imgUrl[picNum];//如果不是圖片，而是SWF等，可做判斷，內(nèi)容可在程序中做好，再放于下面。focustext.innerHTML='<ahref="/blog/+imgLink[picNum]+"target=_blank>'+imgText[picNum]+'</a>';//設(shè)置翻頁時間//theTimer=setTimeout('NextPic()',3000);}functiongoUrl(){//indow.open(imgLink[picNum],'_blank'); NextPic();鼠標(biāo)放到快捷方式上顯示詳細(xì)信息我們?yōu)橄到y(tǒng)生成的每個房屋信息展示在相應(yīng)的列表當(dāng)中，并給檢索出的每個房屋添加了一個帶搜索條件的超