@vsleem-realsee-viewer/realsee-plugin 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +284 -228
- package/dist/components/Realsee.vue.d.ts +32 -33
- package/dist/enums/error.d.ts +2 -1
- package/dist/index.css +1 -1
- package/dist/index.mjs +770 -765
- package/dist/index.umd.js +15 -15
- package/dist/settings/index.d.ts +1 -0
- package/dist/types/realsee.d.ts +4 -3
- package/dist/types/store.d.ts +11 -11
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
1
|
# Realsee 全景组件
|
|
4
2
|
|
|
5
3
|
## 介绍
|
|
@@ -8,61 +6,73 @@
|
|
|
8
6
|
|
|
9
7
|
### RealseeProps 参数说明
|
|
10
8
|
|
|
11
|
-
| 参数名
|
|
12
|
-
|
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `fetchParams
|
|
23
|
-
| `handleResponseFn
|
|
24
|
-
| `fetchSuccess
|
|
25
|
-
| `fetchError
|
|
9
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
10
|
+
| ------------------- | -------------------------------------------------------- | ------------------------------ | ------------------------------------------ |
|
|
11
|
+
| `appSetting` | `AppSetting` | 请查看AppSetting类型默认值 | 应用全局配置 |
|
|
12
|
+
| `searchInfo` | `SearchInfo` | - | 数据查询条件参数 |
|
|
13
|
+
| `realseeSetting?` | `RealseeSetting` | 请查看RealseeSetting类型默认值 | 全景功能专用配置 |
|
|
14
|
+
| `viewer?` | `ViewerProps` | 请查看ViewerProps类型默认值 | 全景相关属性配置 |
|
|
15
|
+
| `marker?` | `MarkerProps` | 请查看MarkerProps类型默认值 | 标记点相关属性配置 |
|
|
16
|
+
| `playbar?` | `PlaybarProps` | 请查看PlaybarProps类型默认值 | 播放器控制栏配置 |
|
|
17
|
+
| `map?` | `MapProps` | 请查看MapProps类型默认值 | 小地图配置 |
|
|
18
|
+
| `immediate?` | `boolean` | true | 是否立即发起数据请求 |
|
|
19
|
+
| `delay?` | `number` | 0 | 请求延迟时间（单位：毫秒） |
|
|
20
|
+
| `fetchParams?` | `Record<string, any>` | - | 自定义请求参数（排除坐标系相关接口） |
|
|
21
|
+
| `handleResponseFn?` | `(res: TrackRecordModel) => Promise<TrackRecordModel>` | - | 自定义响应数据处理（需返回处理后的数据） |
|
|
22
|
+
| `fetchSuccess?` | `(record: TrackRecord, coordinate?: Coordinate) => void` | - | 请求成功回调（`coordinate`为可选坐标参数） |
|
|
23
|
+
| `fetchError?` | `(error: any) => void` | - | 请求失败回调 |
|
|
24
|
+
|
|
25
|
+
|
|
|
26
26
|
|
|
27
27
|
### RealseeSetting 类型说明
|
|
28
28
|
|
|
29
|
-
| 参数名
|
|
30
|
-
|
|
|
31
|
-
| `pointLax
|
|
32
|
-
| `pointType
|
|
33
|
-
| `pointNumber
|
|
34
|
-
| `pointDistance
|
|
35
|
-
| `preloadStep
|
|
36
|
-
| `trackColorRange
|
|
37
|
-
| `pathPin
|
|
38
|
-
| `pathRedPin
|
|
29
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
30
|
+
| ------------------ | ---------- | ---------------- | ------------------------------------ |
|
|
31
|
+
| `pointLax?` | `number` | 0 | 路径点稀疏系数 |
|
|
32
|
+
| `pointType?` | `number` | 0 | 迹点展示模式：0=点位模式，1=距离模式 |
|
|
33
|
+
| `pointNumber?` | `number` | 5 | 展示前后多少个点 |
|
|
34
|
+
| `pointDistance?` | `number` | 5 | 展示轨迹点范围内的点 |
|
|
35
|
+
| `preloadStep?` | `number` | 5 | 全景预加载数量 |
|
|
36
|
+
| `trackColorRange?` | `string[]` | TRACK_COLOR_LIST | 轨迹颜色范围 |
|
|
37
|
+
| `pathPin?` | `any` | pinIcon | 路径图钉 |
|
|
38
|
+
| `pathRedPin?` | `any` | redPinIcon | 红色路径图钉(有问题标记的路径图钉) |
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
```
|
|
41
|
+
const TRACK_COLOR_LIST = [
|
|
42
|
+
'#3CDE99',
|
|
43
|
+
'#DE3CB9',
|
|
44
|
+
'#683CDE',
|
|
45
|
+
'#3CA0DE',
|
|
46
|
+
'#D8DE3C',
|
|
47
|
+
'#DEA03C',
|
|
48
|
+
'#DE3C3C',
|
|
49
|
+
]
|
|
50
|
+
```
|
|
41
51
|
|
|
42
52
|
### SearchInfo 类型说明
|
|
43
53
|
|
|
44
|
-
| 参数名 | 类型
|
|
45
|
-
| ------------ |
|
|
46
|
-
| `projectId` | `number`
|
|
47
|
-
| `patrolId` | `string` |
|
|
48
|
-
| `pointId?` | `string`
|
|
49
|
-
| `modelCsId?` | `number`
|
|
54
|
+
| 参数名 | 类型 | 默认值 | 说明 |
|
|
55
|
+
| ------------ | ------------------- | ------ | ------------------------------ |
|
|
56
|
+
| `projectId` | `number` | - | 项目唯一标识 |
|
|
57
|
+
| `patrolId` | `string \ string[]` | - | 巡检记录id或id集合 |
|
|
58
|
+
| `pointId?` | `string` | - | 轨迹点标识（用于定位具体点位） |
|
|
59
|
+
| `modelCsId?` | `number` | - | 模型坐标系标识 |
|
|
50
60
|
|
|
51
61
|
### RealseeStore 类型说明
|
|
52
62
|
|
|
53
|
-
|
|
|
63
|
+
| 属性/方法 | 类型/签名 | 说明 |
|
|
54
64
|
| ----------------------- | -------------------------------------------------------- | ------------------------------------------ |
|
|
55
|
-
| `ready
|
|
56
|
-
| `coordinateTree?` | `Coordinate` |
|
|
57
|
-
| `mappedCoordinateTree?` | `Coordinate` |
|
|
65
|
+
| `ready` | `boolean` | 是否加载完成 |
|
|
66
|
+
| `coordinateTree?` | `Coordinate` | 坐标系树数据 |
|
|
67
|
+
| `mappedCoordinateTree?` | `Coordinate` | 映射坐标系树数据 |
|
|
58
68
|
| `rawDataSource` | `Map<string, TrackRecord>` | 原始所有巡检记录集合 |
|
|
59
69
|
| `dataSource` | `Map<string, TrackRecord>` | 展示的所有巡检记录集合 |
|
|
60
|
-
| `comCoordinate?` | `Coordinate` |
|
|
61
|
-
| `currentModel?` | `Coordinate` |
|
|
62
|
-
| `currentSpace?` | `Coordinate` |
|
|
63
|
-
| `currentRecord?` | `TrackRecord` |
|
|
64
|
-
| `currentPoint?` | `TrackPoint` |
|
|
65
|
-
| `currentMarker?` | `TrackMarker` |
|
|
70
|
+
| `comCoordinate?` | `Coordinate` | 所有记录集合共有的空间坐标系 |
|
|
71
|
+
| `currentModel?` | `Coordinate` | 当前选中的模型坐标系 |
|
|
72
|
+
| `currentSpace?` | `Coordinate` | 当前模型所属的空间坐标系 |
|
|
73
|
+
| `currentRecord?` | `TrackRecord` | 当前选中的巡检记录 |
|
|
74
|
+
| `currentPoint?` | `TrackPoint` | 当前选中的轨迹点 |
|
|
75
|
+
| `currentMarker?` | `TrackMarker` | 当前选中的问题标记 |
|
|
66
76
|
| `currentPointMarkers` | `TrackMarker[]` | 当前点关联的所有问题标记列表 |
|
|
67
77
|
| `groupedMarkers` | ` Map<TrackPoint, TrackMarker[]>` | 根据坐标点对所有巡检记录的问题标记进行分组 |
|
|
68
78
|
| `reload` | `(searchInfo: SearchInfo) => Promise<void>` | 重新加载数据（包含 projectId 和 patrolId） |
|
|
@@ -77,6 +87,7 @@
|
|
|
77
87
|
| `hasRecord` | `(id: string) => boolean` | 检查指定ID的记录是否存在 |
|
|
78
88
|
| `getRecord` | `(id: string) => TrackRecord \ undefined` | 获取指定ID的记录对象 |
|
|
79
89
|
| `addRecord` | `(id: string) => Promise<TrackRecord \ undefined>` | 添加新记录 |
|
|
90
|
+
| `batchAddRecords` | ` (ids: string[]) => Promise<void>` | 批量添加巡检记录 |
|
|
80
91
|
| `removeRecord` | `(id: string) => boolean` | 移除指定记录 |
|
|
81
92
|
| `updateRecord` | `(record: TrackRecord) => Promise<void>` | 更新记录数据 |
|
|
82
93
|
| `findClosestBIMModel` | `() => Coordinate \ undefined` | 获取当前模型在映射坐标系树最近的bimsee模型 |
|
|
@@ -85,9 +96,9 @@
|
|
|
85
96
|
|
|
86
97
|
### RealseeElement 实例对象
|
|
87
98
|
|
|
88
|
-
|
|
|
99
|
+
| 属性/方法 | 类型/签名 | 说明 |
|
|
89
100
|
| -------------- | --------------------------------------------------- | -------------------------------------------------------------------- |
|
|
90
|
-
| `storeRef` | `ComputedRef<RealseeStore>` |
|
|
101
|
+
| `storeRef` | `ComputedRef<RealseeStore>` | 存储对象引用 |
|
|
91
102
|
| `getStore()` | `() => RealseeStore` | 获取状态管理库实例 |
|
|
92
103
|
| `getViewer()` | `() => ViewerElement \ undefined` | 获取全景视图控制器（未配置 viewer 时返回 undefined） |
|
|
93
104
|
| `getMarker()` | `() => MarkerElement \ undefined` | 获取标记点控制器（未配置 marker 时返回 undefined） |
|
|
@@ -99,53 +110,73 @@
|
|
|
99
110
|
|
|
100
111
|
### RealseeEvents 事件说明
|
|
101
112
|
|
|
102
|
-
| 事件名称
|
|
103
|
-
|
|
|
104
|
-
| ready |
|
|
105
|
-
| changeModel |
|
|
106
|
-
| changeRecord |
|
|
107
|
-
| changePoint |
|
|
108
|
-
| mapReady |
|
|
109
|
-
| mapResize |
|
|
110
|
-
| mapCollapse |
|
|
111
|
-
| mapDragger |
|
|
112
|
-
| mapSelectPoint |
|
|
113
|
-
| mapAngleUpdated |
|
|
114
|
-
| viewerReady |
|
|
115
|
-
| viewerClick |
|
|
116
|
-
| viewerMousedown |
|
|
117
|
-
| viewerZoomUpdated |
|
|
118
|
-
| viewerPositionUpdated |
|
|
119
|
-
| viewerPanoramaLoaded |
|
|
120
|
-
| viewerSelectPoint |
|
|
121
|
-
| viewerSelectMarker |
|
|
122
|
-
| playbarReady |
|
|
123
|
-
| playbarBackward |
|
|
124
|
-
| playbarPause |
|
|
125
|
-
| playbarPlay |
|
|
126
|
-
| playbarForward |
|
|
127
|
-
| playbarSlider |
|
|
128
|
-
|
|
|
129
|
-
| playbarSpeedUpdated |
|
|
130
|
-
| playbarDelayUpdated |
|
|
131
|
-
|
|
|
113
|
+
| 事件名称 | 参数类型 | 说明 |
|
|
114
|
+
| ----------------------- | ------------------------------- | -------------------------- |
|
|
115
|
+
| `ready` | `() => void` | 触发基本准备就绪事件 |
|
|
116
|
+
| `changeModel` | `(model: Coordinate) => void` | 处理模型变化事件 |
|
|
117
|
+
| `changeRecord` | `(record: TrackRecord) => void` | 处理记录变化事件 |
|
|
118
|
+
| `changePoint` | `(point: TrackPoint) => void` | 处理点的变更事件 |
|
|
119
|
+
| `mapReady` | `() => void` | 触发地图准备就绪事件 |
|
|
120
|
+
| `mapResize` | `() => void` | 触发地图尺寸改变事件 |
|
|
121
|
+
| `mapCollapse` | `(value: number) => void` | 触发小地图展开/折叠事件 |
|
|
122
|
+
| `mapDragger` | `() => void` | 触发地图拖动事件 |
|
|
123
|
+
| `mapSelectPoint` | `(point: TrackPoint) => void` | 选择地图上的点事件 |
|
|
124
|
+
| `mapAngleUpdated` | `(value: number) => void` | 更新地图雷达角度事件 |
|
|
125
|
+
| `viewerReady` | `() => void` | 触发查看器准备就绪事件 |
|
|
126
|
+
| `viewerClick` | `(e: any) => void` | 触发查看器点击事件 |
|
|
127
|
+
| `viewerMousedown` | `(e: any) => void` | 处理查看器鼠标按下事件 |
|
|
128
|
+
| `viewerZoomUpdated` | `(e: any) => void` | 更新查看器缩放信息事件 |
|
|
129
|
+
| `viewerPositionUpdated` | `(e: any) => void` | 更新查看器位置事件 |
|
|
130
|
+
| `viewerPanoramaLoaded` | `(e: any) => void` | 查看器全景图加载完成事件 |
|
|
131
|
+
| `viewerSelectPoint` | `(point: TrackPoint) => void` | 在查看器中选择一个点事件 |
|
|
132
|
+
| `viewerSelectMarker` | `(point: TrackPoint) => void` | 在查看器中选择一个标记事件 |
|
|
133
|
+
| `playbarReady` | `() => void` | 触发播放条准备就绪事件 |
|
|
134
|
+
| `playbarBackward` | `(value: number) => void` | 触发播放条后退事件 |
|
|
135
|
+
| `playbarPause` | `(value: number) => void` | 触发播放条暂停事件 |
|
|
136
|
+
| `playbarPlay` | `(value: number) => void` | 触发播放条播放事件 |
|
|
137
|
+
| `playbarForward` | `(value: number) => void` | 触发播放条前进事件 |
|
|
138
|
+
| `playbarSlider` | `(index: number) => void` | 触发播放条滑块变化事件 |
|
|
139
|
+
| `playbarSelectPoint` | `(step : number) => void` | 选择播放条上的点事件 |
|
|
140
|
+
| `playbarSpeedUpdated` | `(speed : number) => void` | 更新播放条速度事件 |
|
|
141
|
+
| `playbarDelayUpdated` | `(delay: number) => void` | 更新播放条延迟事件 |
|
|
142
|
+
| `playbarStepUpdated` | `(point: TrackPoint) => void` | 更新播放条步骤事件 |
|
|
132
143
|
|
|
133
144
|
### Realsee Slot 插槽说明
|
|
134
145
|
|
|
135
|
-
| 插槽名称
|
|
136
|
-
|
|
|
137
|
-
| default |
|
|
138
|
-
| mapDefault |
|
|
139
|
-
| mapExtra |
|
|
140
|
-
| mapLeft |
|
|
141
|
-
| mapRight |
|
|
142
|
-
| playbarDefault |
|
|
143
|
-
| playbarBox |
|
|
144
|
-
| playbarButton |
|
|
145
|
-
| playbarCaption |
|
|
146
|
-
| playbarSlider |
|
|
147
|
-
|
|
148
|
-
|
|
146
|
+
| 插槽名称 | 参数类型 | 说明 |
|
|
147
|
+
| ---------------- | ----------------------- | ---------------- |
|
|
148
|
+
| `default` | `(slot) => void` | 默认插槽 |
|
|
149
|
+
| `mapDefault` | `(mapSlot) => void` | 地图默认插槽 |
|
|
150
|
+
| `mapExtra` | `(mapSlot) => void` | 地图额外信息插槽 |
|
|
151
|
+
| `mapLeft` | `(mapSlot) => void` | 地图左侧插槽 |
|
|
152
|
+
| `mapRight` | `(mapSlot) => void` | 地图右侧插槽 |
|
|
153
|
+
| `playbarDefault` | `(playbarSlot) => void` | 播放条默认插槽 |
|
|
154
|
+
| `playbarBox` | `(playbarSlot) => void` | 播放条盒子插槽 |
|
|
155
|
+
| `playbarButton` | `(playbarSlot) => void` | 播放条按钮插槽 |
|
|
156
|
+
| `playbarCaption` | `(playbarSlot) => void` | 播放条标题插槽 |
|
|
157
|
+
| `playbarSlider` | `(playbarSlot) => void` | 播放条滑块插槽 |
|
|
158
|
+
|
|
159
|
+
```js
|
|
160
|
+
type slot= {
|
|
161
|
+
dataSource: Map<string, TrackRecord> | undefined;
|
|
162
|
+
coordinateTree: Coordinate | undefined;
|
|
163
|
+
mappedCoordinateTree: Coordinate | undefined;
|
|
164
|
+
currentSpace: Coordinate | undefined;
|
|
165
|
+
currentModel: Coordinate | undefined;
|
|
166
|
+
currentRecord: TrackRecord | undefined;
|
|
167
|
+
currentPoint: TrackPoint | undefined;
|
|
168
|
+
currentPointMarkers: TrackMarker[] | undefined;
|
|
169
|
+
currentMarker: TrackMarker | undefined;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
type mapSlot = slot & {
|
|
173
|
+
state: Required<Partial<MapProps>>;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
type playbarSlot = slot & {
|
|
177
|
+
state: Required<Partial<PlaybarProps>>;
|
|
178
|
+
}
|
|
179
|
+
```
|
|
149
180
|
|
|
150
181
|
# Viewer 视图组件
|
|
151
182
|
|
|
@@ -155,25 +186,30 @@
|
|
|
155
186
|
|
|
156
187
|
- `ViewerProps 类型继承 core.viewerconfig，更多属性请参考https://photo-sphere-viewer.js.org/api/types/core.viewerconfig`
|
|
157
188
|
|
|
158
|
-
| 属性
|
|
159
|
-
|
|
|
160
|
-
|
|
|
189
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
190
|
+
| ----------------- | ----------------- | -------------------------- | -------- |
|
|
191
|
+
| `...ViewerConfig` | `...ViewerConfig` | 请查看ViewerConfig默认配置 | 视图配置 |
|
|
161
192
|
|
|
162
|
-
|
|
193
|
+
```
|
|
194
|
+
type ViewerProps = Omit<
|
|
195
|
+
ViewerConfig,
|
|
196
|
+
'container' | 'panorama' | 'keyboard' | 'keyboardActions'
|
|
197
|
+
>
|
|
198
|
+
```
|
|
163
199
|
|
|
164
200
|
### ViewerElement 实例对象
|
|
165
201
|
|
|
166
|
-
|
|
|
202
|
+
| 属性/方法 | 类型签名 | 说明 |
|
|
167
203
|
| -------------------- | ------------------------------------------------------------------------ | ---------------------- |
|
|
168
|
-
| `getState` | `()
|
|
204
|
+
| `getState` | `()=> UpdatableViewerProps \ undefined` | 获取当前查看器配置选项 |
|
|
169
205
|
| `setState` | `(options?: UpdatableViewerProps) => void` | 更新查看器配置选项 |
|
|
170
|
-
| `isMouseover` | `()
|
|
171
|
-
| `isMousedown` | `()
|
|
172
|
-
| `setPanoramaOptions` | `(options?: PanoramaOptions) => void` | 设置全景图专用选项 |
|
|
173
|
-
| `setPanoramaPath` | `(path: any, options?: PanoramaOptions) => Promise<boolean \ undefined>` | 加载全景图 |
|
|
174
|
-
| `setPosition` | `(position: Position) => void` | 设置观察位置/视角 |
|
|
206
|
+
| `isMouseover` | `()=> boolean` | 获取鼠标悬停状态 |
|
|
207
|
+
| `isMousedown` | `()=> boolean` | 获取鼠标按下状态 |
|
|
175
208
|
| `setMousedown` | `(mousedown: boolean) => void` | 设置鼠标按下状态 |
|
|
176
209
|
| `setMouseover` | `(moveover: boolean) => void` | 设置鼠标悬停状态 |
|
|
210
|
+
| `setPanoramaPath` | `(path: any, options?: PanoramaOptions) => Promise<boolean \ undefined>` | 加载全景图 |
|
|
211
|
+
| `setPanoramaOptions` | `(options?: PanoramaOptions) => void` | 设置全景图专用选项 |
|
|
212
|
+
| `setPosition` | `(position: Position) => void` | 设置观察位置/视角 |
|
|
177
213
|
| `updateMarkers` | `() => void` | 更新在全景图上的标记 |
|
|
178
214
|
| `refresh` | `() => void` | 刷新视图 |
|
|
179
215
|
| `preload` | `() => void` | 预加载资源 |
|
|
@@ -184,17 +220,17 @@
|
|
|
184
220
|
- `Marker 实例对象事件监听说明请参考https://photo-sphere-viewer.js.org/api/modules/markersplugin.events`
|
|
185
221
|
`以下是自定义事件说明`
|
|
186
222
|
|
|
187
|
-
| 事件名称
|
|
188
|
-
|
|
|
189
|
-
| register | 注册视图事件 |
|
|
190
|
-
| ready |
|
|
191
|
-
| click |
|
|
192
|
-
| mousedown |
|
|
193
|
-
| zoomUpdated |
|
|
194
|
-
| positionUpdated |
|
|
195
|
-
| panoramaLoaded |
|
|
196
|
-
| selectPoint |
|
|
197
|
-
| selectMarker |
|
|
223
|
+
| 事件名称 | 参数类型 | 说明 |
|
|
224
|
+
| ----------------- | ----------------------------- | -------------------------------- |
|
|
225
|
+
| `register` | `--` | 注册视图事件 |
|
|
226
|
+
| `ready` | `() => void` | 触发查看器准备就绪事件 |
|
|
227
|
+
| `click` | `(e: any) => void` | 处理查看器点击事件 |
|
|
228
|
+
| `mousedown` | `(e: any) => void` | 处理查看器鼠标按下事件并折叠地图 |
|
|
229
|
+
| `zoomUpdated` | `(e: any) => void` | 更新查看器缩放信息 |
|
|
230
|
+
| `positionUpdated` | `(e: any) => void` | 更新查看器位置 |
|
|
231
|
+
| `panoramaLoaded` | `(e: any) => void` | 查看器位全景图加载完成 |
|
|
232
|
+
| `selectPoint` | `(point: TrackPoint) => void` | 在查看器中选择一个点相关事件 |
|
|
233
|
+
| `selectMarker` | `(point: TrackPoint) => void` | 在查看器中选择一个标记事件 |
|
|
198
234
|
|
|
199
235
|
### MarkerProps 类型说明
|
|
200
236
|
|
|
@@ -202,21 +238,34 @@
|
|
|
202
238
|
|
|
203
239
|
- `MarkerOptions 类型继承 markersplugin.markerconfig，请参考https://photo-sphere-viewer.js.org/api/types/markersplugin.markerconfig`
|
|
204
240
|
|
|
205
|
-
| 属性
|
|
206
|
-
|
|
|
207
|
-
|
|
|
208
|
-
|
|
|
209
|
-
|
|
|
241
|
+
| 属性 | 类型 | 默认值 | 描述 |
|
|
242
|
+
| -------------------------- | ----------------------------------------------- | --------------------------------- | ------------------------------------------------------------------------- |
|
|
243
|
+
| `...MarkersPluginConfig` | `...MarkersPluginConfig` | 请查看MarkersPluginConfig默认配置 | 标记配置 |
|
|
244
|
+
| `onPointChange?` | `(e: events.SelectMarkerEvent) => Promise<any>` | - | 全景上点击轨迹点回调，参数为关闭函数，返回 promise 时 rejected 后停止执行 |
|
|
245
|
+
| `onMarkerChange?` | `(e: events.SelectMarkerEvent) => Promise<any>` | - | 全景上点击标记点回调，参数为关闭函数，返回 promise 时 rejected 后停止执行 |
|
|
246
|
+
| `handleViolationMarkerFn?` | `(marker: MarkerOptions) => MarkerOptions` | - | 处理轨迹点上的标记 |
|
|
247
|
+
| `handlePathMarkerFn?` | `(marker: MarkerOptions) => MarkerOptions` | - | 处理路径标记 |
|
|
248
|
+
|
|
249
|
+
```
|
|
250
|
+
type MarkerProps = MarkersPluginConfig & {
|
|
251
|
+
onPointChange?: (e: events.SelectMarkerEvent) => Promise<any>;
|
|
252
|
+
onMarkerChange?: (e: events.SelectMarkerEvent) => Promise<any>;
|
|
253
|
+
handleViolationMarkerFn?: (marker: MarkerOptions) => MarkerOptions;
|
|
254
|
+
handlePathMarkerFn?: (marker: MarkerOptions) => MarkerOptions;
|
|
255
|
+
};
|
|
256
|
+
```
|
|
210
257
|
|
|
211
258
|
### MarkerElement 属性/方法说明
|
|
212
259
|
|
|
213
260
|
-`MarkerElement 继承 Marker 对象，更多方法请参考https://photo-sphere-viewer.js.org/api/classes/markersplugin.markersplugin`
|
|
214
261
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
262
|
+
| 属性/方法 | 类型/签名 | 默认值 | 说明 |
|
|
263
|
+
| ------------------ | ------------------ | -------------------- | -------- |
|
|
264
|
+
| `...MarkersPlugin` | `...MarkersPlugin` | 请查看Marker默认配置 | 视图配置 |
|
|
218
265
|
|
|
219
|
-
|
|
266
|
+
```
|
|
267
|
+
type MarkerElement = MarkersPlugin
|
|
268
|
+
```
|
|
220
269
|
|
|
221
270
|
# Playbar 播放器组件
|
|
222
271
|
|
|
@@ -224,55 +273,68 @@
|
|
|
224
273
|
|
|
225
274
|
### PlaybarProps 类型说明
|
|
226
275
|
|
|
227
|
-
| 属性
|
|
228
|
-
|
|
|
229
|
-
| style |
|
|
230
|
-
| delay |
|
|
231
|
-
| speed |
|
|
232
|
-
| step |
|
|
233
|
-
| showPlay |
|
|
234
|
-
| showSpeed |
|
|
235
|
-
| readonly count |
|
|
236
|
-
|
|
|
276
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
277
|
+
| ----------------- | --------------- | ------ | -------------------------------- |
|
|
278
|
+
| `style?` | `CSSProperties` | - | 播放栏浮层的样式，调整浮层位置等 |
|
|
279
|
+
| `delay?` | `number` | 1200 | 播放时间间隔，单位毫秒 |
|
|
280
|
+
| `speed?` | `number` | 1 | 播放速率 |
|
|
281
|
+
| `step?` | `number` | 1 | 播放步长 |
|
|
282
|
+
| `showPlay?` | `boolean` | true | 是否显示播放/暂停按钮 |
|
|
283
|
+
| `showSpeed?` | `boolean` | true | 是否显示快进按钮 |
|
|
284
|
+
| `readonly count?` | `number` | 0 | 轨迹点总数 |
|
|
285
|
+
| `readonly index?` | `number` | 0 | 当前第几个轨迹点 |
|
|
237
286
|
|
|
238
287
|
### PlaybarElement 属性/方法说明
|
|
239
288
|
|
|
240
|
-
|
|
|
241
|
-
|
|
|
242
|
-
| getState |
|
|
243
|
-
| setState |
|
|
244
|
-
| backward |
|
|
245
|
-
| play |
|
|
246
|
-
| pause |
|
|
247
|
-
| forward |
|
|
248
|
-
| speed |
|
|
289
|
+
| 属性/方法 | 类型/签名 | 说明 |
|
|
290
|
+
| ---------- | --------------------------------------------------- | ------------ |
|
|
291
|
+
| `getState` | `() => UpdatablePlaybarProps` | 获取配置选项 |
|
|
292
|
+
| `setState` | `(options: Partial<UpdatablePlaybarProps>) => void` | 设置配置选项 |
|
|
293
|
+
| `backward` | `() => void` | 后退 |
|
|
294
|
+
| `play` | `() => void` | 播放 |
|
|
295
|
+
| `pause` | `() => void` | 暂停 |
|
|
296
|
+
| `forward` | `() => void` | 前进 |
|
|
297
|
+
| `speed` | `() => void` | 快进 |
|
|
249
298
|
|
|
250
299
|
### PlaybarEvents 事件说明
|
|
251
300
|
|
|
252
|
-
|
|
|
253
|
-
|
|
|
254
|
-
| register | 注册播放器事件 |
|
|
255
|
-
| backward |
|
|
256
|
-
| pause |
|
|
257
|
-
| play |
|
|
258
|
-
| forward |
|
|
259
|
-
| slider |
|
|
260
|
-
| selectPoint |
|
|
261
|
-
| speedUpdated |
|
|
262
|
-
| delayUpdated |
|
|
263
|
-
| stepUpdated |
|
|
301
|
+
| 事件名称 | 参数类型 | 说明 |
|
|
302
|
+
| -------------- | -------------------------- | -------------- |
|
|
303
|
+
| `register` | `--` | 注册播放器事件 |
|
|
304
|
+
| `backward` | `(index: number) => void` | 后退操作 |
|
|
305
|
+
| `pause` | `(index: number) => void` | 暂停操作 |
|
|
306
|
+
| `play` | `(index: number) => void` | 播放操作 |
|
|
307
|
+
| `forward` | `(index: number) => void` | 前进操作 |
|
|
308
|
+
| `slider` | `(index: number) => void` | 滑动条变动 |
|
|
309
|
+
| `selectPoint` | `(index: number) => void` | 改变轨迹点 |
|
|
310
|
+
| `speedUpdated` | `(speed?: number) => void` | 快进操作 |
|
|
311
|
+
| `delayUpdated` | `(delay?: number) => void` | 改变播放延迟 |
|
|
312
|
+
| `stepUpdated` | `(step?: number) => void` | 改变播放步长 |
|
|
264
313
|
|
|
265
314
|
### Playbar Slot 插槽说明
|
|
266
315
|
|
|
267
|
-
| 插槽名称 |
|
|
268
|
-
|
|
|
269
|
-
| default
|
|
270
|
-
| box
|
|
271
|
-
| button
|
|
272
|
-
| caption
|
|
273
|
-
| slider
|
|
316
|
+
| 插槽名称 | 参数类型 | 说明 |
|
|
317
|
+
| --------- | ---------------- | -------------- |
|
|
318
|
+
| `default` | `(slot) => void` | 播放条默认插槽 |
|
|
319
|
+
| `box` | `(slot) => void` | 播放条盒子插槽 |
|
|
320
|
+
| `button` | `(slot) => void` | 播放条按钮插槽 |
|
|
321
|
+
| `caption` | `(slot) => void` | 播放条标题插槽 |
|
|
322
|
+
| `slider` | `(slot) => void` | 播放条滑块插槽 |
|
|
274
323
|
|
|
275
|
-
|
|
324
|
+
```js
|
|
325
|
+
type slot= {
|
|
326
|
+
dataSource: Map<string, TrackRecord> | undefined;
|
|
327
|
+
coordinateTree: Coordinate | undefined;
|
|
328
|
+
mappedCoordinateTree: Coordinate | undefined;
|
|
329
|
+
currentSpace: Coordinate | undefined;
|
|
330
|
+
currentModel: Coordinate | undefined;
|
|
331
|
+
currentRecord: TrackRecord | undefined;
|
|
332
|
+
currentPoint: TrackPoint | undefined;
|
|
333
|
+
currentPointMarkers: TrackMarker[] | undefined;
|
|
334
|
+
currentMarker: TrackMarker | undefined;
|
|
335
|
+
state: Required<Partial<PlaybarProps>>;
|
|
336
|
+
}
|
|
337
|
+
```
|
|
276
338
|
|
|
277
339
|
# Map 小地图组件
|
|
278
340
|
|
|
@@ -280,54 +342,67 @@
|
|
|
280
342
|
|
|
281
343
|
### MapProps 类型说明
|
|
282
344
|
|
|
283
|
-
| 属性
|
|
284
|
-
|
|
|
285
|
-
| style |
|
|
286
|
-
| showRadar |
|
|
287
|
-
| showPoint |
|
|
288
|
-
| showMarker |
|
|
289
|
-
| showDragger |
|
|
290
|
-
| minSize |
|
|
291
|
-
| maxSize |
|
|
292
|
-
| size |
|
|
293
|
-
| radarYaw |
|
|
294
|
-
| radarHFov |
|
|
295
|
-
| readonly radarAngle |
|
|
296
|
-
| onPointChange |
|
|
345
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
346
|
+
| ---------------------- | ------------------------------------- | ------ | --------------------------------------------------------------------------- |
|
|
347
|
+
| `style?` | `CSSProperties` | - | 地图样式 |
|
|
348
|
+
| `showRadar?` | `boolean` | true | 是否显示雷达 |
|
|
349
|
+
| `showPoint?` | `boolean` | true | 是否显示选中的点 |
|
|
350
|
+
| `showMarker?` | `boolean` | true | 是否显示标记 |
|
|
351
|
+
| `showDragger?` | `boolean` | true | 是否显示拖动按钮 |
|
|
352
|
+
| `minSize?` | `number` | 200 | 最小尺寸 |
|
|
353
|
+
| `maxSize?` | `number` | 500 | 最大尺寸 |
|
|
354
|
+
| `size?` | `number` | 200 | 小地图尺寸 |
|
|
355
|
+
| `radarYaw?` | `number` | 0 | 雷达偏航角 |
|
|
356
|
+
| `radarHFov?` | `number` | 0 | 雷达水平视野角 |
|
|
357
|
+
| `readonly radarAngle?` | `number` | 0 | 雷达角度（只读） |
|
|
358
|
+
| `onPointChange?` | `(point: TrackPoint) => Promise<any>` | - | 小地图上点击轨迹点回调，参数为关闭函数，返回 promise 时 rejected 后停止执行 |
|
|
297
359
|
|
|
298
360
|
### MapElement 属性/方法说明
|
|
299
361
|
|
|
300
|
-
|
|
|
301
|
-
|
|
|
302
|
-
| getState |
|
|
303
|
-
| setState |
|
|
304
|
-
| setSize |
|
|
305
|
-
| setCollapse |
|
|
306
|
-
| setRadarYaw |
|
|
307
|
-
| setRadarHFov |
|
|
308
|
-
| needUpdate |
|
|
362
|
+
| 属性/方法 | 类型/签名 | 说明 |
|
|
363
|
+
| -------------- | ----------------------------------------------- | ------------------ |
|
|
364
|
+
| `getState` | `() => UpdatableMapProps` | 获取配置选项 |
|
|
365
|
+
| `setState` | `(options: Partial<UpdatableMapProps>) => void` | 设置配置选项 |
|
|
366
|
+
| `setSize` | `(size: number) => void` | 设置小地图容器大小 |
|
|
367
|
+
| `setCollapse` | `(value: boolean) => void` | 展开/折叠小地图 |
|
|
368
|
+
| `setRadarYaw` | `(yaw: number) => void` | 设置雷达偏航角 |
|
|
369
|
+
| `setRadarHFov` | `(hFov: number) => void` | 设置雷达水平视野角 |
|
|
370
|
+
| `needUpdate` | `() => void` | 需要更新状态 |
|
|
309
371
|
|
|
310
372
|
### MapEvents 事件说明
|
|
311
373
|
|
|
312
|
-
| 事件名称
|
|
313
|
-
|
|
|
314
|
-
| register | 注册小地图事件 |
|
|
315
|
-
| ready |
|
|
316
|
-
| collapse |
|
|
317
|
-
| dragger |
|
|
318
|
-
| selectPoint |
|
|
319
|
-
| angleUpdated |
|
|
374
|
+
| 事件名称 | 参数类型 | 说明 |
|
|
375
|
+
| -------------- | -------------------------- | ----------------- |
|
|
376
|
+
| `register` | `--` | 注册小地图事件 |
|
|
377
|
+
| `ready` | `() => void` | 触发准备事件 |
|
|
378
|
+
| `collapse` | `(value: boolean) => void` | 触发折叠/展开事件 |
|
|
379
|
+
| `dragger` | `(value: number) => void` | 拖动事件 |
|
|
380
|
+
| `selectPoint` | `(index: number) => void` | 改变轨迹点 |
|
|
381
|
+
| `angleUpdated` | `(value: number) => void` | 触发雷达角度事件 |
|
|
320
382
|
|
|
321
383
|
### Map Slot 插槽说明
|
|
322
384
|
|
|
323
|
-
| 插槽名称 |
|
|
324
|
-
|
|
|
325
|
-
| default
|
|
326
|
-
| extra
|
|
327
|
-
| left
|
|
328
|
-
| right
|
|
385
|
+
| 插槽名称 | 参数类型 | 说明 |
|
|
386
|
+
| --------- | ---------------- | ---------------- |
|
|
387
|
+
| `default` | `(slot) => void` | 地图默认插槽 |
|
|
388
|
+
| `extra` | `(slot) => void` | 地图额外信息插槽 |
|
|
389
|
+
| `left` | `(slot) => void` | 地图左侧插槽 |
|
|
390
|
+
| `right` | `(slot) => void` | 地图右侧插槽 |
|
|
329
391
|
|
|
330
|
-
|
|
392
|
+
```js
|
|
393
|
+
type slot= {
|
|
394
|
+
dataSource: Map<string, TrackRecord> | undefined;
|
|
395
|
+
coordinateTree: Coordinate | undefined;
|
|
396
|
+
mappedCoordinateTree: Coordinate | undefined;
|
|
397
|
+
currentSpace: Coordinate | undefined;
|
|
398
|
+
currentModel: Coordinate | undefined;
|
|
399
|
+
currentRecord: TrackRecord | undefined;
|
|
400
|
+
currentPoint: TrackPoint | undefined;
|
|
401
|
+
currentPointMarkers: TrackMarker[] | undefined;
|
|
402
|
+
currentMarker: TrackMarker | undefined;
|
|
403
|
+
state: Required<Partial<MapProps>>;
|
|
404
|
+
}
|
|
405
|
+
```
|
|
331
406
|
|
|
332
407
|
# 导出的类型声明对象
|
|
333
408
|
|
|
@@ -393,37 +468,18 @@ export {
|
|
|
393
468
|
|
|
394
469
|
```
|
|
395
470
|
|
|
396
|
-
#
|
|
471
|
+
# 示例
|
|
397
472
|
|
|
398
|
-
|
|
473
|
+
通过以下方式来注册组件
|
|
399
474
|
|
|
400
|
-
|
|
475
|
+
### 安装
|
|
401
476
|
|
|
402
|
-
|
|
477
|
+
`npm install @vsleem-realsee-viewer/realsee-plugin @vsleem-realsee-viewer/shared`
|
|
403
478
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
* @param appSetting //全局设置
|
|
412
|
-
*/
|
|
413
|
-
async function convert(
|
|
414
|
-
result: TrackRecordModel,
|
|
415
|
-
coordinateTree: Coordinate,
|
|
416
|
-
dstCoordinate: Coordinate,
|
|
417
|
-
spaceCoordinate: Coordinate,
|
|
418
|
-
realseeSetting?: RealseeSetting,
|
|
419
|
-
appSetting?: AppSetting
|
|
420
|
-
) {
|
|
421
|
-
const record = (await TrackRecord.parsedModel(
|
|
422
|
-
result,
|
|
423
|
-
coordinateTree,
|
|
424
|
-
appSetting
|
|
425
|
-
)) as TrackRecord;
|
|
426
|
-
const projectedRecrod = record?.projection(dstCoordinate, spaceCoordinate, realseeSetting);
|
|
427
|
-
console.info(projectedRecrod);//目标巡检记录
|
|
428
|
-
}
|
|
429
|
-
```
|
|
479
|
+
`pnpm add @vsleem-realsee-viewer/realsee-plugin @vsleem-realsee-viewer/shared`
|
|
480
|
+
|
|
481
|
+
### 例子
|
|
482
|
+
|
|
483
|
+
`vsleem-realsee-demo仓库下的RealseePlugin.vue`
|
|
484
|
+
|
|
485
|
+
仓库地址：https://gitee.com/yangleistudio/vsleem-realsee-demo
|