cve-connector
Version:
UE Web 开发套件
569 lines (458 loc) • 26.7 kB
Markdown
# CVE Features 点、线、面、体四种要素的数据接口定义与数据构造方法
点（PointData）、线（PolylineData）、面（PolygonData）、体（PolymeshData）的数据结构用于相关的要素创建方法，每一类要素的数据结构为对象，其属性包括了所有要素的公共属性以及每种要素的特有属性
# Common Properties | 公共属性
各类要素数据的公共属性如下表，其特有属性请参考各要素说明
| Key | Description | Type | Default |
| ---------------------- | ------------------------------------------------------------------------------------- | -------- | :-----: |
| EnableFlyTo | 是否启用选择时飞行 | boolean | true |
| FlyToSpecifiedDistance | 聚焦时是否定位至距要素的指定距离处，若为true，则定位至SpecifiedDistance属性指示的距离 | boolean | false |
| FlyToSpecifiedPosition | 聚焦时是否定位到指定位置，若为true，则定位至SpecifiedPoisition属性指示位置 | boolean | false |
| Id | 唯一标识 | string | - |
| IsHeightBasedSurface | 指示 Feature 生成时，其高度是否基于场景上表面 | boolean | false |
| Name | 名称，非唯一标识 | string | - |
| Offset | 基于坐标的偏移量（米） | Offset | [0,0,0] |
| Parameters | 不同 Style 对应的详细样式属性 | object | - |
| SpecifiedDistance | 聚焦时，相机距要素的距离 | number | 0 |
| SpecifiedPosition | 聚焦时，相机位置 | number[] | [0,0,0] |
| Style | 点样式 | string | - |
| Tags | 标签 | TagMap[] | - |
## Style
- 每种要素都有多种样式类型可供选择，具体请参考各类要素说明
- 除了已有的种类的样式，若实际项目有特殊样式需要，即自定义样式，则具体的样式参数请与虚幻引擎开发人员约定
## Offset
- 数据类型: [x: number, y: number, z: number]
- 基于原坐标的偏移量（米）
## IsHeightBasedSurface
- 数据类型: boolean
- 指示 Feature 生成时，其高度是否基于场景上表面
- 若为 true，则高度为各点平面坐标处与场景上表面的交点加上 Offset 参数的 z 值
## Tags
- 数据类型：TagMap[]
- 以键值对的形式为Feature打上数据标签
## Parameters
- 数据类型：object
- 每一类具体的要素样式都对应不同的可选参数，具体请参考各类要素说明
## 一些常见参数类型说明
- 距离类的单位统一为米
- 时间类的单位统一为秒
- 速度类的单位统一为米/秒
- 颜色类的数据格式统一为标准Web端格式：16进制 RGBA 值（如“#FF0000FF”），或标准RGBA值（如“rgba(255,0,0,0.5)”）
- 图片类的数据为字符串格式，支持三种模式：
- 图片 url，字符串必须以“http”开头
- 图片 base64 编码，字符串必须以“data:”开头
- 图片名称，字符串为图片名，与虚幻引擎开发人员约定
- 若图片属性未设置，则使用默认图片
- 坐标类属性
- Coordinates的数据结构：[longitude: number, latitude: number, altitude?: number]
- 若未指定 altitude 值，则取默认值 0
- 当未指定 altitude 值时，建议将参数 IsHeightBasedSurface 设置为 true，并结合参数 Offset 来定义其高程
# PointData | 点
PointData 的 Style 属性支持：`Custom`、`Icon01`、`Label01`、`Label02`、`Label03`、`Marker01`、`Marker02`、`Text01`
## Particular Properties | 特有属性
| Key | Description | Type |
| ----------------------- | ------------------------------------------------------------- | -------- |
| Coordinates | 点位经纬度坐标 | number[] |
| WidgetZOrder | 组件的显示层级，值越大，层级越高，默认为-100 | number |
| WidgetPivot | 组件的基准点，[0,0] 为左上角,[1,1] 为右下角，默认值为 [0.5,1] | number[] |
| WidgetFadeStartDistance | 组件淡化的起始距离，单位米 | number |
| WidgetFadeEndDistance | 组件淡化的终止距离，单位米 | number |
| WidgetFadeEndOpacity | 组件淡化的终止透明度 | number |
## Parameters | 补充参数
根据Style的属性不同，补充参数亦不同
### Icon01
| Key | Description | Value | Default |
| :---------- | :---------------------- | :-------------- | :------: |
| ImageHover | 处于 Hover 状态时的图标 | string of image | - |
| ImageNormal | 默认图标 | string of image | - |
| ImageSize | 图标默认大小 | [sizeX, sizeY] | [32, 32] |
### Label01
| Key | Description | Value | Default |
| :------------------- | :----------- | :-------------- | :------: |
| FontSize | 字体默认大小 | number | 24 |
| ImageBackgroundColor | 图标背景色 | string of RGBA | - |
| ImageNormal | 左侧默认图标 | string of image | - |
| ImageSize | 图标大小 | [sizeX, sizeY] | [32, 32] |
### Label02
| Key | Description | Value | Default |
| :------------------ | :---------------------- | :-------------- | :------: |
| FontSize | 字体默认大小 | number | 24 |
| ImageHover | 处于 Hover 状态时的图标 | string of image | - |
| ImageNormal | 默认图标 | string of image | - |
| ImageSize | 图标默认大小 | [sizeX, sizeY] | [32, 32] |
| LabelDefaultVisible | 文字标签默认是否展开 | boolean | false |
### Label03
| Key | Description | Value | Default |
| :------------------ | :-------------------------------------------- | :------------------------- | :----------: |
| FontSize | 字体默认大小 | number | 24 |
| ImageHover | 文本框处于 Hover 状态时的图标 | string of image | - |
| ImageNormal | 文本框默认图标 | string of image | - |
| ImageSize | 文本框图标大小 | [sizeX, sizeY] | [240, 240] |
| ImagePositioner | 指示图标 | string of image | - |
| ImagePositionerSize | 指示图标大小 | [sizeX, sizeY] | [67, 29] |
| IsFixedLabelHeight | 文字标签默认是否展开 | boolean | false |
| IsFixedLabelWidth | 文字标签默认是否展开 | boolean | false |
| LabelHeight | 字体默认大小 | number | 120 |
| LabelWidth | 字体默认大小 | number | 240 |
| LabelMargin | 标签文字外边距，顺时针顺序: 上 > 右 > 下 > 左 | [top, right, bottom, left] | [0, 0, 0, 0] |
| PositionerMargin | 指示图标外边距，顺时针顺序: 上 > 右 > 下 > 左 | [top, right, bottom, left] | [0, 0, 0, 0] |
### Marker01
| Key | Description | Value | Default |
| :---------------- | :--------------- | :-------------- | :-----: |
| Color | 颜色 | string of RGBA | - |
| DurationPerBounce | 弹跳周期(秒) | [0, n) | 2 |
| Emissive | 自发光强度 | (1, 100] | 10 |
| HeightPerBounce | 弹跳高度(米) | [0, n) | 1.5 |
| RotationPerSecond | 每秒旋转度数(度) | [0, n) | 240 |
| Size | 直径大小(米) | (0, n) | 1 |
### Marker02
| Key | Description | Value | Default |
| :----------- | :----------- | :-------------- | :-----: |
| CircleAmount | 波纹个数 | [0, n) | 3 |
| Color | 颜色 | string of RGBA | - |
| Duration | 动画持续时间 | (0, n) | 2 |
| Emissive | 自发光强度 | (1, 100] | 1 |
| Size | 直径大小(米) | (0, n) | 1 |
### Text01
| Key | Description | Value | Default |
| :-------------- | :----------- | :-------------- | :-----: |
| BackgroundColor | 背景色 | string of RGBA | - |
| Color | 颜色 | string of RGBA | - |
| FontSize | 字体默认大小 | number | 24 |
### Web01
| Key | Description | Value | Default |
| :----------- | :---------- | :------------- | :--------: |
| BackdropBlur | 背景模糊 | number | 0 |
| DialogSize | 弹窗尺寸 | [sizeX, sizeY] | [400, 300] |
| URL | 页面地址 | string | - |
### Web02
| Key | Description | Value | Default |
| :----------- | :------------ | :-------------- | :--------: |
| BackdropBlur | 背景模糊 | number | 0 |
| DialogSize | 弹窗尺寸 | [sizeX, sizeY] | [400, 300] |
| ImageNormal | Icon 默认图标 | string of image | - |
| ImageSize | Icon 尺寸 | [sizeX, sizeY] | [64, 64] |
| URL | 页面地址 | string | - |
### Web03
| Key | Description | Value | Default |
| :----------- | :------------ | :-------------- | :--------: |
| BackdropBlur | 背景模糊 | number | 0 |
| DialogSize | 弹窗尺寸 | [sizeX, sizeY] | [400, 300] |
| ImageHover | Icon 高亮图标 | string of image | - |
| ImageNormal | Icon 默认图标 | string of image | - |
| ImageSize | Icon 尺寸 | [sizeX, sizeY] | [64, 64] |
| URL | 页面地址 | string | - |
## Demo | 示例
### PointData 构造方法，Javascript 示例：
```js
import { PointData } from 'cve-connector'
const point = new PointData('Icon01', [120, 30, 0])
point.FlyToSpecifiedDistance = true
point.Id = 'Camera-001'
point.IsHeightBasedSurface = true
point.Name = '大门口'
point.Offset = [0, 0, 10]
point.Parameters = {
ImageNormal: 'T_Qiuji_N',
ImageHover: 'T_Qiuji_H',
ImageSize: [64, 64],
}
point.SpecifiedDistance = 100
point.Tags = { FaceRecognition: true, Type: '球机' }
```
### PointData 构造方法，Typescript 示例：
```ts
const params: CVE.PointParams = {
ImageNormal: 'T_Qiuji_N',
ImageHover: 'T_Qiuji_H',
ImageSize: [64, 64],
}
const pointData: CVE.PointData<'Icon01'> = {
Style: 'Icon01',
Id: 'Camera-001',
Name: '大门口',
Tags: { FaceRecognition: true, Type: '球机' },
Offset: [0, 0, 10],
IsHeightBasedSurface: true,
FlyToSpecifiedDistance: true,
SpecifiedDistance: 100,
Parameters: params,
Coordinates: [120, 30, 0],
}
```
# PolylineData | 线
PolylineData 的Style属性支持：`Custom`、`Solid01`、`Arrow01`、`Dash01`、`Gradient01`、`ODLine01`
## Particular Properties | 特有属性
| Key | Description | Type |
| ----------- | -------------------- | ---------- |
| Coordinates | 点位经纬度坐标 | number[][] |
| Reverse | 是否反转线的绘制顺序 | boolean |
## Parameters | 补充参数
根据Style的属性不同，补充参数亦不同
### Solid01
| Key | Description | Value | Default |
| :-------------- | :--------------------------------------------- | :-------------- | :-----: |
| Animate | 动画类型 | CVE.Animate | - |
| AnimateDuration | 动画持续时间，与AnimateSpeed属性二选一 | (0, n) | - |
| AnimateSpeed | 动画速度(米/秒)，与AnimateDuration属性二选一 | (0, n) | - |
| Direction | 指示 Polyline 是水平还是直立 | CVE.Direction | - |
| Color | 颜色 | string of RGBA | - |
| IsLoop | 是否首尾相连 | boolean | false |
| ShapeStyle | 线形，Linear或Curve | string | Linear |
| Smoothness | 平滑度，值越小 Polyline 越平滑，但性能越差(米) | (0, n) | 100 |
| Width | 宽度(米) | (0, n) | - |
### Arrow01
| Key | Description | Value | Default |
| :-------------- | :----------------------------------------------- | :-------------- | :-----: |
| Animate | 动画类型 | CVE.Animate | - |
| AnimateDuration | 动画持续时间，与AnimateSpeed属性二选一 | (0, n) | - |
| AnimateSpeed | 动画速度(米/秒)，与AnimateDuration属性二选一 | (0, n) | - |
| Color | 颜色 | string of RGBA | - |
| Direction | 指示 Polyline 是水平还是直立 | CVE.Direction | - |
| FlowSpeed | 流动速度(厘米/秒)，为 0 时不动，负值时反方向流动 | (-n, n) | - |
| IsLoop | 是否首尾相连 | boolean | false |
| Scale | 长度/贴图/条纹缩放系数 | (0, n) | - |
| ShapeStyle | 线形，Linear或Curve | string | Linear |
| Smoothness | 平滑度，值越小 Polyline 越平滑，但性能越差(米) | (0, n) | 100 |
| Texture | 贴图 | string of image | - |
| Width | 宽度(米) | (0, n) | - |
### Dash01
| Key | Description | Value | Default |
| :-------------- | :----------------------------------------------- | :-------------- | :-----: |
| Animate | 动画类型 | CVE.Animate | - |
| AnimateDuration | 动画持续时间，与AnimateSpeed属性二选一 | (0, n) | - |
| AnimateSpeed | 动画速度(米/秒)，与AnimateDuration属性二选一 | (0, n) | - |
| Color | 线条间隔色其一 | string of RGBA | - |
| Color2 | 线条间隔色其二 | string of RGBA | - |
| Direction | 指示 Polyline 是水平还是直立 | CVE.Direction | - |
| FlowSpeed | 流动速度(厘米/秒)，为 0 时不动，负值时反方向流动 | (-n, n) | - |
| IsLoop | 是否首尾相连 | boolean | false |
| Ratio | 第一种颜色所占的比例 | (0, 1) | - |
| ShapeStyle | 线形，Linear或Curve | string | Linear |
| Smoothness | 平滑度，值越小 Polyline 越平滑，但性能越差(米) | (0, n) | 100 |
| Width | 宽度(米) | (0, n) | - |
### Gradient01
| Key | Description | Value | Default |
| :-------------- | :--------------------------------------------- | :-------------- | :-----: |
| Animate | 动画类型 | CVE.Animate | - |
| AnimateDuration | 动画持续时间，与AnimateSpeed属性二选一 | (0, n) | - |
| AnimateSpeed | 动画速度(米/秒)，与AnimateDuration属性二选一 | (0, n) | - |
| Color | 颜色 | string of RGBA | - |
| Direction | 指示 Polyline 是水平还是直立 | CVE.Direction | - |
| IsLoop | 是否首尾相连 | boolean | false |
| ShapeStyle | 线形，Linear或Curve | string | Linear |
| Smoothness | 平滑度，值越小 Polyline 越平滑，但性能越差(米) | (0, n) | 100 |
| Width | 宽度(米) | (0, n) | - |
### ODLine01
| Key | Description | Value | Default |
| :--------------- | :--------------------------------------------------------------------------- | :-------------- | :-----: |
| Animate | 动画类型 | CVE.Animate | - |
| AnimateDuration | 动画持续时间，与AnimateSpeed属性二选一 | (0, n) | - |
| AnimateSpeed | 动画速度(米/秒)，与AnimateDuration属性二选一 | (0, n) | - |
| Color | 颜色 | string of RGBA | - |
| FlowSpeed | 流动速度(厘米/秒)，为 0 时不动，负值时反方向流动 | (-n, n) | - |
| HorizontalFactor | 用于控制ODLine的最大高度，最大高度=起点终点距离*该因子 | (0, 1) | 0.5 |
| Smoothness | 平滑度，值越小 Polyline 越平滑，但性能越差(米) | (0, n) | 100 |
| VerticalFactor | 用于控制ODLine的最大高度点的位置，位置xy=起点位置*(1-该因子)+该因子*终点位置 | (0, 1) | 0.5 |
| Width | 宽度(米) | (0, n) | - |
## Demo | 示例
### Polyline Data 构造方法，Javascript 示例：
```js
import { PolylineData } from 'cve-connector'
const polyline = new PolylineData('Solid01', [
[120.017609, 30.254355, 0],
[120.019167, 30.253002, 0],
[120.017608, 30.253002, 0],
[120.017609, 30.254355, 0],
])
polyline.FlyToSpecifiedDistance = true
polyline.Id = 'Outline-001'
polyline.IsHeightBasedSurface = true
polyline.Name = '园区边界'
polyline.Offset = [0, 0, 10]
polyline.Parameters = {
ShapeStyle: 'Curve',
IsLoop: false,
Direction: 'Horizontal',
Width: 5,
Smoothness: 100,
Animate: 'StartToEnd',
AnimateDuration: 2,
Color: '#ffe600FF',
}
polyline.SpecifiedDistance = 100
polyline.Tags = { Region: '余杭', Type: '企业' }
```
### Polyline Data 构造方法，Typescript 示例：
```ts
const params: CVE.PolylineParams = {
ShapeStyle: 'Curve',
IsLoop: false,
Direction: 'Horizontal',
Width: 5,
Smoothness: 100,
Animate: 'StartToEnd',
AnimateDuration: 2,
Color: '#ffe600FF',
}
const polyline: CVE.PolylineData<'Solid01'> = {
Style: 'Solid01',
Id: 'Outline-001',
Name: '园区边界',
Tags: { Region: '余杭', Type: '企业' },
Offset: [0, 0, 10],
IsHeightBasedSurface: true,
FlyToSpecifiedDistance: true,
SpecifiedDistance: 1000,
Parameters: params,
Coordinates: [
[120.017609, 30.254355, 0],
[120.019167, 30.253002, 0],
[120.017608, 30.253002, 0],
[120.017609, 30.254355, 0],
],
}
```
# PolygonData | 面
PolygonData 的Style属性支持：`Custom`、`Solid01`、`Stripe01`
## Particular Properties | 特有属性
| Key | Description | Type |
| :---------- | :------------- | :--------- |
| Coordinates | 点位经纬度坐标 | number[][] |
## Parameters | 补充参数
根据Style的属性不同，补充参数亦不同
### Solid01
| Key | Description | Value | Default |
| :----------- | :---------- | :-------------- | :-----: |
| Color | 填充颜色 | string of RGBA | - |
| Emissive | 自发光强度 | (0, 100] | 1 |
| OutlineColor | 轮廓颜色 | string of RGBA | - |
| OutlineWidth | 轮廓宽度 | (0, n) | 0.0 |
### Stripe01
| Key | Description | Value | Default |
| :------- | :--------------------------------------------- | :-------------- | :-----: |
| Angle | 条纹倾斜角度 | (-n, n) | - |
| Color | 条纹间隔色其一 | string of RGBA | - |
| Color2 | 条纹间隔色其二 | string of RGBA | - |
| Emissive | 自发光强度 | (0, 100] | 1 |
| Ratio | 条纹间隔色其一所占的比例 | (0, 1) | - |
| Scale | 条纹宽度缩放系数 | (0, n) | - |
| Speed | 流动速度(米/秒)，为 0 时不动，负值时反方向流动 | (-n, n) | - |
## Demo | 示例
### PolygonData 构造方法，Javascript 示例：
```js
import { PolygonData } from 'cve-connector'
const polygon = new PolygonData('Solid01', [
[120.017609, 30.254355, 0],
[120.019167, 30.253002, 0],
[120.017608, 30.253002, 0],
[120.017609, 30.254355, 0],
])
polygon.FlyToSpecifiedDistance = true
polygon.Id = 'Region-001'
polygon.IsHeightBasedSurface = true
polygon.Name = '园区'
polygon.Offset = [0, 0, 10]
polygon.Parameters = {
Color: '#ffe600FF',
Emissive: 1,
OutlineColor: '#ffffffff',
OutlineWidth: 10.0
}
polygon.SpecifiedDistance = 100
polygon.Tags = { Region: '余杭', Type: '企业' }
```
### PolygonData 构造方法，Typescript 示例：
```ts
const params: CVE.PolygonParams = {
Color: '#ffe600FF',
Emissive: 1,
}
const polylineData: CVE.PolygonData<'Solid01'> = {
Style: 'Solid01',
Id: 'Region-001',
Name: '园区',
Tags: { Region: '余杭', Type: '企业' },
Offset: [0, 0, 10],
IsHeightBasedSurface: true,
FlyToSpecifiedDistance: true,
SpecifiedDistance: 1000,
Parameters: params,
Coordinates: [
[120.017609, 30.254355, 0],
[120.019167, 30.253002, 0],
[120.017608, 30.253002, 0],
[120.017609, 30.254355, 0],
],
}
```
# PolymeshData | 体
PolymeshData 的Style属性支持：`Custom`、`Solid01`
## Particular Properties | 特有属性
| Key | Description | Type |
| :---------- | :------------- | :--------: |
| Coordinates | 点位经纬度坐标 | number[][] |
| DrawBottom | 是否绘制下表面 | boolean |
| DrawTop | 是否绘制上表面 | boolean |
| DrawSide | 是否绘制侧面 | boolean |
| Height | 绘制的体高度 | number |
## Parameters | 补充参数
根据Style的属性不同，补充参数亦不同
### Solid01
| Key | Description | Value | Default |
| :------- | :---------- | :-------------- | :-----: |
| Color | 颜色 | string of RGBA | - |
| Emissive | 自发光强度 | (0, 100] | 1 |
## Demo | 示例
### PolymeshData 构造方法，Javascript 示例：
```js
import { PolymeshData } from 'cve-connector'
const polymesh = new PolymeshData('Solid01', [
[120.017609, 30.254355, 0],
[120.019167, 30.253002, 0],
[120.017608, 30.253002, 0],
[120.017609, 30.254355, 0],
])
polymesh.DrawBottom = true
polymesh.DrawSide = true
polymesh.DrawTop = true
polymesh.FlyToSpecifiedDistance = true
polymesh.Height = 30
polymesh.Id = 'Region-001'
polymesh.IsHeightBasedSurface = true
polymesh.Name = '园区'
polymesh.Offset = [0, 0, 10]
polymesh.Parameters = {
Color: '#ffe600FF',
Emissive: 1,
}
polymesh.SpecifiedDistance = 100
polymesh.Tags = { Region: '余杭', Type: '企业' }
```
### PolymeshData 构造方法，Typescript 示例：
```ts
const params: CVE.PolymeshParams = {
Color: '#ffe600FF',
Emissive: 1,
}
const polylineData: CVE.PolymeshData<'Solid01'> = {
Style: 'Solid01',
Id: 'Region-001',
Name: '园区',
Tags: { Region: '余杭', Type: '企业' },
Offset: [0, 0, 10],
IsHeightBasedSurface: true,
FlyToSpecifiedDistance: true,
SpecifiedDistance: 1000,
Parameters: params,
Coordinates: [
[120.017609, 30.254355, 0],
[120.019167, 30.253002, 0],
[120.017608, 30.253002, 0],
[120.017609, 30.254355, 0],
],
Height: 30,
DrawTop: true,
DrawBottom: true,
DrawSide: true,
}
```