统一开发 API

Appearance

三维柱图操作 ​

目录 ​

1. 添加三维柱图 ​

引入版本：3.0 起支持

功能描述 ​

在三维场景中添加三维柱图

调用方法 ​

JavaScript
let jsonData = {
  id: 'bar',
  name: '三维柱状图',
  coordType: 0,
  coordTypeZ: 0,
  coordZ: 64,
  columnType: 'cube',
  columnMinHeight: 10,
  columnMaxHeight: 300,
  columnAlpha: 1,
  columnPaint: 'solid',
  columnGap: 0,
  columnWidth: 30,
  colorMax: '#FF2626',
  colorMin: '#FFFF00',
  valueMax: 250,
  valueMin: 10,
  labelColor: '#ffffff',
  labelBackgroundColor: '#333333',
  visible: true,
  pointDataId: 'pointDataId',
  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最小值下限
labelColorString标签文本颜色，可选值，默认白色
labelBackgroundColorString标签文本背景颜色，可选值，默认灰色
visibleBoolean添加当前图层时默认显示还是隐藏
pointDataIdString对应本服务器上点数据对象，如果找到 pointDataId，则下方的 data 不起作用
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,
  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: 重建数据
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,
  labelColor: '#ffffff',
  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最小值下限
labelColorString标签文本颜色，可选值，默认白色
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成功或者失败原因

流渲染效果图 ​

系统架构图

端渲染效果图 ​

系统架构图

返回本章目录