统一开发 API

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);
});

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别支持支持
nameString图层名称，支持为图层自定义名称支持支持
coordTypeNumberxy 轴坐标模式 坐标类型(0:x 经度 y 纬度；1:x 米 y 米，相对世界 00 点) 目前该属性仅支持属性值为 0支持支持
coordTypeZNumberZ 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米） 目前该属性仅支持属性值为 0支持支持
coordZNumberZ 轴高度(单位:米)支持支持
columnTypeString柱体外观类别，cube：方柱；cylinder：圆柱支持支持
columnMinHeightNumber单体柱表达最小值的实际高度(单位:米)支持支持
columnMaxHeightNumber单体柱表达最大值的实际高度(单位:米)支持支持
columnAlphaNumber柱子透明度 0：完全透明；1：完全不透明支持支持
columnPaintString柱体样式类别 solid：单色着色；linear：线性着色；legend 图例着色支持不支持
columnGapNumber柱子间隙 (单位:米)（注意：此属性端渲染未生效）支持支持
columnWidthNumber柱体宽度 (单位:米)支持支持
colorMaxString最大值上限颜色（HEX 颜色值）支持支持
colorMinString最小值下限颜色（HEX 颜色值）支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
valueStepArray颜色渐变分段，valueMin 数值对应 0，valueMax 对应 1.0，可配置任意比例分段，非必选不支持支持
stepColorArray颜色渐变分段，根据 valueStep 分段后每段渐变的颜色不支持支持
labelColorString标签文本颜色，可选值，默认白色支持支持
labelScaleNumber标签文本大小，默认值是 1 表示原大，0 - 1：表示缩小倍率，大于 1：表示放大倍率支持支持
labelBackgroundColorString标签文本背景颜色，可选值，默认灰色支持支持
visibleBoolean添加当前图层时默认显示还是隐藏支持支持
pointDataIdString对应本服务器上点数据对象，如果找到 pointDataId，则下方的 data 不起作用支持支持
tagsArray用户自定标签数组，用于保存用户的扩展数据，或者可以控制显隐不支持支持
legendsArray定义图层包含图例，支持为不同图例定义各自样式，，只在 columnPaint 是 legend 的时候起作用支持不支持
legends[0].nameString图层内图例名称，新建时调用者自己传入的唯一名称，用于各种操作的图例识别支持不支持
legends[0].minValueNumber数值最小值（不包括）支持不支持
legends[0].maxValueNumber数值最大值（包括）支持不支持
legends[0].colorString颜色（HEX 颜色值）支持不支持
dataArray定义图层可视化数据支持支持
data[0].idString热力数据点的 id 名支持支持
data[0].coordNumberXY 轴坐标，X：经度；Y：纬度支持支持
data[0].labelString标签文本，如果为"",则不显示标签支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

JSON
{
  "result": 1,
  "message": "成功。"
}

回调数据参数描述 ​

属性类型说明
resultNumber1：代表成功；0：代表失败
messageString成功或者失败原因

返回本章目录

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);
});

参数描述 ​

属性类型说明端渲染流渲染
idString图层 ID （唯一标识）支持支持
nameString图层 name支持支持
coordTypeStringxy 轴坐标模式 坐标类型(0:x 经度 y 纬度；1:x 米 y 米，相对世界 00 点) 目前该属性仅支持属性值为 0支持支持
coordTypeZNumberz 轴坐标模式 坐标高度类型，单位：米(0:相对 3D 世界 0 海拔；1:相对 3D 世界地表；2:相对 3D 模型表面) 目前该属性仅支持属性值为 0支持支持
coordZNumber高度(单位:米)支持支持
isAppendBooleantrue: 追加数据; false: 重建数据支持支持
tagsArray用户自定标签数组，用于保存用户的扩展数据，或者可以控制显隐不支持支持
dataArray数据点位基本信息集合支持支持
data[0].idString柱图当前柱 ID支持支持
data[0].coordArrayXY 轴坐标，X：经度；Y：纬度支持支持
data[0].labelString标签文本，如果为"",则不显示标签支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

JSON
{
  "result": 1,
  "message": "成功。"
}

回调数据参数描述 ​

属性类型说明
resultNumber1：代表成功；0：代表失败
messageString成功或者失败原因

返回本章目录

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);
});

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别支持支持
columnTypeString柱状热力图柱体外观类型; cube 方柱,cylinder 圆柱支持支持
columnMinHeightNumber单体柱表达最小值的实际高度(单位:米)支持支持
columnMaxHeightNumber单体柱表达最大值的实际高度(单位:米)支持支持
columnAlphaNumber柱体透明度，0：完全透明；1：完全不透明支持支持
columnPaintString柱体样式类别，solid：单色着色；linear：线性着色支持不支持
columnGapNumber柱子间隙（单位:米）（注意：此属性端渲染未生效）支持支持
columnWidthNumber柱体宽度（单位：米）支持支持
colorMaxString最大值上限颜色（HEX 颜色值）支持支持
colorMinString最小值下限颜色（HEX 颜色值）支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
valueStepArray颜色渐变分段，valueMin 数值对应 0，valueMax 对应 1.0，可配置任意比例分段，非必选不支持支持
stepColorArray颜色渐变分段，根据 valueStep 分段后每段渐变的颜色不支持支持
labelColorString标签文本颜色，可选值，默认白色支持支持
labelScaleNumber标签文本大小，默认值是 1 表示原大，0 - 1：表示缩小倍率，大于 1：表示放大倍率支持支持
labelBackgroundColorString标签文本背景颜色，可选值，默认灰色支持支持

回调数据 ​

JSON
{
  "result": 1,
  "message": "成功。"
}

回调数据参数描述 ​

属性类型说明
resultNumber1：代表成功；0：代表失败
messageString成功或者失败原因

返回本章目录

4. 删除三维柱图 ​

引入版本：3.0 起支持

功能描述 ​

删除三维柱图

调用方法 ​

JavaScript
let jsonData = {
  id: 'bar',
  overlayType: '3DColumnLayer',
};

appInstance.uniCall('removeOverlay', jsonData, (result) => {
  console.log(result);
});

参数描述 ​

属性类型说明
idString图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
overlayTypeString图层对象类别

回调数据 ​

JSON
{
  "result": 1,
  "message": "成功。"
}

回调数据参数描述 ​

属性类型说明
resultNumber1：代表成功；0：代表失败
messageString成功或者失败原因

流渲染效果图 ​

系统架构图

端渲染效果图 ​

系统架构图

返回本章目录