技术类基于mashup技术的三维房屋租赁系统 - 浙江工商大学计算机

全国高校首届“创意创新创业”电子商务挑战赛总决赛题目：基于mashup技术的三维房屋租赁系统作品类别：技术开发类组长：曾能贤组员：虞芬飞徐镭指导老师：杨柏林王勋浙江工商大学计算机与信息工程学院2009年12月5日文摘Mashup是一种新型的基于Web的数据集成应用程序，具有第二代Web应用程序的特点，此时正成为互联网上的新一代红星，并必将成为Web2．0的流行趋势之一。本房屋系统租赁系统正是独特运用Mashup的相关特性构建而成的。在本系统中，我们通过调用GoogleMapsAPI结合IBR技术，在谷歌卫星地图上生成各种不同的小图钉，并将生成的小图钉赋予包括文字、图像、三维立体展示等信息入口，使得用户在充分浏览房屋周围地理位置信息的同时，还可以详尽的了解到房屋的相关的构造参数、房屋出租信息、甚至三维房屋立体展示等。同时，我们在意识到B/S结构的不足时，独特利用了Extjs这一针对RIA（富联网运用）的JavaScript类库结合Ajax技术，在网页实现基本无刷新的同时，并对页面间的跳转进行了相应的优化操作。最终生成了我们可以与桌面客户端相媲美的浏览器运用，使得用户达到了最完美的体验。本文中在第一章中对本系统进行了简要的概述，在第二章中对系统中涉及到的技术进行了初步的介绍并指出在系统中哪个位置使用到了相应的技术，在第三、第四章中我们对系统进行了重点介绍，第五章则简要的描述了系统的未来发展前景和可拓展性。本文是本房屋租赁系统的补充，也可当做本房屋租赁系统的使用说明关键词：Mashup，Extjs，GoogleMapsAPI，AJAX，房屋出租，JavaScript

目录文摘 1第1章引言 41.1选题背景 41.2本系统概述 51.3系统创新点 61.4本文章节安排 8第2章系统技术介绍 92.1Mashup介绍 92.1.1Mashup技术简介 92.1.2系统中的Mashup运用 92.2AJAX介绍 102.2.1AJAX技术简介 102.2.2系统中的AJAX运用 102.3GoogleMapsAPI介绍 112.3.1GoogleMapsAPI简介 112.3.2系统中的GoogleMapsAPI运用 112.4IBR技术介绍 112.4.1IBR技术介绍 112.4.2IBR的主要绘制方法 122.4.3系统中的IBR技术运用 122.5RIA介绍 132.5.1什么是RIA 132.5.2系统中的RIA运用 132.6JSON介绍 142.6.1什么是JSON 142.6.2JSON的具体形式 142.6.3系统中的JSON运用 142.7Extjs类库 152.7.1什么是Extjs 152.7.2系统中的Extjs类库的运用 15第3章:关键技术实现 163.1基于特征点的图像拼接算法 163.1.1算法原理 163.1.2Harris角点检测算法 163.1.3特征点搜索和定位 173.1.4图像拼接 173.1.5算法实现 183.1.6实现过程 183.2GoogleMapsAPI实现 193.2.1系统中的Mashup集成结构 193.2.2GoogleMapsAPI与JSP语言的结合方式 203.2.3系统中所使用的MapsAPI函数及实现代码 22第4章三维房屋租赁系统分析设计与实现 234.1体系结构设计 234.1.1体系结构设计 234.1.2应用程序开发设计 244.2数据库设计 254.2.1逻辑设计E-R图 254.2.2

物理设计表 284.3模块设计 314.3.1模块功能介绍 314.3.2各模块部分功能实现与设计代码 334.4前台场景界面设计 414.4.1页面结构 414.4.2页面流程 424.4.3页面截图 444.5.1场景一：发布房屋信息 504.5.2场景二：访客发布广告信息 514.5.4场景四：会员后台管理 554.5.5场景五：同城交友 574.5.6场景六：管理员后台管理 58第5章总结与展望 605.1系统成果 605.2未来工作 605.2.1未来版本拓展功能。 605.2.2运用前景 605.2.3市场策略 61参考文献 62附录 63附录1（系统中所使用的GoogleMapsAPI函数及实现代码） 63附录2（Extjs类库下的GoogleMaps实现） 69附录3（验证码无刷新替换） 71

正文第1章引言1.1选题背景当前网上租房越来越普及，人们对可获得的信息的要求也越高，普通的网上房屋租赁系统或许能够满足客户基本需求，但对于一般的房屋周边环境等，传统网站上的二维平面视图在视角上无法提供更为直观的效果，以致客户获得租房信息的不完全或者不真实。本作品就是为了解决当前国内大多数房产网站的这种问题而产生的。通过研究相关的提供网上租房的房地产网站，我们发现大多数的这种类型的网站都存在着这样那样的问题。比起我们运用Mashups技术构建起来的网站的功能，现有网站存在以下几点不足。网站内容过于复杂，用户查询相关信息时候，往往眼花缭乱不知从何下手。如图1.1杭州房地产网门户首页。网站形式过于单一，除了个别网站有少量新颖东西，比如视频或者引用GoogleMapsAPI技术以外，大多数网站所提供的住房信息都是单纯的“文字加图片”的形式，缺乏详细直观的效果。如图1.2商都网房产频道。图1.1杭州房地产网门户图1.2商都网房屋-图片加文字展示房屋信息网站用户结构单一，大多数租房网站的用户都是单纯的房屋需求者，对于一些普通的网民，他们浏览这种网站的几率少之又少，甚至基本不会上这样类型的网站。如沈阳房产网、厦门房产网、郑州房产网等。如图1.3沈阳房产网。网站无法将房屋真实信息与广告内容分开，大多数房产网站的存在着严重的信息不真实。很多信息的发布者都是房地产商或者中介发布的，这样的情况有的时候就必然对用户产生信任危机。如图1.491理想网福州。图1.3沈阳房产网图1.491理想网福州网站后台过于花哨，当前多数网站的后台过于繁琐，功能繁多，有些功能网站的注册用户根本不会用到。这既增加了网站的复杂性，又使得用户对于相关的操作感到厌倦。如图1.5厦房网-繁杂的表格填写。图1.5厦房网-繁杂的表格填写1.2本系统概述本三维虚拟城市房屋租赁系统平台，利用了Mashups技术和图像绘制技术(Image-BasedRendering，IBR)，通过调用GoogleMapsAPI函数，以诸如卫星图，平面图、地形图，夜景图等形式在GoogleMaps上运用地图标记和三维立体视觉效果的方式详细展示了房屋的信息，同时结合Extjs框架的独特运用，将整个系统的浏览器页面通过AJAX技术实现了仿桌面运用程序的效果。在细节方面，结合了Javascript客户端技术，实现了将房屋图片的点击替换，局部放大等效果，以使得用户得到最好的体验。整个系统仿桌面客户端实现，用户除了可以在本租赁平台上浏览多种形式的房屋信息外，还可以在系统平台上发布多种包括广告、留言、广告等信息，同时系统还支持房屋收藏、卫星导航、全球位置定位以及SNS网站式的人际关系圈、简单交友等。在本系统中，一切从用户出发，我们主要突出与房屋展示这块，对于房屋信息的展示，我们力求给予用户最完美的体验。1.3系统创新点我们建立的系统平台有以下几个创新点：(1)仿桌面应用程序：系统采用Extjs框架，结合Ajax技术，基本实现了无刷新效果，同时在页面功能设计上，依照人机交互的原理，从用户的角度对诸如窗口的隐藏、窗口的设置等进行了多种人性化的设置，使用户在B/S结构下得到了和Ｃ/S结构相媲美的体验。(2)直观显示:本系统在传统的“文字+图片”的基础上，引用Mashups技术，将房屋的位置信息在包括卫星图、夜景图在内的几种类型的地图上详细的展示出来。通过这样的方式，系统用户不仅对相应住房的周边信息有更加直观的把握而且对相应房屋的出租信息有更深刻的了解，为用户搜寻更符合自己要求的信息提供了很大的方便。(3)三维交互:本系统通过运用IBR技术，只需用户提供相应的图片，即可拼接成相应的三维图片，通过相应的控制代码，方便的实现了三维虚拟交互功能，用户可以在房屋的三维图内进行放大、缩小、旋转等操作，以对房屋某个特定细节进行详细了解。(4)创新的广告平台:系统将房屋的广告信息分离开来，开发出了一套独立的广告平台，该平台不仅支持公司、企业在上面添加广告信息，还开放了所有的系统用户都可以自由的使用该平台发布信息。比如某个用户今天到长城游玩，然后他就可以在长城的相应位置上，贴上相应的留言和图片。系统将自动的生成该图片的方位信息，这时，只要该用户将相应位置的经纬度信息发给同学朋友，对方只要浏览我们的广告平台，输入相应的方位信息，系统将自动定位到相应的留言位置。这也大大的满足了某些用户对于一些留言既想让人知道，又不想让人知道的矛盾心理，只有用户通过相应的方位信息才能找到相应的留言，否则，网友想看特别的留言只有通过在地图上不断的寻找着，同时也达到了我们的另外一个目的：大大的提高了我们广告平台的浏览量。(5)适用面广:系统还扩大了网站用户的类型，分别针对传统房屋需求者，房地产商，还有大学生开辟各种各样不同的板块。同时在保证各种用户的利益的基础上，我们对各个板块加入了独特的吸引元素。比如针对房地产商，我们开辟了一个广告发布平台，用户可以在该GoogleMaps平台上发布任何广告信息，并且，可以形象的发布到整个地图上的任意位置，比如将Nokia的广告发布到欧洲的各个公司的位置之类的。这样用户在浏览广告的同时，必然将对整个企业的文化有了更深入的了解。(6)新颖租房形式——换租:系统还针对大学生开辟了一个换租试点板块，目前只针对于大学生而言，只要某大学生成功注册为系统的用户，就可以浏览相应的各个大学的宿舍的信息，也可以发现某个地方的某个大学的某个宿舍正好要在放假的时候换租，而这个地方正好是该用户一直想要去的地方，于是该用户就可以通过提供的信息来和对方联系，并最后达到了房屋换租的目的。当前我们这个功能的主要用户锁定为大学生，只要这个试点成功的话我们将推广出来，推广到整个网民群体中，目前，国外已经有大量类似的网站的出现，相信我们只要试点成功，也可以实现了同国外一样的换租热潮，相信这必然将带来国内的换租的潮流。(7)商务功能:未来换租板块也将是我们的主要发展方向之一。我们日后将结合支付宝之类的第三方公司，然后向各个用户收取少量的佣金，同时保证了交易的安全性。(8)特别功能:功能一：为传统的添加收藏功能，只要用户看重了相应的房屋，就可以先把相应的房屋信息改保留到自己的后台当中，这样只要以后想要再次浏览该信息时。就可以方便的找到该房屋。功能二：人际关系，我们提供了相应的后台搜索功能，只要用户输入相应的信息，比如城市，大学之类的，就可以找到相应的房屋发布者的信息，以促进系统用户之间的交流与合作。三维虚拟城市房屋租赁系统平台，操作简单，信息量大，信息种类繁多，可以满足用户对房屋的全方位了解。我们引用GoogleMapsAPI，直观的在地图上标记出位置，当放大地图时，可以看清周围的街道、商店和绿化设施等等。再利用三维虚拟展示技术，让用户进入真实的房间里面观看，更加的直观。同时我们采用了ExtjsJavaScript库和AJAX技术从而弥补了B/S架构的劣势，使得整个平台具备桌面应用程序般的人性效果，并初步实现了页面间的无刷新跳转，如图1.6首页所示。图1.6房屋租赁系统首页1.4本文章节安排本文中在第一章中对本系统的选题背景和系统的构建方式进行了简要的概述，在第二章中对系统中涉及到的技术进行了初步的介绍并指出在系统中哪个位置使用到了相应的技术，在第三、第四章中我们对系统的关键性技术进行了重点介绍，并附上了部分较为关键的伪代码或代码,在第五章中，对本系统的未来发展前景可拓展性进行了相应的描述，并指出系统的未来的发展工作。附录中主要为系统的一些功能的基本的实现代码。这些代码对于系统的整个构建过程起到了很大的作用。本文是本房屋租赁系统的补充，也可当做本房屋租赁系统的使用说明。

第2章系统技术介绍本系统的构建离不开以下几种技术，即以Mashup技术为主导，通过结合Ajax技术，IBR技术、JSON，Extjs类库等对系统的功能的实现进行了较好的补充和拓展，系统的实现的基本就在于对这些技术的灵活掌握与运用。以下为系统所涉及到的技术的简单介绍和这些技术在系统中运用范围。2.1Mashup介绍2.1.1Mashup技术简介Mashup是一种新型的基于Web的数据集成应用程序，主要针对于对交互式用户参与和第三方数据的集成。MashupWeb站点的特点就表现为它正在Web上扎根发芽，它们利用了从组织边界之外的数据源获取的内容和功能。Mashup也是内容的一种不常见的创新组合(通常都源自于无关的数据源)，这都是人工进行合成的(而不是通过计算机来合成的)。实践证明Mashup开发方式简单，是一种轻型的便捷式开发方式，通过API及其他方式引用外部提供的服务和数据，减少了重复工作，并且基于开放的标准，易于进行数据、服务的共享和互操作，从而大大降低了开发成本。最初广泛流行起来的Mashup之一是一个Web站点，它将芝加哥警局在线数据库中的犯罪记录与GoogleMaps上的地图复合在一起。用户可以与Mashup站点进行交互，例如告诉它在图形界面上显示一个包含图钉的地图，图钉展示南加州最近所有入室抢劫案件的详细信息。这种概念和呈现方式非常简单，犯罪和地图数据复合之后提供的可视化的功能非常强大。2.1.2系统中的Mashup运用我们房屋租赁平台独特采用了GoogleMapsAPI，在实现地图Mashup的同时，我们还结合了IBR技术实现了三维房屋虚拟展示，同时我们实现了谷歌服务和本地数据库的整合，在调用谷歌服务的同时通过改变相应的发送信息，将用户发给本系统的请求转发到谷歌服务器，然后再将信息反馈到本系统中显示给用户，这使得用户在本系统中除了浏览用户添加的信息外，还可以得到其他的额外的谷歌服务信息。同时本系统还将运用GoogleMapsAPI来实现了开辟了一个广告平台，除了提供给用户发布留言信息外，还可以提供厂商，公司等将他们的公司信息、logo等发布到地图上，日后还将；实现地图加视频的功能。2.2AJAX介绍 2.2.1AJAX技术简介AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。与传统的Web应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。图2.1为ajax的网页应用模型。图2.1Ajax网页应用模型2.2.2系统中的AJAX运用本系统在用户注册，登录、房屋信息添加、房屋信息检索，房屋信息收藏，房屋页面跳转等诸多模块中都是用到了AJAX。而谷歌地图的提供本身也是一种Ajax的实现，通过实时的加载地图数据，以实现地图的动态更新。我们将在下文中进行相应的介绍。2.3GoogleMapsAPI介绍2.3.1GoogleMapsAPI简介Google地图API是一种通过JavaScript将Google地图嵌入到您的网页的API。它提供了很多处理地图的功能（类似网页://ditu.google上的那些功能）和向地图添加内容的服务，让您能够在您的网站上创建功能全面的地图应用。Google地图（英语：GoogleMaps）是Google公司提供的电子地图服务，包括局部详细的卫星照片。能提供三种视图：一是矢量地图（传统地图），可提供政区和交通以及商业信息；二是不同分辨率的卫星照片（俯视图，跟GoogleEarth上的卫星照片基本一样）；三是后来加上的地形视图，可以用以显示地形和等高线。2.3.2系统中的GoogleMapsAPI运用在本系统中，我们主要使用的API函数有地图的加载，地标的创建与添加，地图动画的实现，标签的使用，路线的绘制等，并且在原有GoogleMapsAPI提供的地图类型的基础上，增加了夜景图的地图类型，为系统的用户体验进行了相应的补充。具体的实现方式我们将在本文第三章的关键性技术中进行相应的介绍。2.4IBR技术介绍2.4.1IBR技术介绍基于图像绘制IBR（Image-BasedRender）是使用一组预先采样获得的图像运用变换、插值或者变形等方法进行处理，来产生不同视点的场景新视图，以完成绘制工作，其绘制过程如图2.2所示。参考图像参考图像输出图像图2.2IBR绘制过程与传统的绘制技术相比，IBR技术有着明显的优点：（1）不需要几何建模因为场景直接由图像构成，而图像中已经包含了大量的图形细节，所以绘制过程不需要繁琐复杂的场景几何建模工作，计算量适中。对计算机的硬件资源要求不高，可以在普通个人计算机上实现真实感复杂场景的实时绘制和显示。（2）绘制的图像质量较高因为预先采集存储的图像既可以是用普通相机或者数码相机或者专用拍照工具拍摄的，也可以是计算机合成的，而且两者可以混合使用，所以绘制的图像质量可以达到照片级别。图像绘制速度独立于场景复杂性，仅与所要生成的画面的分辨率有关，因而能实地显示生成的环境。2.4.2IBR的主要绘制方法IBR技术经过多年的研究与发展，已取得了一批有推广意义和应用价值的研究成果和高效的绘制方法。按照对象的不同，IBR绘制方法可分为四类：基于全景图（PanoramicImage）的方法，基于图像深度信息的方法，基于光场（LightField）信息和基于Morphing的方法。现阶段，相对成熟的技术是第一种基于全景图的方法，而且它实现方便处理量易于在Internet实现。按照IBR技术与几何学的联系，可以将IBR绘制方法分为无几何制作、含几何制作和多几何制作三种类型。其中无几何制作类绘制方法，如表2.1所示。表2.1无几何制作类绘制方法名称创建日期维数视点空间全视函数19917无限制全景图19942固定点全景建模19955无限制光场与光照图19964界定盒同心拼图19993固定平面2.4.3系统中的IBR技术运用在本系统中我们通过用户提供的相互重叠的房屋照片，运用IBR技术采用基于特征点的图像拼接算法对相应的照片进行了适当的技术合成从而形成360度的全景图，然后通过相应的控制代码来对图片进行了控制，实现了对用户房屋图片的动态的三维交互效果。2.5RIA介绍2.5.1什么是RIARIA(RichInternetApplications)即富互联网应用。RIA具有的桌面应用程序的特点包括：在消息确认和格式编排方面提供互动用户界面；在无刷新页面之下提供快捷的界面响应时间；提供通用的用户界面特性如拖放式（draganddrop）以及在线和离线操作能力。RIA具有的Web应用程序的特点包括如：立即部署、跨平台、采用逐步下载来检索内容和数据以及可以充分利用被广泛采纳的互联网标准。RIA具有通信的特点则包括实时互动的声音和图像。

客户机在RIA中的作用不仅是展示页面，它可以在幕后与用户请求异步地进行计算、传送和检索数据、显示集成的用户界面和综合使用声音和图像，这一切都可以在不依靠客户机连接的服务器或后端的情况下进行。在过去的两到三年中，Web开发人员一直是想构建一种比传统HTML更丰富的客户端：这是一个用户接口，它比用HTML能实现的接口更加健壮、反应更加灵敏和更具有令人感兴趣的可视化特性。RIA技术的出现允许我们在因特网上以一种像使用Web一样简单的方式来部署富客户端程序。无论将来RIA是否能够如人们所猜测的那样完全代替HTML应用系统，对于那些采用C/S架构的胖客户端技术运行复杂应用系统的机构和采用基于B/S架构的瘦客户端技术部署Web应用系统地机构来说，RIA确实提供了一种廉价的选择。2.5.2系统中的RIA运用项目中的RIA：本项目采用Extjs类库，更是一种基于RIA的javascirpt类库。通过对该类库的使用，我们系统实现了高度的仿桌面效果。如图2.4所示。如图2.4填出窗口2.6JSON介绍2.6.1什么是JSONSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript（StandardECMA-2623rdEdition-December1999）的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C,

C++,

C#,

Java,JavaScript,

Perl,

Python等）。这些特性使JSON成为理想的数据交换语言。2.6.2JSON的具体形式（1）对象是一个无序的“‘名称/值’对”集合。一个对象以“{”开始，以“}”结束。每个“名称”后跟一个“：”，“‘名称/值’对”之间使用“，”分隔。（2）数组是值（value）的有序集合。一个数组以“[”开始，“]”结束。值之间使用“，”分隔。（3）值（value）可以是双引号括起来的字符串（String）、数值(number)、true、false、null、对象(object)或者数组(array)。这些结构可以嵌套。（4）字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜体转义。一个字符(character)即一个单独的字符串(characeterstring).2.6.3系统中的JSON运用由于本项目中采用Extjs类库，为了方便对数据的读取，我们抛弃了传统的数据形式，将数据存储到了JSON中，并通过Extjs的grid展示出来。具体展示效果如图2.5为JSON数据类型。图2.5JSON数据类型，图2.6为结合JSON的grid展示图2.5JSON数据类型图2.6

结合JSON的grid展示2.7Extjs类库2.7.1什么是ExtjsExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。2.7.2系统中的Extjs类库的运用ExtJs初期仅是对Yahoo!UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。发展至今，Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！ExtJs支持多平台下的主流浏览器InternetExplorer6+FireFox1.5+(PC,Mac)Safari2+、Opera9+。在使用的厂家包括IBM、Adobe、Cisco和更多。本项目的界面均为Extjs类库实现，其应用截图可见第五章。

第3章:关键技术实现3.1基于特征点的图像拼接算法3.1.1算法原理首先由图像像素的灰度值信息提取特征点，然后根据相似性原则进行图像间的特征匹配，从而实现对图像重叠部分对应特征点的拼合，通过两幅图像间的匹配特征点对，计算出图像间的点变换关系，从而可以将两幅图像通过变换矩阵映射到同一平面上，实现拼接效果。整套算法包括3步：特征点的提取与特征描述符的分配；两幅图像间相似特征点的匹配；图像之间的变换关系计算。特征点可以是图像的角点、封闭轮廓线的中心、纹理特征点或其他的突出点。一般来说，如果在第1幅图像中以特征点A为中心的窗口与第2幅图像中以特征点B为中心的同样大小的窗口内容相似,那么，两个特征点被认为是匹配的。最常见的角点检测算法有：Moravec角点检测算法，SUSAN角点检测算法和Harris角点检测算法。本文所采用的特征点为角点，特征点的提取为Harris角点检测算法。3.1.2Harris角点检测算法角点,又称为兴趣点，是像素点在其邻域内的各个方向上灰度变化量足够大的点。它是一种重要的图像特征点，包含了图像中丰富的二维结构信息，广泛应用于各种图像处理技术中。角点反映了图像的一个局部灰度特征。各种基于角点的图像处理方法的本质是：用角点代表其邻域图像块进行各种操作，从而减小图像处理的复杂度，提高计算速度。我们的意图也是用角点代表图像进行图像匹配。当然，与图像本身所包含的复杂信息相比，角点反映出来的信息极其有限。因此，从严格意义上讲，何角点关系都不足以作为图像精确匹配的充分条件。幸好在实际应用中，大多数情况只涉及平滑的自然图像，而这种图像可以用角点很好地近似描述，本文也只讨论平滑的自然图像。本文选用Harris角点检测算法提取的角点作为特征点,并应用于图像匹配中。Harris角点检测算法是一种有效的图像特征点角点检测算法，其数学描述为：(1)式中:I表示密度变化后的灰度值；I(x,y)表示密度变化之前的灰度值。它的泰勒展开式表示为：(2)其中,M可以用2×2图像导数求得(3)式中:Ix、Iy分别为像素点沿x、y的导数；w为过滤窗口函数，用来过滤噪声，保留最显著的图像特征选择。这里选用Gaussian滤波函数作为w,对Harris图像矩阵进行卷积,可以得到图像中某一像素点的Harris检测矩阵。Harris角点检测算法定义了一个局部滑动窗口，将这个滑动窗口在图像中沿各方向移动，计算在每个像素上色彩灰度的变化，根据变化的强弱确定所经过像素点是否为角点。对输入图像中所有像素点都进行一次角点检测之后，得到这幅图像的角点集。然后在角点集中选择更有局部代表性的点，作为图像的特征点。3.1.3特征点搜索和定位设IA和IB表示在两幅图像A，B中分别以选择点PA和PB为中心的图像块，设bIA、bIB为图像块IA，IB对应的二值图。图像块IA，IB的相似度函数S定义为：i,j=1…NN为图像块宽度定义如果S(IA,IB)>T1,那么，称选择点PA与选择点PB是匹配的。其中，T1为一阈值。为了有效地拼接两幅相邻接的图像，首先在A图上从上到下和从下往上找到二个选P1，P2，在B图上找两个匹配点P1'，P2'，如图3.1所示。如果无合适的匹配点，那么在A图中重复寻找选择点。图3.1寻找匹配点3.1.4图像拼接通过上述搜索，得到两组对应点（P1,P2）和（P1',P2'）。然后将图像B作平移使得移到P1点，再把B作缩放变换使得|P1P2|=|P1'P2'|。该变换可表示为x=x'*|P1P2|/|P1'P2'|,y=y'*|P1P2|/|P1'P2'|再将图像B旋转α使得P1和P1',P2与P2'重合。实现相邻两幅图像的几何拼接。3.1.5算法实现根据基于特征点匹配算法的原理，算法实施步骤如下五点：Step1，读入两幅图像信息。左边为参考图像，右边为待拼接图像。Step2，利用Harris角点检测算法提取图像的角点。Step3，根据Step2得到的角点，在左边图像上从上到下和从下往上寻找两个角点，再根据相似度，在右边图像上寻找两个匹配点。Step4，若有合适匹配点则将图像B作平移、缩放、变换、旋转，实现相邻两幅图像的几何拼接。Step5，若无合适匹配点则返回Step3继续。3.1.6实现过程1）JAVA程序的实现首先是APPLET初始化。APPLET是JAVA小应用程序,可以运行在WWW上,而且必须被包含在一个WEB页中。当支持JAVA的WEB浏览器装载了一个包含有一个APPLET引用的HTML文档时,这个APPLET就可以被装载和运行。PARAM参数是APPLET与HTML文档进行通信的一种方式。用户可以通过修改HTML文档中的PARAM参数与JAVA类取得联系,从而达到控制JAVA类运行的目的。在PARAM参数的读入时,为防止HTML文件中漏设或错设,我们在程序中预设了原始参数。同样,为了避免有些参数设定得太不合理,在程序中还加入了检验语句。2）调入原始参考图像选定场景都有12~15幅参考图像。每幅图像均在PARAM参数中给出文件名及其参考角度。参考角度记录在PARAM参数中分水平和垂直角度两种。用户在使用过程中可根据拼接状况进行调节图像角度。这个过程由APPLET利用异步线程的方式调入。3）拼接静态全景图所谓静态全景图,即所有图像信息完整地在一幅图上再现。图像的拼接主要是根据两幅相邻照片重叠区的相关性来实现的,本文采用的是特征匹配的拼图算法。4）拼接动态全景图本系统在立体场景结构中,通过指定投影灭点和内部矩形方式建立了局部三维模型,以实现某些景点的任意方向漫游(走近、走远、抬头、低头)。动态浏览方式是通过JAVA程序的线程控制来实现的。在建立线程时必须建立一个启动接口。启动接口是一个抽象接口,来表示本对象有一些函数要异步执行。要实现启动接口,还需要run()函数;程序中停止线程用stop方法。为了实现交互式功能,有时还需挂起和重新启动线程。在程序中实现用鼠标控制的方法,当用户对全景图中的某一部分感兴趣时,而且这部分有说明网页或另一幅全景图时,则需建立与另一个网页的链接。为此必须调用URL类和getAppletContext()的方法。进入网页时，你将看到360度全景图的自由移动。点击鼠标时你会发现图片会自动停止转动，向左拖动鼠标图片会向左转移，向右拖动鼠标图片会向右转移，当你点击Shift键并且单击图片时，它会拉近距离，当你点击Ctrl键并且单击图片时，它会缩小距离。实现效果如图3.2所示。图3.2IBR房屋虚拟展示3.2GoogleMapsAPI实现3.2.1系统中的Mashup集成结构本系统结合Mashup技术，利用GoogleMapsAPI函数，将房屋出租数据同谷歌地图融合在一起。用户可以通过向系统输入交互信息的方式，也可以通过与谷歌地图交互的方式，获取到用户想要的信息。如图3.3房屋租赁系统Mashup集成架构。本图简要介绍了系统的交互图和系统中运用到的Mashup技术，具体各模块的实现将在第四章讲述。web用户web用户房屋信息谷歌地图页面展示Mashup（根据事件发生地点关联，浏览器端数据提供整合）Google地理信息API接口谷歌地理信息房屋信息本机数据库接口本机数据库相关房屋信息表本机数据库相关房屋信息表IBR技术控制接口三维房屋信息图3.3房屋租赁系统Mashup集成架构3.2.2GoogleMapsAPI与JSP语言的结合方式（1）网页嵌入：GoogleAPI主要是通过在网页中嵌入一段JavaScript代码来实现的。为此，我们在构建网站之前主要考虑的问题是怎么将JavaScript的和动态语言JSP相互结合起来运用以实现对数据库的访问和网页变量的动态复制。为此，系统在使用此种方式的时候贯穿着一个思路：将相应功能的JavaScript语句以字符串的形式通过jsp的内置函数out.println()输出到网页当中。比如当我们执行数据库查询操作的时候得到ResultSetrs.然后整个jsp数据嵌入到javascript当中。具体伪代码如下所示，其中pagesize为分页的大小,rname为小区名basicinfo为显示房屋的基本信息，imginfo为显示房屋的图//片信息，3dinfo为显示房屋的三维信息。while(i<intPageSize&&!rs.isAfterLast()){out.println("basicinfo["+i+"]='"+"小区名：”+rs.getString(“rname”)；out.println("imginfo["+i+"]=\""+”厨房图：”+rs.getString(“image”)+"\""); out.println("3Dinfo["+i+"]=\""+”厨房图：”+rs.getString(“3Dinfo”)+"\"");}然后就可以在JavaScript当中，调用googleAPI函数，执行for(i=0;i<point.length;i++){varmarker=newGMarker(point[i],{draggable:false});varinfoTabs=[ newGInfoWindowTab("房屋基本信息",basicinfo[i]), newGInfoWindowTab("房屋图片展示",imginfo[i]), newGInfoWindowTab("房屋立体展示",sanweiinfo[i]) ];}实现google地图标注中标签页的动态的实现，效果如图3.4所示：图中共生成了三个标签，每个标签当中的数据都可以由数据库来实现动态的更新。图3.4标签上显示房屋信息使用XML和异步远程调用、假设存在一个静态文件data.xml.里面的内容如下：<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>在调用页面上，我们用GDownloadUrl方法下载这个包含一个经纬度列表的XML文件。当下载完成，我们用GXml类来解析，并为XML文档中的每一个点建立一个标记，代码如下所示：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系统中所使用的MapsAPI函数及实现代码在本系统中，各种功能的实现均是对于GoogleMapsAPI说提供的功能的结合，附录1为本系统中关于GoogleMapsAPI调用过程中的一些基本功能。具体代码可以详见本文中的附录1部分。由于本系统中采用了Extjs的框架，对于GoogleMapsAPI的实现，部分功能我们和Extjs相结合，使得系统的更加的复合人机交互的原理。具体实现代码可以常见附录2.Extjs类库下的GoogleMaps实现。实现效果如图3.5所示：点击坐标，生成按钮实现互动图3.5Extjs下谷歌地图展示

第4章三维房屋租赁系统分析设计与实现4.1体系结构设计4.1.1体系结构设计本三维房屋租赁系统共分为三个模块如图4.1所示，即搜索模块、信息展示模块、用户功能模块。每个大模块又分各个子模块。其中搜索模块分为快速搜索、简单检索、衣食住行游搜索、高级搜索，信息展示模块划分为文字信息展示模块、详尽信息展示模块（包含图片和楼房等全部信息）、谷歌地图展示模块、三维信息展示模块、测距离模块，卫星导航模块，广告平台模块，热门统计模块，用户功能模块则分为访客模块，用户模块，管理员模块。图4.1功能模块图4.1.2应用程序开发设计本网站设计以下三种体系结构：JSP+JavaBean模式：通过在jsp页面当中相应请求调用数据库的连接bean，连接数据库完成对数据的查询、修改、删除、增加、更新等工作。本项目所有的数据库操作和复杂业务逻辑操作都是通过作JavaBean来实现了。MVC模式：MVC即“Model-View-Controller”模式。通过对JSP、Servlet、JavaBean三者的充分利用。尽量的减少了页面的代码，保持了页面的整洁性与可靠性。通过这种模式，三种技术实现了有效的分工。Servlet负责相应客户对业务逻辑的请求，并根据用户的请求行为，决定将调用的JSP页面。即（Controller，“C”）JSP页面处于表示层，也就是视图（View即“V”）的角色，主要负责项目的界面的显示工作。JavaBean负责数据的处理，也就是模型（Model即“M”）的角色。具体MVC结构图如图4.2所示图4.2MVC结构图通过三种模式，在本项目中，我们的用户注册功能，还有页面访问过滤功能都是通过该种模式实现的，这样，通过了对代码的隐藏和任务的分工，使得整个项目的逻辑划分更加的清晰，能够有效的区分不同的角色，避免彼此间的相互影响。使得项目可以更好的分块，并由擅长盖块领域的负责人来发挥所长。SOA面向服务的体系结构本系统通过运用AJAX技术，调用googlemapsAPI的服务，实现了强大的地图展示。将谷歌利用ajax技术提供的丰富的用户体验加载到本系统当中，实现了数据的异步获取与多渠道表达。我们即使谷歌SOA服务的受益者，也是SOA服务的传承者。本体统中，通过与谷歌地图的紧密结合，实现了路径的保存获取，地图信息的添加，测量两点距离，卫星导航等功能。面向服务的体系结构中的协作如图4.3所示。图4.3面向服务的体系结构中的协作4.2数据库设计在本系统中，数据库的功能主要为用户相应信息的保存，如房屋的添加、收藏信息，个人资料的管理，人际关系信息的保存等。对于其他的信息，我们主要通过GoogleMapsAPI函数，对谷歌的远程数据库进行读取而读出，随着谷歌数据库的内容的拓展，系统中所能展示的信息也更加的丰富。4.2.1逻辑设计E-R图房屋房屋名字价格辖区小区类型型号用户ID关键字用户名联系方式坐标交易类型二维图1到5三维文件1到5图4.4房屋信息表E-R图用户用户用户名用户IDQQ号性别手机介绍E-mail密码头像图4.5用户信息表E-R图用户用户房屋收藏用户名坐标收藏id图4.6房屋收藏表E-R图人际关系人际关系（同城表）同辖区同城市同大学同小区人机关系id图4.7人际关系表E-R图用户用户房屋预定房屋类型房屋型号用户名价格辖区交易类型预定表id图4.8预定表E-R图天涯海角留言天涯海角留言广告ID坐标内容图4.9广告平台表E-R图普通留言普通留言姓名性别E-mail个人主页标题内容时间留言id图4.10留言表E-R图4.2.2

物理设计表表4.1访客留言表（gbook）表4.2广告平台表（message）表4.3房屋信息表（roominfo）表4.4房屋收藏表（sctable）表4.5人际关系表（tctable）表4.6用户表（user）表4.7房屋预定表（ydtable）4.3模块设计4.3.1模块功能介绍搜索模块搜索模块包括了对房屋信息的简单搜索，高级搜索，衣食住行游搜索，精简搜索，卫星导航，全球定位等。对于各搜索，功能如下所示。简单搜索：用户输入多个搜索条件，只要数据库满足其中的某个条件，就可以检索出相应的房屋信息。复杂搜索：用户需要输入多个条件，当且仅当数据库中的信息满足所有条件时，才能检索出相应的信息。衣食住行游检索：由管理员自动添加一些热门信息（也可以是广告信息），当用户点击相应的标签内容中的快捷方式，比如点击“博物馆”，系统自动根据该信息检索数据库，将相应的有关于博物馆的信息检索出来。精简搜索：本搜索位于页面的上方，提供一个二级联动菜单，使得用户很方便的可以输入单一信息，并检索出相应的数据出来。坐标搜索：当用户输入相应的坐标时，地图自动定位到相应的地理坐标的位置。全球定位：当用户输入全球各地的任一地点名称时，地图自动定位到该地点。用户搜索：搜索当前系统中的所有用户。卫星导航：输入任意两个地点，地图自动调用谷歌数据库，列出了两点之间的距离，如何行车等。信息展示模块信息展示模块分为普通信息展示模块、详尽信息展示模块、谷歌地图信息展示模块、三维信息展示模块、测量距离模块、广告平台模块、热门统计模块。各模块功能如下所示。普通信息展示模块：本模块用于展示单一的文字信息。详尽信息展示模块：本模块除了展示单一的文字信息外，还运用JavaScript技术人性化的展示了房屋的图片信息等。谷歌地图信息展示模块：本模块包括了普通的地图展示，卫星地图展示，夜景图展示、混合地图展示等。通过将房屋信息附加到地图的图钉当中，以显示相应的信息，并且可以对房屋的周边信息有所了解。三维信息展示：利用IBR技术，并编写相应的控制代码，我们在地图上360度全方位的展示房屋的三维虚拟照片。以使得用户可以全方位的对房间信息进行检索。测距离模块：用户可以搜索两点之间的距离，并根据两点之间的距离获取到相应的信息。广告平台模块：提供系统使用者发布相应的信息，并将相应的信息生成位置标注展示在地图上。用户使用者可以再此留言发广告等，并将相应的位置坐标转发给朋友以使得朋友根据相应的地标检索出相应的信息。热门统计模块：用于统计数据库中的各种信息内容，如最热收藏，最新加入，最新推荐等，并将内容展示出来以便用户更好的浏览本网站。用户功能模块用户功能模块包括：访客模块，用户模块，管理员模块三个部分。各模块功能如下。访客模块：访客除了浏览相应的房屋信息外，还可以在广告平台上以guest的身份发布广告或留言信息、在平台上给我们网站管理员留言，或者实时聊天（暂为实现）。用户模块：包括的发布广告模块，信息管理模块，人际关系模块。其中信息管理模块又继续细分:包括发布信息管理，留言管理，收藏管理。人际关系模块则为简单的交友功能，用户根据提供的条件，选择加入不同的人际关系圈，包括了同一小区，同城，同一大学等。收藏模块则用户显示用户的房屋收藏信息。管理员模块：包括留言管理，广告管理，信息管理，会员管理四个部分。4.3.2各模块部分功能实现与设计代码搜索模块按钮事件Extjs处理方式1，内置框架动态更新于传值：用户在首页点击相应的按钮，在后台js脚本中进行相应的处理。比如当id为okButton的按钮被点击时，在后台js中获取到了相应的点击事件和相应的传递值，并动态改变了多个内置框架所包含的页面内容。具体伪代码如下：Ext.get('oKButton_location').on('click',function(){varlist=Ext.get('list');varcondition="搜索条件";varvalue="搜索值"; document.getElementById("list").src="jsp/list.jsp?condition="+condition+"&value="+value;//动态改变框架list的内容页面Ext.getCmp('east-tp').setActiveTab("1");//自动定位到了1标签document.getElementById("iframe").src="jsp/simpleShowrooms.jsp?condition="+condition+"&value="+value;//动态改变框架iframe页面 Ext.getCmp('center-tp').setActiveTab("2");//自动定位到2标签 })按钮事件处理2，传值到jsp并将结果替换掉首页某个div层的的内容，实现局部更新除了上述传递数值的方式外，系统中主要使用以下传递数值方式，仅更新局部页面层的内容（每个层内动态加载一个或多个页面），以达到无刷新的效果，增强用户体验。具体伪代码如下：

Ext.get('oKButton_latlng').on('click',function(){//按钮点击 varlist=Ext.get('list');//获取层id varcount=Ext.get('count');//获取层id list.load({url:"list.jsp", params:'name='+Ext.get('latlng1').dom.value, text:'Updating...'});//动态加载层内部页面并赋值下同 list.show();//显示加载后的层 Ext.getCmp('east-tp').setActiveTab("1");//自动定位到了相应的标签 count.load({url:"showrooms.jsp", params:'namea='+Ext.get('latlng1').dom.value, text:'Updatinga...'}); Ext.getCmp('center-tp').setActiveTab("1");//自动定位到了相应的标签 count.show(); //alert(Ext.get("latlng1").dom.value); });Extjs弹出窗口的实现为达到无刷新效果，在必要的时候我们采用了弹出窗口机制，如下，当用户点击登录按钮时，弹出用户登录信息框，用户输入相应信息并按确定后，弹出窗口自动关闭，并动态加载了相应的用户信息，这样节省了空间又增强了用户体验，代码如下所示：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:’此处放置弹出层的内容’, autoScroll:true}buttons:[{//在弹出窗口上添加按钮并在此处添加相应的handler事件}},{text:'关闭',handler:function(){//隐藏弹出窗口win.hide();}}]});}win.show(this);});});信息展示模块缩略图弹出详细图一般页面的的图片为了布局考虑，显示大小都小于实际大小。

鼠标在图片上移动时，在图片旁边获取一定范围内的图片信息，并局部放大该信息，以达到局部放大图片的效果。如图4.11局部放大图效果。图4.11房屋图片局部放大点击照片替换代码为节省在地图标签上显示图片的空间，系统在展示房屋图片信息的时候采用点击图片替换的功能，当点击地图便签上的图片信息时候，每点击一下，系统自动替换图片的内容，比如默认显示卧室图片，当点击图片时则开始依次显示厨房、卫生间等图片。具体实现代码如下所示：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]="卫生间";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);随机显示效果document.imgInit.filters.revealTrans.apply();document.imgInit.filters.revealTrans.play();}document.images.imgInit.src=imgUrl[picNum];//如果不是图片，而是SWF等，可做判断，内容可在程序中做好，再放于下面。focustext.innerHTML='<ahref="/blog/+imgLink[picNum]+"target=_blank>'+imgText[picNum]+'</a>';//设置翻页时间//theTimer=setTimeout('NextPic()',3000);}functiongoUrl(){//indow.open(imgLink[picNum],'_blank'); NextPic();鼠标放到快捷方式上显示详细信息我们为系统生成的每个房屋信息展示在相应的列表当中，并给检索出的每个房屋添加了一个带搜索条件的超