1. Projection映射组件

1.1 介绍

基于空间坐标系和模型坐标系实现以下功能：

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

$3

- 空间坐标系 (参考CoordinateLevel枚举):
- 地图空间
- 总平面空间（施工场部图）
- 建筑
- 楼层
- 模型坐标系 (参考CoordinateModelType枚举):
- 地图模型
- 图纸模型
- BIM模型

$3

- 空间映射
- 总平面 → 地图 (需总平面空间下有模型)
- 建筑 → 总平面 (需双方空间下有模型)
- 空间绑定
- 将图纸/Bimface模型绑定到楼层/总平面 → 进行模型映射
- 模型映射
- 图纸 → 楼层/总平面
- Bimface模型 → 楼层/总平面
- 模型长度映射 (特殊模型映射，组件已判断无需第三方处理)
- 首次映射到总平面/楼层时需映射长度

1.2 ProjectionProps 参数说明

| 属性 | 类型 | 默认值 | 说明 |
| ------------------- | ------------ | ------ | ---------------------------- |
| appSetting | AppSetting | - | 应用程序配置 |
| mapSetting? | MapSetting | - | 地图配置 |
| projectId | number | - | 项目唯一标识符 |
| bindModelId? | number | - | 绑定的模型标识符 |
| bindCoordinateId? | number | - | 绑定的目标坐标系标识符 |
| srcCoordinateId? | number | - | 映射源坐标系标识符 |
| dstCoordinateId? | number | - | 映射目标坐标系标识符 |
| srcModelType? | number[] | - | 映射指定源坐标系的模型类型 |
| dstModelType? | number[] | - | 映射指定目标坐标系的模型类型 |

1.3 AppSetting 类型说明

| 参数名 | 类型 | 默认值 | 说明 |
| ---------------- | ------------- | ------------------------ | ---------------------------- |
| baseUrl? | string | https://vsleem.com/api | 用于配置应用后端服务的根路径 |
| authorizeCode | string | - | 用于API身份验证和授权的凭证 |
| locale? | string | LocaleType.zh_CN | 当前语言 |
| theme? | ThemeConfig | - | 主题配置 |
| flattenPicker? | boolean | false | 选项扁平化 |
| showTitleHead? | boolean | true | 是否显示标题头 |

1.4 MapSetting 类型说明

| 属性 | 类型 | 默认值 | 说明 |
| ------------------ | ----------------------------------------------------- | ------ | ------------ |
| options? | MapOptions | - | 地图选项 |
| tileLayers | TileLayer[] | - | 瓦片图层列表 |
| keywordSearchFn? | (keyword: string) => Promise | - | 地理编码查询 |

1.5 事件说明

| 事件名称 | 参数类型 | 说明 |
| ------------------ | ----------------------------- | ----------------------- |
| bindingSubmit | (result: Coordinate[]) | 模型绑定完成后触发 |
| projectionSubmit | (result: ProjectionModel[]) | 模型/空间映射完成后触发 |

1.6 类型定义

``typescript
type ProjectionModel = {
mappingType?: number; //映射类型
projectId?: number; // 项目ID
srcCsId?: number; // 源坐标系ID(被映射的模型/空间)
srcModelCsId?: number; // 源模型坐标系ID（左侧视图模型）
srcModelId?: number; //源模型 ID(非坐标系id,是模型自身的原始id)
srcCsPointA?: string; // 源坐标系点A（左侧视图点A）
srcCsPointB?: string; // 源坐标系点B（左侧视图点B）
dstCsId?: number; // 目标坐标系ID(映射目标-空间)
dstModelCsId?: number; // 目标模型坐标系ID(右侧视图模型)
dstModelId?: number; //目标模型 ID(非坐标系id,是模型自身的原始id)
dstPointA?: string; // 目标坐标系点A(右侧视图点A)
dstPointB?: string; // 目标坐标系点B(右侧视图点B)
};

//映射类型枚举
enum MappingType {
SpaceMapping = 0, //空间映射
ModelMapping = 1, //模型映射
ScaleMapping = 2, //比例尺映射
FixedMapping = 3, //固定映射(如空间首次绑定模型并且模型是BIM直接映射)
}

//空间坐标系枚举，是前端自定义枚举，只做前端业务参考，不能作为数据类型枚举
enum CoordinateLevel {
Global = 0, //地图
Ground = 1, //总平面（施工场部图）
Build = 2, //建筑
Floor = 3, //楼层
Room = 4, //房间
}

//模型坐标系枚举，可作为数据类型枚举
enum CoordinateModelType {
CADModel = 5, //cad图片模型
BimfaceModel = 6, //bimface模型
ForgeModel = 7, //forge模型
ThreeDModel = 8, //3d模型
GeoModel = 9, //地图模型
}
`

2. 示例

通过以下方式来注册组件

2.1 安装

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

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

2.2 例子

vsleem-realsee-demo仓库下的views/projection`

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