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) => 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 | 显示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. 导出的类型声明对象

`js

/* 配置相关类型导出 /
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