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

全國(guó)高校首屆“創(chuàng)意創(chuàng)新創(chuàng)業(yè)”電子商務(wù)挑戰(zhàn)賽總決賽題目：基于mashup技術(shù)的三維房屋租賃系統(tǒng)作品類別：技術(shù)開(kāi)發(fā)類組長(zhǎng)：曾能賢組員：虞芬飛徐鐳指導(dǎo)老師：楊柏林王勛浙江工商大學(xué)計(jì)算機(jī)與信息工程學(xué)院2009年12月5日文摘Mashup是一種新型的基于Web的數(shù)據(jù)集成應(yīng)用程序，具有第二代Web應(yīng)用程序的特點(diǎn)，此時(shí)正成為互聯(lián)網(wǎng)上的新一代紅星，并必將成為Web2．0的流行趨勢(shì)之一。本房屋系統(tǒng)租賃系統(tǒng)正是獨(dú)特運(yùn)用Mashup的相關(guān)特性構(gòu)建而成的。在本系統(tǒng)中，我們通過(guò)調(diào)用GoogleMapsAPI結(jié)合IBR技術(shù)，在谷歌衛(wèi)星地圖上生成各種不同的小圖釘，并將生成的小圖釘賦予包括文字、圖像、三維立體展示等信息入口，使得用戶在充分瀏覽房屋周?chē)乩砦恢眯畔⒌耐瑫r(shí)，還可以詳盡的了解到房屋的相關(guān)的構(gòu)造參數(shù)、房屋出租信息、甚至三維房屋立體展示等。同時(shí)，我們?cè)谝庾R(shí)到B/S結(jié)構(gòu)的不足時(shí)，獨(dú)特利用了Extjs這一針對(duì)RIA（富聯(lián)網(wǎng)運(yùn)用）的JavaScript類庫(kù)結(jié)合Ajax技術(shù)，在網(wǎng)頁(yè)實(shí)現(xiàn)基本無(wú)刷新的同時(shí)，并對(duì)頁(yè)面間的跳轉(zhuǎn)進(jìn)行了相應(yīng)的優(yōu)化操作。最終生成了我們可以與桌面客戶端相媲美的瀏覽器運(yùn)用，使得用戶達(dá)到了最完美的體驗(yàn)。本文中在第一章中對(duì)本系統(tǒng)進(jìn)行了簡(jiǎn)要的概述，在第二章中對(duì)系統(tǒng)中涉及到的技術(shù)進(jìn)行了初步的介紹并指出在系統(tǒng)中哪個(gè)位置使用到了相應(yīng)的技術(shù)，在第三、第四章中我們對(duì)系統(tǒng)進(jìn)行了重點(diǎn)介紹，第五章則簡(jiǎn)要的描述了系統(tǒng)的未來(lái)發(fā)展前景和可拓展性。本文是本房屋租賃系統(tǒng)的補(bǔ)充，也可當(dāng)做本房屋租賃系統(tǒng)的使用說(shuō)明關(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ù)簡(jiǎn)介 92.1.2系統(tǒng)中的Mashup運(yùn)用 92.2AJAX介紹 102.2.1AJAX技術(shù)簡(jiǎn)介 102.2.2系統(tǒng)中的AJAX運(yùn)用 102.3GoogleMapsAPI介紹 112.3.1GoogleMapsAPI簡(jiǎn)介 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類庫(kù) 152.7.1什么是Extjs 152.7.2系統(tǒng)中的Extjs類庫(kù)的運(yùn)用 15第3章:關(guān)鍵技術(shù)實(shí)現(xiàn) 163.1基于特征點(diǎn)的圖像拼接算法 163.1.1算法原理 163.1.2Harris角點(diǎn)檢測(cè)算法 163.1.3特征點(diǎn)搜索和定位 173.1.4圖像拼接 173.1.5算法實(shí)現(xiàn) 183.1.6實(shí)現(xiàn)過(guò)程 183.2GoogleMapsAPI實(shí)現(xiàn) 193.2.1系統(tǒng)中的Mashup集成結(jié)構(gòu) 193.2.2GoogleMapsAPI與JSP語(yǔ)言的結(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)用程序開(kāi)發(fā)設(shè)計(jì) 244.2數(shù)據(jù)庫(kù)設(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前臺(tái)場(chǎng)景界面設(shè)計(jì) 414.4.1頁(yè)面結(jié)構(gòu) 414.4.2頁(yè)面流程 424.4.3頁(yè)面截圖 444.5.1場(chǎng)景一：發(fā)布房屋信息 504.5.2場(chǎng)景二：訪客發(fā)布廣告信息 514.5.4場(chǎng)景四：會(huì)員后臺(tái)管理 554.5.5場(chǎng)景五：同城交友 574.5.6場(chǎng)景六：管理員后臺(tái)管理 58第5章總結(jié)與展望 605.1系統(tǒng)成果 605.2未來(lái)工作 605.2.1未來(lái)版本拓展功能。 605.2.2運(yùn)用前景 605.2.3市場(chǎng)策略 61參考文獻(xiàn) 62附錄 63附錄1（系統(tǒng)中所使用的GoogleMapsAPI函數(shù)及實(shí)現(xiàn)代碼） 63附錄2（Extjs類庫(kù)下的GoogleMaps實(shí)現(xiàn)） 69附錄3（驗(yàn)證碼無(wú)刷新替換） 71

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

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

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

C++,

C#,

Java,JavaScript,

Perl,

Python等）。這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。2.6.2JSON的具體形式（1）對(duì)象是一個(gè)無(wú)序的“‘名稱/值’對(duì)”集合。一個(gè)對(duì)象以“{”開(kāi)始，以“}”結(jié)束。每個(gè)“名稱”后跟一個(gè)“：”，“‘名稱/值’對(duì)”之間使用“，”分隔。（2）數(shù)組是值（value）的有序集合。一個(gè)數(shù)組以“[”開(kāi)始，“]”結(jié)束。值之間使用“，”分隔。（3）值（value）可以是雙引號(hào)括起來(lái)的字符串（String）、數(shù)值(number)、true、false、null、對(duì)象(object)或者數(shù)組(array)。這些結(jié)構(gòu)可以嵌套。（4）字符串（string）是由雙引號(hào)包圍的任意數(shù)量Unicode字符的集合，使用反斜體轉(zhuǎn)義。一個(gè)字符(character)即一個(gè)單獨(dú)的字符串(characeterstring).2.6.3系統(tǒng)中的JSON運(yùn)用由于本項(xiàng)目中采用Extjs類庫(kù)，為了方便對(duì)數(shù)據(jù)的讀取，我們拋棄了傳統(tǒng)的數(shù)據(jù)形式，將數(shù)據(jù)存儲(chǔ)到了JSON中，并通過(guò)Extjs的grid展示出來(lái)。具體展示效果如圖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類庫(kù)2.7.1什么是ExtjsExtJS可以用來(lái)開(kāi)發(fā)RIA也即富客戶端的AJAX應(yīng)用，是一個(gè)用javascript寫(xiě)的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開(kāi)發(fā)語(yǔ)言開(kāi)發(fā)的應(yīng)用中。ExtJs最開(kāi)始基于YUI技術(shù)，由開(kāi)發(fā)人員JackSlocum開(kāi)發(fā)，通過(guò)參考JavaSwing等機(jī)制來(lái)組織可視化組件，無(wú)論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術(shù)的精品。Ext的UI組件模型和開(kāi)發(fā)理念脫胎、成型于Yahoo組件庫(kù)YUI和Java平臺(tái)上Swing兩者，并為開(kāi)發(fā)者屏蔽了大量跨瀏覽器方面的處理。相對(duì)來(lái)說(shuō)，EXT要比開(kāi)發(fā)者直接針對(duì)DOM、W3C對(duì)象模型開(kāi)發(fā)UI組件輕松。2.7.2系統(tǒng)中的Extjs類庫(kù)的運(yùn)用ExtJs初期僅是對(duì)Yahoo!UI的對(duì)話框擴(kuò)展，后來(lái)逐漸有了自己的特色，深受網(wǎng)友的喜愛(ài)。發(fā)展至今，Ext除YUI外還支持Jquery、Prototype等的多種JS底層庫(kù)，讓大家自由地選擇。該框架完全基于純Html/CSS+JS技術(shù)，提供豐富的跨瀏覽器UI組件，靈活采用JSON/XML數(shù)據(jù)源開(kāi)發(fā)，使得服務(wù)端表示層的負(fù)荷真正減輕，從而達(dá)到客戶端的MVC應(yīng)用！ExtJs支持多平臺(tái)下的主流瀏覽器InternetExplorer6+FireFox1.5+(PC,Mac)Safari2+、Opera9+。在使用的廠家包括IBM、Adobe、Cisco和更多。本項(xiàng)目的界面均為Extjs類庫(kù)實(shí)現(xiàn)，其應(yīng)用截圖可見(jiàn)第五章。

第3章:關(guān)鍵技術(shù)實(shí)現(xiàn)3.1基于特征點(diǎn)的圖像拼接算法3.1.1算法原理首先由圖像像素的灰度值信息提取特征點(diǎn)，然后根據(jù)相似性原則進(jìn)行圖像間的特征匹配，從而實(shí)現(xiàn)對(duì)圖像重疊部分對(duì)應(yīng)特征點(diǎn)的拼合，通過(guò)兩幅圖像間的匹配特征點(diǎn)對(duì)，計(jì)算出圖像間的點(diǎn)變換關(guān)系，從而可以將兩幅圖像通過(guò)變換矩陣映射到同一平面上，實(shí)現(xiàn)拼接效果。整套算法包括3步：特征點(diǎn)的提取與特征描述符的分配；兩幅圖像間相似特征點(diǎn)的匹配；圖像之間的變換關(guān)系計(jì)算。特征點(diǎn)可以是圖像的角點(diǎn)、封閉輪廓線的中心、紋理特征點(diǎn)或其他的突出點(diǎn)。一般來(lái)說(shuō)，如果在第1幅圖像中以特征點(diǎn)A為中心的窗口與第2幅圖像中以特征點(diǎn)B為中心的同樣大小的窗口內(nèi)容相似,那么，兩個(gè)特征點(diǎn)被認(rèn)為是匹配的。最常見(jiàn)的角點(diǎn)檢測(cè)算法有：Moravec角點(diǎn)檢測(cè)算法，SUSAN角點(diǎn)檢測(cè)算法和Harris角點(diǎn)檢測(cè)算法。本文所采用的特征點(diǎn)為角點(diǎn)，特征點(diǎn)的提取為Harris角點(diǎn)檢測(cè)算法。3.1.2Harris角點(diǎn)檢測(cè)算法角點(diǎn),又稱為興趣點(diǎn)，是像素點(diǎn)在其鄰域內(nèi)的各個(gè)方向上灰度變化量足夠大的點(diǎn)。它是一種重要的圖像特征點(diǎn)，包含了圖像中豐富的二維結(jié)構(gòu)信息，廣泛應(yīng)用于各種圖像處理技術(shù)中。角點(diǎn)反映了圖像的一個(gè)局部灰度特征。各種基于角點(diǎn)的圖像處理方法的本質(zhì)是：用角點(diǎn)代表其鄰域圖像塊進(jìn)行各種操作，從而減小圖像處理的復(fù)雜度，提高計(jì)算速度。我們的意圖也是用角點(diǎn)代表圖像進(jìn)行圖像匹配。當(dāng)然，與圖像本身所包含的復(fù)雜信息相比，角點(diǎn)反映出來(lái)的信息極其有限。因此，從嚴(yán)格意義上講，何角點(diǎn)關(guān)系都不足以作為圖像精確匹配的充分條件。幸好在實(shí)際應(yīng)用中，大多數(shù)情況只涉及平滑的自然圖像，而這種圖像可以用角點(diǎn)很好地近似描述，本文也只討論平滑的自然圖像。本文選用Harris角點(diǎn)檢測(cè)算法提取的角點(diǎn)作為特征點(diǎn),并應(yīng)用于圖像匹配中。Harris角點(diǎn)檢測(cè)算法是一種有效的圖像特征點(diǎn)角點(diǎn)檢測(cè)算法，其數(shù)學(xué)描述為：(1)式中:I表示密度變化后的灰度值；I(x,y)表示密度變化之前的灰度值。它的泰勒展開(kāi)式表示為：(2)其中,M可以用2×2圖像導(dǎo)數(shù)求得(3)式中:Ix、Iy分別為像素點(diǎn)沿x、y的導(dǎo)數(shù)；w為過(guò)濾窗口函數(shù)，用來(lái)過(guò)濾噪聲，保留最顯著的圖像特征選擇。這里選用Gaussian濾波函數(shù)作為w,對(duì)Harris圖像矩陣進(jìn)行卷積,可以得到圖像中某一像素點(diǎn)的Harris檢測(cè)矩陣。Harris角點(diǎn)檢測(cè)算法定義了一個(gè)局部滑動(dòng)窗口，將這個(gè)滑動(dòng)窗口在圖像中沿各方向移動(dòng)，計(jì)算在每個(gè)像素上色彩灰度的變化，根據(jù)變化的強(qiáng)弱確定所經(jīng)過(guò)像素點(diǎn)是否為角點(diǎn)。對(duì)輸入圖像中所有像素點(diǎn)都進(jìn)行一次角點(diǎn)檢測(cè)之后，得到這幅圖像的角點(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對(duì)應(yīng)的二值圖。圖像塊IA，IB的相似度函數(shù)S定義為：i,j=1…NN為圖像塊寬度定義如果S(IA,IB)>T1,那么，稱選擇點(diǎn)PA與選擇點(diǎn)PB是匹配的。其中，T1為一閾值。為了有效地拼接兩幅相鄰接的圖像，首先在A圖上從上到下和從下往上找到二個(gè)選P1，P2，在B圖上找兩個(gè)匹配點(diǎn)P1'，P2'，如圖3.1所示。如果無(wú)合適的匹配點(diǎn)，那么在A圖中重復(fù)尋找選擇點(diǎn)。圖3.1尋找匹配點(diǎn)3.1.4圖像拼接通過(guò)上述搜索，得到兩組對(duì)應(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)檢測(cè)算法提取圖像的角點(diǎn)。Step3，根據(jù)Step2得到的角點(diǎn)，在左邊圖像上從上到下和從下往上尋找兩個(gè)角點(diǎn)，再根據(jù)相似度，在右邊圖像上尋找兩個(gè)匹配點(diǎn)。Step4，若有合適匹配點(diǎn)則將圖像B作平移、縮放、變換、旋轉(zhuǎn)，實(shí)現(xiàn)相鄰兩幅圖像的幾何拼接。Step5，若無(wú)合適匹配點(diǎn)則返回Step3繼續(xù)。3.1.6實(shí)現(xiàn)過(guò)程1）JAVA程序的實(shí)現(xiàn)首先是APPLET初始化。APPLET是JAVA小應(yīng)用程序,可以運(yùn)行在WWW上,而且必須被包含在一個(gè)WEB頁(yè)中。當(dāng)支持JAVA的WEB瀏覽器裝載了一個(gè)包含有一個(gè)APPLET引用的HTML文檔時(shí),這個(gè)APPLET就可以被裝載和運(yùn)行。PARAM參數(shù)是APPLET與HTML文檔進(jìn)行通信的一種方式。用戶可以通過(guò)修改HTML文檔中的PARAM參數(shù)與JAVA類取得聯(lián)系,從而達(dá)到控制JAVA類運(yùn)行的目的。在PARAM參數(shù)的讀入時(shí),為防止HTML文件中漏設(shè)或錯(cuò)設(shè),我們?cè)诔绦蛑蓄A(yù)設(shè)了原始參數(shù)。同樣,為了避免有些參數(shù)設(shè)定得太不合理,在程序中還加入了檢驗(yàn)語(yǔ)句。2）調(diào)入原始參考圖像選定場(chǎng)景都有12~15幅參考圖像。每幅圖像均在PARAM參數(shù)中給出文件名及其參考角度。參考角度記錄在PARAM參數(shù)中分水平和垂直角度兩種。用戶在使用過(guò)程中可根據(jù)拼接狀況進(jìn)行調(diào)節(jié)圖像角度。這個(gè)過(guò)程由APPLET利用異步線程的方式調(diào)入。3）拼接靜態(tài)全景圖所謂靜態(tài)全景圖,即所有圖像信息完整地在一幅圖上再現(xiàn)。圖像的拼接主要是根據(jù)兩幅相鄰照片重疊區(qū)的相關(guān)性來(lái)實(shí)現(xiàn)的,本文采用的是特征匹配的拼圖算法。4）拼接動(dòng)態(tài)全景圖本系統(tǒng)在立體場(chǎng)景結(jié)構(gòu)中,通過(guò)指定投影滅點(diǎn)和內(nèi)部矩形方式建立了局部三維模型,以實(shí)現(xiàn)某些景點(diǎn)的任意方向漫游(走近、走遠(yuǎn)、抬頭、低頭)。動(dòng)態(tài)瀏覽方式是通過(guò)JAVA程序的線程控制來(lái)實(shí)現(xiàn)的。在建立線程時(shí)必須建立一個(gè)啟動(dòng)接口。啟動(dòng)接口是一個(gè)抽象接口,來(lái)表示本對(duì)象有一些函數(shù)要異步執(zhí)行。要實(shí)現(xiàn)啟動(dòng)接口,還需要run()函數(shù);程序中停止線程用stop方法。為了實(shí)現(xiàn)交互式功能,有時(shí)還需掛起和重新啟動(dòng)線程。在程序中實(shí)現(xiàn)用鼠標(biāo)控制的方法,當(dāng)用戶對(duì)全景圖中的某一部分感興趣時(shí),而且這部分有說(shuō)明網(wǎng)頁(yè)或另一幅全景圖時(shí),則需建立與另一個(gè)網(wǎng)頁(yè)的鏈接。為此必須調(diào)用URL類和getAppletContext()的方法。進(jìn)入網(wǎng)頁(yè)時(shí)，你將看到360度全景圖的自由移動(dòng)。點(diǎn)擊鼠標(biāo)時(shí)你會(huì)發(fā)現(xiàn)圖片會(huì)自動(dòng)停止轉(zhuǎn)動(dòng)，向左拖動(dòng)鼠標(biāo)圖片會(huì)向左轉(zhuǎn)移，向右拖動(dòng)鼠標(biāo)圖片會(huì)向右轉(zhuǎn)移，當(dāng)你點(diǎn)擊Shift鍵并且單擊圖片時(shí)，它會(huì)拉近距離，當(dāng)你點(diǎn)擊Ctrl鍵并且單擊圖片時(shí)，它會(huì)縮小距離。實(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ù)同谷歌地圖融合在一起。用戶可以通過(guò)向系統(tǒng)輸入交互信息的方式，也可以通過(guò)與谷歌地圖交互的方式，獲取到用戶想要的信息。如圖3.3房屋租賃系統(tǒng)Mashup集成架構(gòu)。本圖簡(jiǎn)要介紹了系統(tǒng)的交互圖和系統(tǒng)中運(yùn)用到的Mashup技術(shù)，具體各模塊的實(shí)現(xiàn)將在第四章講述。web用戶web用戶房屋信息谷歌地圖頁(yè)面展示Mashup（根據(jù)事件發(fā)生地點(diǎn)關(guān)聯(lián)，瀏覽器端數(shù)據(jù)提供整合）Google地理信息API接口谷歌地理信息房屋信息本機(jī)數(shù)據(jù)庫(kù)接口本機(jī)數(shù)據(jù)庫(kù)相關(guān)房屋信息表本機(jī)數(shù)據(jù)庫(kù)相關(guān)房屋信息表IBR技術(shù)控制接口三維房屋信息圖3.3房屋租賃系統(tǒng)Mashup集成架構(gòu)3.2.2GoogleMapsAPI與JSP語(yǔ)言的結(jié)合方式（1）網(wǎng)頁(yè)嵌入：GoogleAPI主要是通過(guò)在網(wǎng)頁(yè)中嵌入一段JavaScript代碼來(lái)實(shí)現(xiàn)的。為此，我們?cè)跇?gòu)建網(wǎng)站之前主要考慮的問(wèn)題是怎么將JavaScript的和動(dòng)態(tài)語(yǔ)言JSP相互結(jié)合起來(lái)運(yùn)用以實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的訪問(wèn)和網(wǎng)頁(yè)變量的動(dòng)態(tài)復(fù)制。為此，系統(tǒng)在使用此種方式的時(shí)候貫穿著一個(gè)思路：將相應(yīng)功能的JavaScript語(yǔ)句以字符串的形式通過(guò)jsp的內(nèi)置函數(shù)out.println()輸出到網(wǎng)頁(yè)當(dāng)中。比如當(dāng)我們執(zhí)行數(shù)據(jù)庫(kù)查詢操作的時(shí)候得到ResultSetrs.然后整個(gè)jsp數(shù)據(jù)嵌入到j(luò)avascript當(dāng)中。具體偽代碼如下所示，其中pagesize為分頁(yè)的大小,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)簽頁(yè)的動(dòng)態(tài)的實(shí)現(xiàn)，效果如圖3.4所示：圖中共生成了三個(gè)標(biāo)簽，每個(gè)標(biāo)簽當(dāng)中的數(shù)據(jù)都可以由數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)動(dòng)態(tài)的更新。圖3.4標(biāo)簽上顯示房屋信息使用XML和異步遠(yuǎn)程調(diào)用、假設(shè)存在一個(gè)靜態(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)用頁(yè)面上，我們用GDownloadUrl方法下載這個(gè)包含一個(gè)經(jīng)緯度列表的XML文件。當(dāng)下載完成，我們用GXml類來(lái)解析，并為XML文檔中的每一個(gè)點(diǎn)建立一個(gè)標(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)均是對(duì)于GoogleMapsAPI說(shuō)提供的功能的結(jié)合，附錄1為本系統(tǒng)中關(guān)于GoogleMapsAPI調(diào)用過(guò)程中的一些基本功能。具體代碼可以詳見(jiàn)本文中的附錄1部分。由于本系統(tǒng)中采用了Extjs的框架，對(duì)于GoogleMapsAPI的實(shí)現(xiàn)，部分功能我們和Extjs相結(jié)合，使得系統(tǒng)的更加的復(fù)合人機(jī)交互的原理。具體實(shí)現(xiàn)代碼可以常見(jiàn)附錄2.Extjs類庫(kù)下的GoogleMaps實(shí)現(xiàn)。實(shí)現(xiàn)效果如圖3.5所示：點(diǎn)擊坐標(biāo)，生成按鈕實(shí)現(xiàn)互動(dòng)圖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)共分為三個(gè)模塊如圖4.1所示，即搜索模塊、信息展示模塊、用戶功能模塊。每個(gè)大模塊又分各個(gè)子模塊。其中搜索模塊分為快速搜索、簡(jiǎn)單檢索、衣食住行游搜索、高級(jí)搜索，信息展示模塊劃分為文字信息展示模塊、詳盡信息展示模塊（包含圖片和樓房等全部信息）、谷歌地圖展示模塊、三維信息展示模塊、測(cè)距離模塊，衛(wèi)星導(dǎo)航模塊，廣告平臺(tái)模塊，熱門(mén)統(tǒng)計(jì)模塊，用戶功能模塊則分為訪客模塊，用戶模塊，管理員模塊。圖4.1功能模塊圖4.1.2應(yīng)用程序開(kāi)發(fā)設(shè)計(jì)本網(wǎng)站設(shè)計(jì)以下三種體系結(jié)構(gòu)：JSP+JavaBean模式：通過(guò)在jsp頁(yè)面當(dāng)中相應(yīng)請(qǐng)求調(diào)用數(shù)據(jù)庫(kù)的連接bean，連接數(shù)據(jù)庫(kù)完成對(duì)數(shù)據(jù)的查詢、修改、刪除、增加、更新等工作。本項(xiàng)目所有的數(shù)據(jù)庫(kù)操作和復(fù)雜業(yè)務(wù)邏輯操作都是通過(guò)作JavaBean來(lái)實(shí)現(xiàn)了。MVC模式：MVC即“Model-View-Controller”模式。通過(guò)對(duì)JSP、Servlet、JavaBean三者的充分利用。盡量的減少了頁(yè)面的代碼，保持了頁(yè)面的整潔性與可靠性。通過(guò)這種模式，三種技術(shù)實(shí)現(xiàn)了有效的分工。Servlet負(fù)責(zé)相應(yīng)客戶對(duì)業(yè)務(wù)邏輯的請(qǐng)求，并根據(jù)用戶的請(qǐng)求行為，決定將調(diào)用的JSP頁(yè)面。即（Controller，“C”）JSP頁(yè)面處于表示層，也就是視圖（View即“V”）的角色，主要負(fù)責(zé)項(xiàng)目的界面的顯示工作。JavaBean負(fù)責(zé)數(shù)據(jù)的處理，也就是模型（Model即“M”）的角色。具體MVC結(jié)構(gòu)圖如圖4.2所示圖4.2MVC結(jié)構(gòu)圖通過(guò)三種模式，在本項(xiàng)目中，我們的用戶注冊(cè)功能，還有頁(yè)面訪問(wèn)過(guò)濾功能都是通過(guò)該種模式實(shí)現(xiàn)的，這樣，通過(guò)了對(duì)代碼的隱藏和任務(wù)的分工，使得整個(gè)項(xiàng)目的邏輯劃分更加的清晰，能夠有效的區(qū)分不同的角色，避免彼此間的相互影響。使得項(xiàng)目可以更好的分塊，并由擅長(zhǎng)蓋塊領(lǐng)域的負(fù)責(zé)人來(lái)發(fā)揮所長(zhǎng)。SOA面向服務(wù)的體系結(jié)構(gòu)本系統(tǒng)通過(guò)運(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)中，通過(guò)與谷歌地圖的緊密結(jié)合，實(shí)現(xiàn)了路徑的保存獲取，地圖信息的添加，測(cè)量?jī)牲c(diǎn)距離，衛(wèi)星導(dǎo)航等功能。面向服務(wù)的體系結(jié)構(gòu)中的協(xié)作如圖4.3所示。圖4.3面向服務(wù)的體系結(jié)構(gòu)中的協(xié)作4.2數(shù)據(jù)庫(kù)設(shè)計(jì)在本系統(tǒng)中，數(shù)據(jù)庫(kù)的功能主要為用戶相應(yīng)信息的保存，如房屋的添加、收藏信息，個(gè)人資料的管理，人際關(guān)系信息的保存等。對(duì)于其他的信息，我們主要通過(guò)GoogleMapsAPI函數(shù)，對(duì)谷歌的遠(yuǎn)程數(shù)據(jù)庫(kù)進(jìn)行讀取而讀出，隨著谷歌數(shù)據(jù)庫(kù)的內(nèi)容的拓展，系統(tǒng)中所能展示的信息也更加的豐富。4.2.1邏輯設(shè)計(jì)E-R圖房屋房屋名字價(jià)格轄區(qū)小區(qū)類型型號(hào)用戶ID關(guān)鍵字用戶名聯(lián)系方式坐標(biāo)交易類型二維圖1到5三維文件1到5圖4.4房屋信息表E-R圖用戶用戶用戶名用戶IDQQ號(hào)性別手機(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ù)定房屋類型房屋型號(hào)用戶名價(jià)格轄區(qū)交易類型預(yù)定表id圖4.8預(yù)定表E-R圖天涯海角留言天涯海角留言廣告ID坐標(biāo)內(nèi)容圖4.9廣告平臺(tái)表E-R圖普通留言普通留言姓名性別E-mail個(gè)人主頁(yè)標(biāo)題內(nèi)容時(shí)間留言id圖4.10留言表E-R圖4.2.2

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

鼠標(biāo)在圖片上移動(dòng)時(shí)，在圖片旁邊獲取一定范圍內(nèi)的圖片信息，并局部放大該信息，以達(dá)到局部放大圖片的效果。如圖4.11局部放大圖效果。圖4.11房屋圖片局部放大點(diǎn)擊照片替換代碼為節(jié)省在地圖標(biāo)簽上顯示圖片的空間，系統(tǒng)在展示房屋圖片信息的時(shí)候采用點(diǎn)擊圖片替換的功能，當(dāng)點(diǎn)擊地圖便簽上的圖片信息時(shí)候，每點(diǎn)擊一下，系統(tǒng)自動(dòng)替換圖片的內(nèi)容，比如默認(rèn)顯示臥室圖片，當(dāng)點(diǎn)擊圖片時(shí)則開(kāi)始依次顯示廚房、衛(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個(gè)圖片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è)置翻頁(yè)時(shí)間//theTimer=setTimeout('NextPic()',3000);}functiongoUrl(){//indow.open(imgLink[picNum],'_blank'); NextPic();鼠標(biāo)放到快捷方式上顯示詳細(xì)信息我們?yōu)橄到y(tǒng)生成的每個(gè)房屋信息展示在相應(yīng)的列表當(dāng)中，并給檢索出的每個(gè)房屋添加了一個(gè)帶搜索條件的超