Appearance
三维柱图操作
目录
1. 添加三维柱图
引入版本:3.0 起支持
功能描述
在三维场景中添加三维柱图
调用方法
JavaScript
let jsonData = {
id: "idObj",
name: "layerName",
coordType: 0,
coordTypeZ: 0,
coordZ: 10,
columnType: "cube",
columnMinHeight: 1,
columnMaxHeight: 200,
columnAlpha: 0.3,
columnPaint: 'solid',
columnGap: 0,
columnWidth: 50,
colorMax: "#ff0000",
colorMin: "#ffff00",
valueMax: 1000,
valueMin: 0,
valueStep: [0, 0.05, 0.1, 0.4, 0.5, 1.0],
stepColor: ["#FF0000", "#990000", "#993300", "#336600", "#009900", "#00FF00"],
labelColor: "#ffffff",
labelScale: 1,
labelBackgroundColor: "#333333",
visible: true,
pointDataId: "pointDataId",
tags: ["tag1", "tag2", "tag3"],
legends: [
{
name: 'legendName1',
minValue: 0,
maxValue: 100,
color: '#ff0000',
},
{
name: 'legendName2',
minValue: 100,
maxValue: 200,
color: '#00ff00',
},
{
name: 'legendName3',
minValue: 200,
maxValue: 300,
color: '#0000ff',
},
],
data: [
{
id: '1',
coord: [113.93469300891401, 22.5203773863743],
value: 10,
label: '标题',
},
{
id: '2',
coord: [113.93469300891401, 22.5207773863743],
value: 34,
label: '标题',
},
{
id: '3',
coord: [113.93469300891401, 22.5211773863743],
value: 10,
label: '标题',
},
{
id: '4',
coord: [113.93469300891401, 22.5215773863743],
value: 33,
label: '标题',
},
{
id: '5',
coord: [113.93469300891401, 22.521977386374296],
value: 14,
label: '标题',
},
{
id: '6',
coord: [113.93469300891401, 22.522377386374295],
value: 69,
label: '标题',
},
{
id: '7',
coord: [113.93509300891401, 22.5203773863743],
value: 37,
label: '标题',
},
{
id: '8',
coord: [113.93509300891401, 22.5207773863743],
value: 64,
label: '标题',
},
{
id: '9',
coord: [113.93509300891401, 22.5211773863743],
value: 35,
label: '标题',
},
{
id: '10',
coord: [113.93509300891401, 22.5215773863743],
value: 112,
label: '标题',
},
{
id: '11',
coord: [113.93509300891401, 22.521977386374296],
value: 96,
label: '标题',
},
{
id: '12',
coord: [113.93509300891401, 22.522377386374295],
value: 132,
label: '标题',
},
{
id: '13',
coord: [113.93549300891401, 22.5203773863743],
value: 97,
label: '标题',
},
{
id: '14',
coord: [113.93549300891401, 22.5207773863743],
value: 99,
label: '标题',
},
{
id: '15',
coord: [113.93549300891401, 22.5211773863743],
value: 85,
label: '标题',
},
{
id: '16',
coord: [113.93549300891401, 22.5215773863743],
value: 127,
label: '标题',
},
{
id: '17',
coord: [113.93549300891401, 22.521977386374296],
value: 82,
label: '标题',
},
{
id: '18',
coord: [113.93549300891401, 22.522377386374295],
value: 136,
label: '标题',
},
{
id: '19',
coord: [113.93589300891401, 22.5203773863743],
value: 106,
label: '标题',
},
{
id: '20',
coord: [113.93589300891401, 22.5207773863743],
value: 160,
label: '标题',
},
{
id: '21',
coord: [113.93589300891401, 22.5211773863743],
value: 112,
label: '标题',
},
{
id: '22',
coord: [113.93589300891401, 22.5215773863743],
value: 133,
label: '标题',
},
{
id: '23',
coord: [113.93589300891401, 22.521977386374296],
value: 123,
label: '标题',
},
{
id: '24',
coord: [113.93589300891401, 22.522377386374295],
value: 170,
label: '标题',
},
{
id: '25',
coord: [113.936293008914, 22.5203773863743],
value: 147,
label: '标题',
},
{
id: '26',
coord: [113.936293008914, 22.5207773863743],
value: 149,
label: '标题',
},
{
id: '27',
coord: [113.936293008914, 22.5211773863743],
value: 122,
label: '标题',
},
{
id: '28',
coord: [113.936293008914, 22.5215773863743],
value: 194,
label: '标题',
},
{
id: '29',
coord: [113.936293008914, 22.521977386374296],
value: 147,
label: '标题',
},
{
id: '30',
coord: [113.936293008914, 22.522377386374295],
value: 174,
label: '标题',
},
{
id: '31',
coord: [113.936693008914, 22.5203773863743],
value: 130,
label: '标题',
},
{
id: '32',
coord: [113.936693008914, 22.5207773863743],
value: 123,
label: '标题',
},
{
id: '33',
coord: [113.936693008914, 22.5211773863743],
value: 104,
label: '标题',
},
{
id: '34',
coord: [113.936693008914, 22.5215773863743],
value: 123,
label: '标题',
},
{
id: '35',
coord: [113.936693008914, 22.521977386374296],
value: 96,
label: '标题',
},
{
id: '36',
coord: [113.936693008914, 22.522377386374295],
value: 100,
label: '标题',
},
{
id: '37',
coord: [113.937093008914, 22.5203773863743],
value: 74,
label: '标题',
},
{
id: '38',
coord: [113.937093008914, 22.5207773863743],
value: 95,
label: '标题',
},
{
id: '39',
coord: [113.937093008914, 22.5211773863743],
value: 51,
label: '标题',
},
{
id: '40',
coord: [113.937093008914, 22.5215773863743],
value: 117,
label: '标题',
},
{
id: '41',
coord: [113.937093008914, 22.521977386374296],
value: 90,
label: '标题',
},
{
id: '42',
coord: [113.937093008914, 22.522377386374295],
value: 120,
label: '标题',
},
{
id: '43',
coord: [113.937493008914, 22.5203773863743],
value: 105,
label: '标题',
},
{
id: '44',
coord: [113.937493008914, 22.5207773863743],
value: 92,
label: '标题',
},
{
id: '45',
coord: [113.937493008914, 22.5211773863743],
value: 65,
label: '标题',
},
{
id: '46',
coord: [113.937493008914, 22.5215773863743],
value: 107,
label: '标题',
},
{
id: '47',
coord: [113.937493008914, 22.521977386374296],
value: 88,
label: '标题',
},
{
id: '48',
coord: [113.937493008914, 22.522377386374295],
value: 78,
label: '标题',
},
{
id: '49',
coord: [113.937893008914, 22.5203773863743],
value: 54,
label: '标题',
},
{
id: '50',
coord: [113.937893008914, 22.5207773863743],
value: 113,
label: '标题',
},
{
id: '51',
coord: [113.937893008914, 22.5211773863743],
value: 97,
label: '标题',
},
{
id: '52',
coord: [113.937893008914, 22.5215773863743],
value: 129,
label: '标题',
},
{
id: '53',
coord: [113.937893008914, 22.521977386374296],
value: 117,
label: '标题',
},
{
id: '54',
coord: [113.937893008914, 22.522377386374295],
value: 185,
label: '标题',
},
{
id: '55',
coord: [113.938293008914, 22.5203773863743],
value: 169,
label: '标题',
},
{
id: '56',
coord: [113.938293008914, 22.5207773863743],
value: 198,
label: '标题',
},
{
id: '57',
coord: [113.938293008914, 22.5211773863743],
value: 159,
label: '标题',
},
{
id: '58',
coord: [113.938293008914, 22.5215773863743],
value: 191,
label: '标题',
},
{
id: '59',
coord: [113.938293008914, 22.521977386374296],
value: 175,
label: '标题',
},
{
id: '60',
coord: [113.938293008914, 22.522377386374295],
value: 177,
label: '标题',
}
]
}
appInstance.uniCall('add3DColumnLayer', jsonData, (result) => {
console.result(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 | 支持 | 支持 |
| coordZ | Number | Z 轴高度(单位:米) | 支持 | 支持 |
| columnType | String | 柱体外观类别,cube:方柱;cylinder:圆柱 | 支持 | 支持 |
| columnMinHeight | Number | 单体柱表达最小值的实际高度(单位:米) | 支持 | 支持 |
| columnMaxHeight | Number | 单体柱表达最大值的实际高度(单位:米) | 支持 | 支持 |
| columnAlpha | Number | 柱子透明度 0:完全透明;1:完全不透明 | 支持 | 支持 |
| columnPaint | String | 柱体样式类别 solid:单色着色;linear:线性着色;legend 图例着色 | 支持 | 不支持 |
| columnGap | Number | 柱子间隙 (单位:米)(注意:此属性端渲染未生效) | 支持 | 支持 |
| columnWidth | Number | 柱体宽度 (单位:米) | 支持 | 支持 |
| colorMax | String | 最大值上限颜色(HEX 颜色值) | 支持 | 支持 |
| colorMin | String | 最小值下限颜色(HEX 颜色值) | 支持 | 支持 |
| valueMax | Number | 最大值上限 | 支持 | 支持 |
| valueMin | Number | 最小值下限 | 支持 | 支持 |
| valueStep | Array | 颜色渐变分段,valueMin 数值对应 0,valueMax 对应 1.0,可配置任意比例分段,非必选 | 不支持 | 支持 |
| stepColor | Array | 颜色渐变分段,根据 valueStep 分段后每段渐变的颜色 | 不支持 | 支持 |
| labelColor | String | 标签文本颜色,可选值,默认白色 | 支持 | 支持 |
| labelScale | Number | 标签文本大小,默认值是 1 表示原大,0 - 1:表示缩小倍率,大于 1:表示放大倍率 | 支持 | 支持 |
| labelBackgroundColor | String | 标签文本背景颜色,可选值,默认灰色 | 支持 | 支持 |
| visible | Boolean | 添加当前图层时默认显示还是隐藏 | 支持 | 支持 |
| pointDataId | String | 对应本服务器上点数据对象,如果找到 pointDataId,则下方的 data 不起作用 | 支持 | 支持 |
| tags | Array | 用户自定标签数组,用于保存用户的扩展数据,或者可以控制显隐 | 不支持 | 支持 |
| legends | Array | 定义图层包含图例,支持为不同图例定义各自样式,,只在 columnPaint 是 legend 的时候起作用 | 支持 | 不支持 |
| legends[0].name | String | 图层内图例名称,新建时调用者自己传入的唯一名称,用于各种操作的图例识别 | 支持 | 不支持 |
| legends[0].minValue | Number | 数值最小值(不包括) | 支持 | 不支持 |
| legends[0].maxValue | Number | 数值最大值(包括) | 支持 | 不支持 |
| legends[0].color | String | 颜色(HEX 颜色值) | 支持 | 不支持 |
| data | Array | 定义图层可视化数据 | 支持 | 支持 |
| data[0].id | String | 热力数据点的 id 名 | 支持 | 支持 |
| data[0].coord | Number | XY 轴坐标,X:经度;Y:纬度 | 支持 | 支持 |
| data[0].label | String | 标签文本,如果为"",则不显示标签 | 支持 | 支持 |
| data[0].value | Number | 数据点权值 | 支持 | 支持 |
| legends[].name | String | 图层内图例名称,新建时调用者自己传入的唯一名称,用于各种操作的图例识别 | 支持 | 支持 |
| legends[].minValue | Number | 数值最小值(不包括) | 支持 | 支持 |
| legends[].maxValue | Number | 数值最大值(包括) | 支持 | 支持 |
| legends[].color | String | 颜色(HEX 颜色值) | 支持 | 支持 |
| data[].id | String | 数据点 id,新建时调用者自己传入的唯一标识 | 支持 | 支持 |
| data[].coord | Array | XY 轴坐标,X:经度;Y:纬度 | 支持 | 支持 |
| data[].label | String | 标签文本,如果为"",则不显示标签 | 支持 | 支持 |
| data[].value | Number | 数据点权值 | 支持 | 支持 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1:代表成功;0:代表失败 |
| message | String | 成功或者失败原因 |
2. 更新三维柱图数据
引入版本:3.0 起支持
功能描述
更新三维场景中添加三维柱图的数据
调用方法
JavaScript
let jsonData = {
id: 'bar',
name: '三维柱状图',
coordType: 0,
coordTypeZ: 0,
coordZ: 64,
isAppend: true,
tags: ['tag1', 'tag2', 'tag3'],
data: [
{
id: '5',
coord: [113.934497516862, 22.5110736501728], //以深圳湾经纬度为例
label: '标题',
value: 87,
},
{
id: '6',
coord: [113.934679208037, 22.511925263600503],
label: '标题',
value: 45,
},
{
id: '7',
coord: [113.935858470429, 22.5127358773057],
label: '标题',
value: 73,
},
{
id: '8',
coord: [113.937764651685, 22.512384968131002],
label: '标题',
value: 46,
},
],
};
appInstance.uniCall('update3DColumnLayerCoord', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 | 端渲染 | 流渲染 |
|---|---|---|---|---|
| id | String | 图层 ID (唯一标识) | 支持 | 支持 |
| name | String | 图层 name | 支持 | 支持 |
| coordType | String | xy 轴坐标模式 坐标类型(0:x 经度 y 纬度;1:x 米 y 米,相对世界 00 点) 目前该属性仅支持属性值为 0 | 支持 | 支持 |
| coordTypeZ | Number | z 轴坐标模式 坐标高度类型,单位:米(0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面) 目前该属性仅支持属性值为 0 | 支持 | 支持 |
| coordZ | Number | 高度(单位:米) | 支持 | 支持 |
| isAppend | Boolean | true: 追加数据; false: 重建数据 | 支持 | 支持 |
| tags | Array | 用户自定标签数组,用于保存用户的扩展数据,或者可以控制显隐 | 不支持 | 支持 |
| data | Array | 数据点位基本信息集合 | 支持 | 支持 |
| data[0].id | String | 柱图当前柱 ID | 支持 | 支持 |
| data[0].coord | Array | XY 轴坐标,X:经度;Y:纬度 | 支持 | 支持 |
| data[0].label | String | 标签文本,如果为"",则不显示标签 | 支持 | 支持 |
| data[0].value | Number | 数据点权值 | 支持 | 支持 |
| data[].id | String | 柱图当前柱 ID | 支持 | 支持 |
| data[].coord | Array | XY 轴坐标,X:经度;Y:纬度 | 支持 | 支持 |
| data[].label | String | 标签文本,如果为"",则不显示标签 | 支持 | 支持 |
| data[].value | Number | 数据点权值 | 支持 | 支持 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1:代表成功;0:代表失败 |
| message | String | 成功或者失败原因 |
3. 更新三维柱图样式
引入版本:3.0 起支持
功能描述
更新三维场景中添加三维柱图的样式
调用方法
JavaScript
let jsonData = {
id: 'bar',
columnType: 'cylinder',
columnMinHeight: 30,
columnMaxHeight: 300,
columnAlpha: 0.8,
columnPaint: 'solid',
columnGap: 0,
columnWidth: 30,
colorMax: '#26C9FF',
colorMin: '#FF00FF',
valueMax: 200,
valueMin: 10,
valueStep: [0, 0.05, 0.1, 0.4, 0.5, 1.0],
stepColor: ['#FF0000', '#990000', '#993300', '#336600', '#009900', '#00FF00'],
labelColor: '#ffffff',
labelScale: 1,
labelBackgroundColor: '#333333',
};
appInstance.uniCall('update3DColumnLayerStyle', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 | 端渲染 | 流渲染 |
|---|---|---|---|---|
| id | String | 图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别 | 支持 | 支持 |
| columnType | String | 柱状热力图柱体外观类型; cube 方柱,cylinder 圆柱 | 支持 | 支持 |
| columnMinHeight | Number | 单体柱表达最小值的实际高度(单位:米) | 支持 | 支持 |
| columnMaxHeight | Number | 单体柱表达最大值的实际高度(单位:米) | 支持 | 支持 |
| columnAlpha | Number | 柱体透明度,0:完全透明;1:完全不透明 | 支持 | 支持 |
| columnPaint | String | 柱体样式类别,solid:单色着色;linear:线性着色 | 支持 | 不支持 |
| columnGap | Number | 柱子间隙(单位:米)(注意:此属性端渲染未生效) | 支持 | 支持 |
| columnWidth | Number | 柱体宽度(单位:米) | 支持 | 支持 |
| colorMax | String | 最大值上限颜色(HEX 颜色值) | 支持 | 支持 |
| colorMin | String | 最小值下限颜色(HEX 颜色值) | 支持 | 支持 |
| valueMax | Number | 最大值上限 | 支持 | 支持 |
| valueMin | Number | 最小值下限 | 支持 | 支持 |
| valueStep | Array | 颜色渐变分段,valueMin 数值对应 0,valueMax 对应 1.0,可配置任意比例分段,非必选 | 不支持 | 支持 |
| stepColor | Array | 颜色渐变分段,根据 valueStep 分段后每段渐变的颜色 | 不支持 | 支持 |
| labelColor | String | 标签文本颜色,可选值,默认白色 | 支持 | 支持 |
| labelScale | Number | 标签文本大小,默认值是 1 表示原大,0 - 1:表示缩小倍率,大于 1:表示放大倍率 | 支持 | 支持 |
| labelBackgroundColor | String | 标签文本背景颜色,可选值,默认灰色 | 支持 | 支持 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1:代表成功;0:代表失败 |
| message | String | 成功或者失败原因 |
4. 删除三维柱图
引入版本:3.0 起支持
功能描述
删除三维柱图
调用方法
JavaScript
let jsonData = {
id: 'bar',
overlayType: '3DColumnLayer',
};
appInstance.uniCall('removeOverlay', jsonData, (result) => {
console.log(result);
});参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| id | String | 图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别 |
| overlayType | String | 图层对象类别 |
回调数据
JSON
{
"result": 1,
"message": "成功。"
}回调数据参数描述
| 属性 | 类型 | 说明 |
|---|---|---|
| result | Number | 1:代表成功;0:代表失败 |
| message | String | 成功或者失败原因 |