1. Bimsee嵌套组件

1.1 介绍

用于将BIM模型展示在页面上的组件，组件包含蒙层容器组件和相关交互等功能

依赖@vsleem-realsee-viewer/shared（共享类）

1.2 BimseeProps 参数说明

| 参数名 | 类型 | 默认值 | 说明 | | ------------------- | -------------------------------------------------------- | --------------------------- | -------------------------- | | appSetting | AppSetting | 请查看AppSetting类型默认值 | 应用全局配置 | | searchInfo | SearchInfo | - | 数据查询条件参数 | | bimseeSetting? | BimseeSetting | - | 暂未使用 | | masker? | MaskerProps | 请查看MaskerProps类型默认值 | 蒙层相关属性配置 | | immediate? | boolean | true | 是否立即发起数据请求 | | delay? | number | 0 | 请求延迟时间（单位：毫秒） | | handleResponseFn? | (res?: Coordinate) => Promise<Coordinate \| undefined> | - | 处理坐标系树响应 | | fetchSuccess? | (res?: Coordinate) => void | - | 坐标系树请求成功 | | fetchError? | (error: any) => void | - | 请求失败回调 |

1.3 AppSetting 类型说明

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

1.4 SearchInfo 类型说明

| 参数名 | 类型 | 默认值 | 说明 | | ----------- | -------- | ------ | ----------------- | | projectId | number | - | 项目唯一标识 | | modelCsId | number | - | bim模型坐标系标识 |

1.5 BimseeStore 类型说明

| 属性/方法 | 类型/签名 | 说明 | | ----------------------- | ----------------------------------------------------- | ------------------------------------ | | ready | boolean | 是否加载完成 | | coordinateTree? | Coordinate | 坐标树结构 | | mappedCoordinateTree? | Coordinate | 映射后的坐标树结构 | | currentModel? | Coordinate | 当前模型坐标系 | | currentSpace? | Coordinate | 当前空间坐标系 | | currentPoint? | Point | 当前模型的点 | | reload | (searchInfo: SearchInfo) => Promise<void> | 重新加载数据 | | selectModel | (coordinate: Partial<Coordinate>) => void | 选择模型（找不到对应模型时抛出错误） | | selectPoint | (point: Point) => void | 设置模型的坐标点 | | setReferPoint | (current: TrackPoint, options: PanoOptions) => void | 设置参考点 | | normalizeToModelPoint | (current: TrackPoint) => TrackPoint \| undefined | 设置模型的坐标点 |

1.6 BimseeElement 实例对象

| 属性/方法 | 类型签名 | 说明 | | ------------- | -------------------------------------------------- | -------------------------------------------------- | | storeRef | ComputedRef<BimseeStore> | 响应式存储对象引用 | | getStore() | () => BimseeStore | 获取状态管理库实例 | | getMasker() | () => MaskerElement \| undefined | 获取蒙层容器控制器 | | getState() | () => BimseeProps | 获取初始化配置（返回原始配置参数） | | setState() | (options: Partial<UpdatableBimseeProps>) => void | 动态更新可修改配置（注意：部分配置初始化后不可更改 |

1.7 BimseeEvents 事件说明

| 事件名称 | 参数类型 | 说明 | | ----------------------- | ------------------------------ | ---------------------- | | ready | () => void | 准备就绪事件 | | reload | () => void | 重新加载事件 | | destroy | () => void | 组件销毁事件 | | changeModel | (model?: Coordinate) => void | 切换模型事件 | | changePoint | (point?: Point) => void | 切换坐标点事件 | | maskerReady | () => void | 蒙层准备就绪事件 | | maskerClick | (e: any) => void | 蒙层点击事件 | | maskerMousedown | (e: any) => void | 蒙层鼠标按下事件 | | maskerZoomUpdated | (e: any) => void | 蒙层缩放到指定级别事件 | | maskerPositionUpdated | (e: any) => void | 蒙层旋转到指定位置事件 |

1.8 Bimsee Slot 插槽说明

| 插槽名称 | 参数类型 | 说明 | | --------- | ---------------------- | -------- | | default | (slot) => void | 默认插槽 | | masker | (maskerSlot) => void | 蒙层插槽 |

type slot = {
 coordinateTree: Coordinate | undefined;
    mappedCoordinateTree: Coordinate | undefined;
    currentSpace: Coordinate | undefined;
    currentModel: Coordinate | undefined;
    currentPoint: Point | undefined;
}
type maskerSlot =slot & {
    cameraStatus: CameraStatus | undefined;
    state: Required<Partial<MaskerProps>>;
}

2. Masker 蒙层组件

2.1 介绍

一个覆盖在BIM上的蒙层组件

2.2 MaskerProps 类型说明

| 参数名 | 类型 | 默认值 | 说明 | | ----------------- | --------- | ------ | ---------------------- | | visible? | boolean | true | 是否可见 | | defaultYaw? | number | 0 | 默认偏航角(球面基准) | | defaultPitch? | number | 0 | 默认俯仰角(球面基准) | | defaultZoomLvl? | number | 30 | 默认缩放级别(球面基准) | | minFov? | number | 20 | 最小视野角度 | | maxFov? | number | 120 | 最大视野角度 | | mouseover? | boolean | - | 鼠标悬浮 | | mousedown? | boolean | - | 鼠标按下 |

2.3 MaskerElement 实例对象

| 方法/属性 | 类型签名 | 说明 | | ------------------- | ------------------------------------------ | ------------------------ | | dataHelper | DataHelper | 用于蒙层的数据转换器集合 | | isMouseover | () => boolean | 检查鼠标是否悬停 | | isMousedown | () => boolean | 检查鼠标是否按下 | | setState | (options?: Partial<MaskerProps>) => void | 更新蒙层配置选项 | | setVisible | (visible: boolean) => void | 设置蒙层是否显示 | | setMousedown | (mousedown: boolean) => void | 设置鼠标按下状态 | | setMouseover | (mouseover: boolean) => void | 设置鼠标悬停状态 | | setMinFov | (minFov: number) => void | 设置最小视野 | | setMaxFov | (maxFov: number) => void | 设置最大视野 | | setMaskerStatus | (options: PanoOptions) => void | 更新蒙层状态 | | zoom | (level: number) => void | 缩放到指定级别 | | rotate | (position: Position) => void | 旋转蒙层到指定位置 | | getState | () => MaskerProps | 获取当前蒙层状态 | | getPosition | () => Position | 获取当前位置(yaw/pitch) | | getZoomLevel | () => number | 获取当前缩放级别 | | getCameraPosition | () => Vector3 \| undefined | 获取当前相机位置 | | getCameraTarget | () => Vector3 \| undefined | 获取当前相机视角 | | getCameraHFov | () => number \| undefined | 获取当前相机视野角度 | | getCameraStatus | () => CameraStatus \| undefined | 获取相机状态 |

2.4 DataHelper 数据转换对象

| 属性 | 类型 | 描述 | | ---------------------------- | -------------------------------------------------- | ------------------------------------ | | modelPointToCameraPosition | (point: Point) => Vector3 | 将当前模型的坐标转成三维相机位置坐标 | | maskerRotateToCameraTarget | (rotate: Position, position: Vector3) => Vector3 | 将球面坐标转换为三维目标点坐标 | | fovToZoomLevel | (fov: number) => number | 将视野转换为缩放级别 | | zoomLevelToFov | (level: number) => number | 将缩放级别转换为视野 |

2.5 MaskerEvents 事件说明

| 事件名称 | 描述 | 参数类型 | | ----------------- | ---------------------- | ---------------- | | ready | 蒙层准备就绪事件 | () => void | | click | 蒙层点击事件 | (e: any) => void | | mousedown | 蒙层鼠标按下事件 | (e: any) => void | | zoomUpdated | 蒙层缩放到指定级别事件 | (e: any) => void | | positionUpdated | 蒙层旋转到指定位置事件 | (e: any) => void |

3. 导出的类型声明对象

// 配置相关类型导出
export type {
AppSetting, // 应用设置
  SearchInfo, // 搜索信息
  BimseeSetting, //bim配置
  CameraStatus, //相机状态
} from '@vsleem-realsee-viewer/bimsee-plugin';

// 组件属性类型导出
export type {
  // Bimsee 相关
  UpdatableBimseeProps, // 可更新的Bimsee属性
  BimseeProps, //Bimsee 组件属性
  BimseeElement, // Bimsee 元素类型
  BimseeStore, // Bimsee 状态管理元素类型

  //蒙层相关
  UpdatableMaskerProps, // 可更新的蒙层属性
  MaskerProps, // 蒙层属性
  MaskerElement, // 蒙层元素类型
} from '@vsleem-realsee-viewer/bimsee-plugin';

export {
  BIMSEE_CONFIG, // Realsee 默认设置
  MASKER_CONFIG, // 蒙层默认配置
} from '@vsleem-realsee-viewer/bimsee-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仓库下的viewer/dualsee

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