全景图中台化方案

一、前言

全景图组不仅有自己的业务，也有对外的技术输出。之前对外技术支持的方式，是需要的组自行复制全景图项目的代码。复制的问题是重复代码太多，无法升级或者替换全景图组件。目前全景图业务用react＋redux，无法直接从项目抽离出符合中台化需求的代码。中台化方案将对现有代码进行重构，支撑全景图业务的发展，还有支持别组的全景图业务需求。

本文档将对中台化方案和所用的组件进行说明，以支持商品替换2期的开发，之后将用中台化方案重构全景图业务的代码。

二、概述

上图是方案的组成部分，以及每个部分之间的关系。 以下对各个部分进行说明：

房间插件、户型导览插件、商品清单插件等

这些是实现业务的插件，他们是根据业务的需要，集成到插件容器的。插件容器给各个插件提供操作全景图的api，同时插件容器还给插件提供设置属性的能力,这些属性可以传递到每个插件，这样就可以实现插件间交互

插件容器

插件容器将全景图api组件进行封装，并注入到每个插件内部，使得每个插件都可以操作全景图，同时维护一个属性集合

全景图api组件

这个组件可以是基于krpano，也可以基于webgl，只要向插件容器提供相同的api，就能实现无缝的切换。

三、代码示例

• pano-canvas-biz - 插件容器

方案中将使用该组件，使用npm或者yarn安装。基于react，每个插件都是一个React Component，他们集成到插件容器上时，会在props上会接收到下列属性:

platom

当前的浏览器环境,结构为 {isMobile:true,isIpad:false,isDestop:false}

topProps

插件容器的props

store

插件容器的属性集合,可以在插件的componentWillReceivedProps中接收到变化,也可以在render获得实时的值

handle

插件容器提供给插件的api，包括下列方法:

• setStore - 设置属性
• loadScene - 切换场景
• addHotSpots - 添加全景图热点
• removeHotSpot - 删除全景图热点
• onSpotClick - 添加全景图热点点击事件

插件容器使用示例,点击此处

房间插件使用示例,点击此处

演示效果,点击此处