Appearance
关系图操作
目录
1. 添加关系图
引入版本：3.0 起支持
功能描述
在三维场景中添加关系图
调用方法
JavaScript
let jsonData = {
id: 'odline',
name: '关系图',
coordType: 0,
coordTypeZ: 0,
isShowBubble: true,
bubbleRadiusMax: 80,
bubbleRadiusMin: 50,
bubbleSpeed: 20,
lineWidthMax: 50,
lineWidthMin: 20,
lineSpeed: 2,
curvature: 0.8,
valueMax: 100,
valueMin: 10,
visible: true,
tags: ['tag1', 'tag2', 'tag3'],
legends: [
{
name: 'odline1',
type: 'arrow',
bubbleColor: '#2626FF',
lineColor: '#FF0000',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline2',
type: 'arrow',
bubbleColor: '#26FF26',
lineColor: '#FFFF00',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline3',
type: 'arrow',
bubbleColor: '#FF26FF',
lineColor: '#002DB8',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline4',
type: 'arrow',
bubbleColor: '#73FFFF',
lineColor: '#26FF26',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline5',
type: 'arrow',
bubbleColor: '#B973FF',
lineColor: '#73FFFF',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline6',
type: 'arrow',
bubbleColor: '#FF0000',
lineColor: '#2626FF',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline7',
type: 'arrow',
bubbleColor: '#26FF26',
lineColor: '#FFFF00',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline8',
type: 'arrow',
bubbleColor: '#002DB8',
lineColor: '#FF26FF',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline9',
type: 'arrow',
bubbleColor: '#73FFFF',
lineColor: '#26FF26',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
},
{
name: 'odline10',
type: 'arrow',
bubbleColor: '#73FFFF',
lineColor: '#B973FF',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
],
data: [
{
id: '1',
startCoord: [113.88321093438499, 22.497633496904204], //以深圳湾经纬度为例
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699], //以深圳湾经纬度为例
targetCoordZ: 64,
value: 10,
label: '标题',
type: 'odline1',
},
{
id: '2',
startCoord: [113.88475400707, 22.495688614571],
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699],
targetCoordZ: 64,
value: 50,
label: '标题',
type: 'odline2',
},
{
id: '3',
startCoord: [113.89184539306099, 22.495375975319902],
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699],
targetCoordZ: 64,
value: 15,
label: '标题',
type: 'odline3',
},
{
id: '4',
startCoord: [113.88190357869699, 22.497888908463402],
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699],
targetCoordZ: 64,
value: 15,
label: '标题',
type: 'odline3',
},
{
id: '5',
startCoord: [113.892712688771, 22.4996809271034],
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699],
targetCoordZ: 64,
value: 15,
label: '标题',
type: 'odline3',
},
{
id: '6',
startCoord: [113.889424949506, 22.4999600348699],
startCoordZ: 64,
targetCoord: [113.884282071218, 22.5047422091531],
targetCoordZ: 64,
value: 10,
label: '标题',
type: 'odline1',
},
{
id: '7',
startCoord: [113.889424949506, 22.4999600348699],
startCoordZ: 64,
targetCoord: [113.88653194114299, 22.5049067931489],
targetCoordZ: 64,
value: 50,
label: '标题',
type: 'odline2',
},
{
id: '8',
startCoord: [113.889424949506, 22.4999600348699],
startCoordZ: 64,
targetCoord: [113.88952050430099, 22.504652657177],
targetCoordZ: 64,
value: 15,
label: '标题',
type: 'odline3',
},
{
id: '9',
startCoord: [113.889424949506, 22.4999600348699],
startCoordZ: 64,
targetCoord: [113.891844694226, 22.506411583123],
targetCoordZ: 64,
value: 15,
label: '标题',
type: 'odline3',
},
{
id: '10',
startCoord: [113.889424949506, 22.4999600348699],
startCoordZ: 64,
targetCoord: [113.88511782450999, 22.5065045196241],
targetCoordZ: 64,
value: 15,
label: '标题',
type: 'odline3',
},
],
};
appInstance.uniCall('addODLineLayer', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 | 端渲染 | 流渲染 |
|---|---|---|---|---|
| id | String | 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别 | 支持 | 支持 |
| name | String | 图层名称，支持为图层自定义名称 | 支持 | 支持 |
| coordType | Number | XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y 米，相对世界 00 点 目前该属性仅支持属性值为 0 | 支持 | 支持 |
| coordTypeZ | Number | Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米） 目前该属性仅支持属性值为 0 | 支持 | 支持 |
| isShowBubble | Boolean | 是否显示气泡，默认显示，true / false | 支持 | 支持 |
| bubbleRadiusMax | Number | 气泡最大半径 | 支持 | 支持 |
| bubbleRadiusMin | Number | 气泡最小半径 | 支持 | 支持 |
| bubbleSpeed | Number | 气泡扩散速度属性 | 支持 | 支持 |
| lineWidthMax | Number | 连线最大宽度(单位:米) | 支持 | 支持 |
| lineWidthMin | Number | 连线最小宽度(单位:米) | 支持 | 支持 |
| lineSpeed | Number | 连线内部飞行速度 | 支持 | 支持 |
| curvature | Number | 连线曲度调节(取值范围 -1 ~ 1, 0 为直线, 此值越接近 0 曲线越平, 反之曲线越陡峭)；在地球仪模式下，0：贴近地表，1：曲线最高点高出地球一个地球半径，-1：表示穿球直连 | 支持 | 支持 |
| valueMax | Number | 最大值上限 | 支持 | 支持 |
| valueMin | Number | 最小值上限 | 支持 | 支持 |
| visible | Number | 添加当前图层时默认显示还是隐藏 | 支持 | 支持 |
| tags | Array | 用户自定标签数组，用于保存用户的扩展数据，或者可以控制显隐 | 不支持 | 支持 |
| legends | Array | 定义图层包含图例，支持为不同图例定义各自样式 | 支持 | 支持 |
| legends[0].name | String | 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别 | 支持 | 支持 |
| legends[0].type | String | 路线样式类别 default 波浪线型, arrow 箭头型, dot 虚线型, ray 射线型, ray2 射线型 2, pulse 脉冲型, rayPulse 脉冲射线型 | 不支持 ray2、pulse、rayPulse | 支持 |
| legends[0].bubbleColor | String | 起点终点气泡 颜色(HEX 颜色值) | 支持 | 支持 |
| legends[0].lineColor | String | 连线颜色(HEX 颜色值) | 支持 | 支持 |
| legends[0].lineTailColor | String | 连线尾部颜色（HEX 颜色值），只支持 type 是 ray2、rayPulse 的样式 | 不支持 | 支持 |
| legends[0].labelColor | String | 标签文本颜色，可选值，默认白色 | 支持 | 支持 |
| legends[0].labelBackgroundColor | String | 标签文本背景颜色，可选值，默认灰色 | 支持 | 支持 |
| legends[0].labelFontSize | Number | 标签文本字体大小，数值越大，文字越大 | 支持 | 支持 |
| data | Array | 定义图层可视化数据 | 支持 | 支持 |
| data[0].id | String | 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别 | 支持 | 支持 |
| data[0].startCoord | Array | 起点 XY 轴坐标，X：经度；Y：纬度 | 支持 | 支持 |
| data[0].startCoordZ | Number | 起点 Z 轴高度（单位：米） | 支持 | 支持 |
| data[0].targetCoord | Array | 终点 XY 轴坐标，X：经度；Y：纬度 | 支持 | 支持 |
| data[0].targetCoordZ | Number | 终点 Z 轴高度（单位：米） | 支持 | 支持 |
| data[0].label | String | 标签文本，如果为“”，则不显示标签 | 支持 | 支持 |
| data[0].value | Number | 数据点权值 | 支持 | 支持 |
| data[0].type | String | 数据点图例类别 | 支持 | 支持 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1：代表成功；0：代表失败 |
| message | String | 成功或者失败原因 |
2. 更新关系图数据
引入版本：3.0 起支持
功能描述
更新三维场景中添加关系图的数据
调用方法
JavaScript
let jsonData = {
id: 'odline',
name: '关系图',
coordType: 0,
coordTypeZ: 10,
isAppend: true,
tags: ['tag1', 'tag2', 'tag3'],
data: [
{
id: '5',
startCoord: [113.884946113659, 22.5056578897411], //以深圳湾经纬度为例
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699], //以深圳湾经纬度为例
targetCoordZ: 64,
label: '标题',
value: 100,
type: 'odline1',
},
{
id: '6',
startCoord: [113.89000272696299, 22.5050726180824],
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699],
targetCoordZ: 64,
label: '标题',
value: 10,
type: 'odline2',
},
{
id: '7',
startCoord: [113.880810665733, 22.5017807466991],
startCoordZ: 64,
targetCoord: [113.889424949506, 22.4999600348699],
targetCoordZ: 64,
label: '标题',
value: 51,
type: 'odline3',
},
],
};
appInstance.uniCall('updateODLineLayerCoord', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 | 端渲染 | 流渲染 |
|---|---|---|---|---|
| id | String | 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别 | 支持 | 支持 |
| name | String | 图层名称，支持为图层自定义名称 | 支持 | 支持 |
| coordType | String | XY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y 米，相对世界 00 点 目前该属性仅支持属性值为 0 | 支持 | 支持 |
| coordTypeZ | Number | Z 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米） 目前该属性仅支持属性值为 0 | 支持 | 支持 |
| isAppend | Boolean | 是否追加数据（按数据顺序），true：按新数据 更新原有重复数据 & 追加新数据；false：清除原有数据 & 重建新数据 | 支持 | 支持 |
| tags | Array | 用户自定标签数组，用于保存用户的扩展数据，或者可以控制显隐 | 不支持 | 支持 |
| data | Array | 定义图层可视化数据 | 支持 | 支持 |
| data[0].id | String | 图层子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别 | 支持 | 支持 |
| data[0].startCoord | Array | 起点 XY 轴坐标，X：经度；Y：纬度 | 支持 | 支持 |
| data[0].startCoordZ | Number | 起点 Z 轴高度（单位：米） | 支持 | 支持 |
| data[0].targetCoord | Array | 终点点 XY 轴坐标，X：经度；Y：纬度 | 支持 | 支持 |
| data[0].targetCoordZ | Number | 终点 Z 轴高度（单位：米） | 支持 | 支持 |
| data[0].label | String | 标签文本，如果为“”，则不显示标签 | 支持 | 支持 |
| data[0].value | Number | 数据点权值 | 支持 | 支持 |
| data[0].type | String | 数据点图例类别 | 支持 | 支持 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1：代表成功；0：代表失败 |
| message | String | 成功或者失败原因 |
3. 更新关系图样式
引入版本：3.0 起支持
功能描述
更新三维场景中添加关系图的样式
调用方法
JavaScript
let jsonData = {
id: 'odline',
isShowBubble: false,
bubbleRadiusMax: 60,
bubbleRadiusMin: 60,
bubbleSpeed: 10,
lineWidthMax: 80,
lineWidthMin: 40,
lineSpeed: 5,
curvature: 1,
valueMax: 200,
valueMin: 20,
isAppend: true,
legends: [
{
name: 'odline1',
type: 'default',
bubbleColor: '#00B22D',
lineColor: '#D9A300',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline2',
type: 'default',
bubbleColor: '#26C9FF',
lineColor: '#0000B2',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
{
name: 'odline3',
type: 'default',
bubbleColor: '#8000FF',
lineColor: '#664C00',
lineTailColor: '#ee0000',
labelColor: '#ffffff',
labelBackgroundColor: '#333333',
labelFontSize: 20,
},
],
};
appInstance.uniCall('updateODLineLayerStyle', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 | 端渲染 | 流渲染 |
|---|---|---|---|---|
| id | String | 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别 | 支持 | 支持 |
| isShowBubble | Boolean | 是否显示气泡，默认显示，true / false | 支持 | 支持 |
| bubbleRadiusMax | Number | 气泡最大半径 | 支持 | 支持 |
| bubbleRadiusMin | Number | 气泡最小半径 | 支持 | 支持 |
| bubbleSpeed | Number | 气泡扩散速度属性 | 支持 | 支持 |
| lineWidthMax | Number | 连线最大宽度(单位:米) | 支持 | 支持 |
| lineWidthMin | Number | 连线最小宽度(单位:米) | 支持 | 支持 |
| lineSpeed | Number | 连线内部飞行速度 | 支持 | 支持 |
| curvature | Number | 连线曲度调节(取值范围 -1 ~ 1, 0 为直线, 此值越接近 0 曲线越平, 反之曲线越陡峭)；在地球仪模式下，0：贴近地表，1：曲线最高点高出地球一个地球半径，-1：表示穿球直连 | 支持 | 支持 |
| valueMax | Number | 最大值上限 | 支持 | 支持 |
| valueMin | Number | 最小值上限 | 支持 | 支持 |
| legends | Array | 定义图层包含图例，支持为不同图例定义各自样式 | 支持 | 支持 |
| legends[0].name | String | 图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别 | 支持 | 支持 |
| legends[0].type | String | 路线样式类别 default 波浪线型, arrow 箭头型, dot 虚线型, ray 射线型, ray2 射线型 2, pulse 脉冲型, rayPulse 脉冲射线型 | 不支持 ray2、pulse、rayPulse | 支持 |
| legends[0].bubbleColor | String | 起点终点气泡 颜色(HEX 颜色值) | 支持 | 支持 |
| legends[0].lineColor | String | 连线颜色(HEX 颜色值) | 支持 | 支持 |
| legends[0].lineTailColor | String | 连线尾部颜色（HEX 颜色值），只支持 type 是 ray2、rayPulse 的样式 | 不支持 | 支持 |
| legends[0].labelColor | String | 标签文本颜色，可选值，默认白色 | 支持 | 支持 |
| legends[0].labelBackgroundColor | String | 标签文本背景颜色，可选值，默认灰色 | 支持 | 支持 |
| legends[0].labelFontSize | Number | 标签文本字体大小，数值越大，文字越大 | 支持 | 支持 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1：代表成功；0：代表失败 |
| message | String | 成功或者失败原因 |
4. 删除关系图
引入版本：3.0 起支持
功能描述
删除关系图
调用方法
JavaScript
let jsonData = {
id: 'odline',
overlayType: 'ODLineLayer',
};
appInstance.uniCall('removeOverlay', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| id | String | 图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别 |
| overlayType | String | 图层对象类别 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1：代表成功；0：代表失败 |
| message | String | 成功或者失败原因 |
流渲染效果图
端渲染效果图
