1.0.3 • Published 7 years ago
pano-canvas-biz v1.0.3
全景图中台化方案
一、前言
全景图组不仅有自己的业务，也有对外的技术输出。之前对外技术支持的方式，是需要的组自行复制全景图项目的代码。复制的问题是重复代码太多，无法升级或者替换全景图组件。目前全景图业务用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 - 添加全景图热点点击事件