1. Dualsee全景对比组件

1.2 介绍

用于将双重全景展示在页面上的组件，组件有视图对比，BIM对比和相关交互等功能

依赖@vsleem-realsee-viewer/realsee-plugin（全景组件），@vsleem-realsee-viewer/bimsee-plugin（BIM嵌套组件），@vsleem-realsee-viewer/shared（共享类）

1.3 DualseeProps 参数说明

| 参数名 | 类型 | 默认值 | 说明 | | ---------------------- | ------------------- | -------------------------- | ---------------------------------------- | | appSetting | AppSetting | 请查看AppSetting类型默认值 | 全局设置 | | dualseeSetting? | DualseeSetting | 未使用 | 双重全景配置 | | dualseeLock? | LockProps | 请查看LockProps类型默认值 | 双重全景锁配置 | | basicRealsee | BasicRealseeProps | - | 基础全景参数(与RealseeProps类型基本相同) | | referRealsee? | ReferRealseeProps | - | 对比全景参数(与RealseeProps类型基本相同) | | referBimsee? | ReferBimseeProps | - | 对比BIM参数(与BimseeProps类型基本相同) | | dualseeLockVisible? | boolean | false | 锁是否可见 | | referRealseeVisible? | boolean | false | 对比全景是否可见 | | referBimseeVisible? | boolean | false | 对比BIM是否可见 |

1.4 AppSetting 类型说明

| 参数名 | 类型 | 默认值 | 说明 | | --------------- | --------------------------------- | ------------------------ | ------------------------------------------------------ | | baseUrl? | string | https://vsleem.com/api | 用于配置应用后端服务的根路径 | | locale? | string | LocaleType.zh_CN | 当前语言 | | authorizeCode | string | - | 用于API身份验证和授权的凭证 | | obsPrefix? | string | - | 用于在对象存储中组织文件的目录路径(不可用) | | obsType? | string | hs | 指定使用的对象存储服务提供商 huawei | aliyun | hs 等 | | obsTiles? | { cols: number; rows: number } | - | 对象存储瓦片数量（需与obsType同时使用） |

1.5 DualseeElement 实例对象

| 属性/方法 | 类型/签名 | 说明 | | ---------------------- | --------------------------------------------------- | ------------------------ | | getState | () => UpdatableDualseeProps | 获取当前配置选项 | | setState | (options: Partial<UpdatableDualseeProps>) => void | 设置配置选项 | | getDualseeLock | () => LockElement \| undefined | 获取锁元素引用 | | getBasicRealsee | () => RealseeElement \| undefined | 获取基础全景元素引用 | | getReferRealsee | () => RealseeElement \| undefined | 获取对比全景元素引用 | | getReferBimsee | () => BimseeElement \| undefined | 获取对比BIM元素引用 | | toggleReferRealsee | () => void | 切换对比全景显示状态 | | showReferRealsee | () => void | 显示对比全景 | | hideReferRealsee | () => void | 隐藏对比全景 | | toggleReferBimsee | () => void | 切换Bimsee面全景显示状态 | | showReferBimsee | () => Promise<void> | 显示Bimsee面全景 | | hideReferBimsee | () => void | 隐藏Bimsee面全景 | | setReferRealseePoint | (current?: TrackPoint) => void | 设置对比视图的点 | | setReferBimseePoint | (current?: TrackPoint) => void | 设置对比BIM的点 |

1.6 DualseeEvents 事件说明

| 事件名称 | 参数类型 | 描述 | | -------------------------------- | ------------------------------- | -------------------- | | basic-ready | () => void | 基础全景就绪 | | basic-reload | () => void | 基础全景重新加载 | | basic-destroy | () => void | 基础全景销毁 | | basic-change-model | (model: Coordinate) => void | 基础全景切换模型 | | basic-change-record | (record: TrackRecord) => void | 基础全景切换记录 | | basic-change-point | (point: TrackPoint) => void | 基础全景切换点位 | | basic-map-ready | () => void | 基础地图就绪 | | basic-map-resize | () => void | 基础地图大小改变 | | basic-map-collapse | (value: number) => void | 基础地图折叠状态改变 | | basic-map-dragger | () => void | 基础地图拖拽 | | basic-map-select-point | (point: TrackPoint) => void | 基础地图选择点位 | | basic-map-angle-updated | (value: number) => void | 基础地图角度更新 | | basic-viewer-ready | () => void | 基础视图就绪 | | basic-viewer-click | (e: any) => void | 基础视图点击 | | basic-viewer-mousedown | (e: any) => void | 基础视图鼠标按下 | | basic-viewer-size-updated | (e: any) => void | 基础视图容器大小更新 | | basic-viewer-zoom-updated | (e: any) => void | 基础视图缩放更新 | | basic-viewer-position-updated | (e: any) => void | 基础视图位置更新 | | basic-viewer-panorama-loaded | (e: any) => void | 基础全景图加载完成 | | basic-viewer-panorama-error | (e: any) => void | 基础全景图加载失败 | | basic-viewer-select-point | (point: TrackPoint) => void | 基础视图选择点位 | | basic-viewer-select-marker | (point: TrackPoint) => void | 基础视图选择标记 | | basic-playbar-ready | () => void | 基础播放条就绪 | | basic-playbar-backward | (value: number) => void | 基础播放条后退 | | basic-playbar-pause | (value: number) => void | 基础播放条暂停 | | basic-playbar-play | (value: number) => void | 基础播放条播放 | | basic-playbar-forward | (value: number) => void | 基础播放条前进 | | basic-playbar-slider | (value: number) => void | 基础播放条滑块拖动 | | basic-playbar-speed | (speed: number) => void | 基础播放条速度更新 | | basic-playbar-select-point | (point: TrackPoint) => void | 基础播放条选择点位 | | refer-ready | () => void | 对比全景就绪 | | refer-reload | () => void | 对比全景重新加载 | | refer-destroy | () => void | 对比全景销毁 | | refer-change-model | (model: Coordinate) => void | 对比全景切换模型 | | refer-change-record | (record: TrackRecord) => void | 对比全景切换记录 | | refer-change-point | (point: TrackPoint) => void | 对比全景切换点位 | | refer-map-ready | () => void | 对比地图就绪 | | refer-map-resize | () => void | 对比地图大小改变 | | refer-map-collapse | (value: number) => void | 对比地图折叠状态改变 | | refer-map-dragger | () => void | 对比地图拖拽 | | refer-map-select-point | (point: TrackPoint) => void | 对比地图选择点位 | | refer-map-angle-updated | (value: number) => void | 对比地图角度更新 | | refer-viewer-ready | () => void | 对比视图就绪 | | refer-viewer-click | (e: any) => void | 对比视图点击 | | refer-viewer-mousedown | (e: any) => void | 对比视图鼠标按下 | | refer-viewer-size-updated | (e: any) => void | 基础视图容器大小更新 | | refer-viewer-zoom-updated | (e: any) => void | 对比视图缩放更新 | | refer-viewer-position-updated | (e: any) => void | 对比视图位置更新 | | refer-viewer-panorama-loaded | (e: any) => void | 对比全景图加载完成 | | refer-viewer-panorama-error | (e: any) => void | 基础全景图加载失败 | | refer-viewer-select-point | (point: TrackPoint) => void | 对比视图选择点位 | | refer-viewer-select-marker | (point: TrackPoint) => void | 对比视图选择标记 | | refer-playbar-ready | () => void | 对比播放条就绪 | | refer-playbar-backward | (value: number) => void | 对比播放条后退 | | refer-playbar-pause | (value: number) => void | 对比播放条暂停 | | refer-playbar-play | (value: number) => void | 对比播放条播放 | | refer-playbar-forward | (value: number) => void | 对比播放条前进 | | refer-playbar-slider | (index: number) => void | 对比播放条滑块拖动 | | refer-playbar-speed | (speed : number) => void | 对比播放条速度更新 | | refer-playbar-select-point | (point: TrackPoint) => void | 对比播放条选择点位 | | lock-locked-updated | (distance: number)=>void | 锁状态更新 | | lock-distance-updated | (locked: boolean)=> void | 锁距离更新 | | bimsee-ready | () => void | BIM组件就绪 | | bimsee-reload | () => void | BIM组件重新加载 | | bimsee-destroy | () => void | BIM组件销毁 | | bimsee-change-model | (model: Coordinate) => void | BIM切换模型 | | bimsee-change-point | (point?: Point ) => void | BIM切换坐标点 | | bimsee-masker-ready | (e: any) => void | BIM蒙层就绪 | | bimsee-masker-click | (e: any) => void | BIM蒙层点击 | | bimsee-masker-mousedown | (e: any) => void | BIM蒙层鼠标按下 | | bimsee-viewerzoom-updated | (e: any) => void | BIM蒙层缩放更新 | | bimsee-masker-position-updated | (e: any) => void | BIM蒙层位置更新 |

1.7 Dualsee Slot 插槽说明

| 插槽名称 | 参数类型 | 描述 | | --------------------- | ---------------- | ---------------------- | | lockButton | (slot) => void | 同步锁按钮插槽 | | lockDistance | (slot) => void | 同步锁距离显示插槽 | | basicDefault | (slot) => void | 主视图默认插槽 | | basicMapDefault | (slot) => void | 主视图地图默认插槽 | | basicMapExtra | (slot) => void | 主视图地图额外插槽 | | basicMapLeft | (slot) => void | 主视图地图左侧插槽 | | basicMapRight | (slot) => void | 主视图地图右侧插槽 | | basicPlaybarDefault | (slot) => void | 主视图播放条默认插槽 | | basicPlaybarBox | (slot) => void | 主视图播放条容器插槽 | | basicPlaybarButton | (slot) => void | 主视图播放条按钮插槽 | | basicPlaybarCaption | (slot) => void | 主视图播放条标题插槽 | | basicPlaybarSlider | (slot) => void | 主视图播放条滑块插槽 | | referDefault | (slot) => void | 对比视图默认插槽 | | referMapDefault | (slot) => void | 对比视图地图默认插槽 | | referMapExtra | (slot) => void | 对比视图地图额外插槽 | | referMapLeft | (slot) => void | 对比视图地图左侧插槽 | | referMapRight | (slot) => void | 对比视图地图右侧插槽 | | referPlaybarDefault | (slot) => void | 对比视图播放条默认插槽 | | referPlaybarBox | (slot) => void | 对比视图播放条容器插槽 | | referPlaybarButton | (slot) => void | 对比视图播放条按钮插槽 | | referPlaybarCaption | (slot) => void | 对比视图播放条标题插槽 | | referPlaybarSlider | (slot) => void | 对比视图播放条滑块插槽 | | bimseeDefault | (slot) => void | BIM默认插槽 | | bimseeMasker | (slot) => void | BIM蒙层默认插槽 | | default | (slot) => void | 组件默认插槽 |

basic相关插槽请参考RealseePlugin组件插槽说明
refer相关插槽请参考RealseePlugin组件插槽说明
bimse相关插槽请参考BimseePlugin组件插槽说明
lock相关插槽请参考Lock组件插槽说明

2. Lock 同步锁组件

2.1 介绍

一个用于控制视图是否同步的组件

2.2 LockProps 类型说明

| 参数名 | 类型 | 默认值 | 说明 | | ------------------ | --------- | ------ | -------------------------- | | locked | boolean | true | 锁状态 | | distance | number | 0 | 两点之间的距离 | | showDistance | boolean | true | 是否显示距离 | | maxMatchDistance | number | 5000 | 匹配点最大距离（单位毫米） |

2.3 LockElement 实例对象

| 属性/方法 | 类型/签名 | 说明 | | -------------- | --------------------------------------- | ---------- | | getState | () => LockProps | 获取锁参数 | | setState | (options: UpdatableLockProps) => void | 设置锁参数 | | setDistance | (distance: number) => void | 设置距离值 | | setLocked | (locked: boolean) => void | 设置锁状态 | | showDistance | () => void | 显示距离 | | hideDistance | () => void | 隐藏距离 |

2.4 LockEvents 事件说明

| 事件名称 | 参数类型 | 说明 | | ------------------ | -------------------------- | ---------- | | locked-updated | (distance: number)=>void | 锁状态更新 | | distance-updated | (locked: boolean)=> void | 锁距离更新 |

2.5 Lock Slot 插槽说明

| 插槽名称 | 参数类型 | 说明 | | ---------- | ---------------- | ------------ | | button | (slot) => void | 锁按钮插槽 | | distance | (slot) => void | 距离文本插槽 |

type slot = {
  locked?: boolean | undefined;
  distance?: number | undefined;
  showDistance?: boolean | undefined;
  maxMatchDistance?: number | undefined;
}

3. 导出的类型声明对象

/** 配置相关类型导出 */
export type { AppSetting /** 应用设置 */ } from '@vsleem-realsee-viewer/dualsee-plugin';

export type {
  BasicRealseeProps /** 基础全景参数 */,
  DualseeElement /** 全景对象 */,
  /** Dualsee相关 */
  DualseeProps /** 全景参数 */,
  LockElement /** 锁对象 */,
  /** Lock相关 */
  LockProps /** 锁参数 */,
  ReferBimseeProps /** 对比BIM参数 */,
  ReferRealseeProps /** 对比全景参数 */,
  UpdatableDualseeProps /** 全景状态 */,
  UpdatableLockProps /** 可更新锁参数 */,
} from '@vsleem-realsee-viewer/dualsee-plugin';

export { DUALSEE_CONFIG /** 双重全景默认配置 */, LOCK_CONFIG /** 锁默认配置 */ } from '@vsleem-realsee-viewer/dualsee-plugin';

/** 错误代码code */
export { DualseeErrorCode } from '@vsleem-realsee-viewer/dualsee-plugin';

4. 示例

通过以下方式来注册组件

4.1 安装

npm install @vsleem-realsee-viewer/realsee-plugin @vsleem-realsee-viewer/bimsee-plugin @vsleem-realsee-viewer/shared

pnpm add @vsleem-realsee-viewer/realsee-plugin @vsleem-realsee-viewer/bimsee-plugin @vsleem-realsee-viewer/shared

4.2 例子

vsleem-realsee-demo仓库下的views/dualsee

仓库地址：https://gitee.com/yangleistudio/vsleem-realsee-demo