数值区域图操作

目录

1. 添加数值区域图
2. 更新数值区域图数据
3. 更新数值区域图样式
4. 更新数值区域图区域
5. 删除数值区域图

1. 添加数值区域图

引入版本：3.1 起支持

功能描述

在三维场景中添加数值区域图

调用方法

JavaScript

let jsonData = {
  id: 'colorArea',
  name: '数值区域图',
  coordType: 0,
  coordTypeZ: 0,
  coordZ: 64,
  alpha: 1,
  type: 'Segment03',
  areaHeight: 100,
  fillArea: 'none',
  fillPosition: 'top',
  colorMax: '#ff0000',
  colorMin: '#00BFFF',
  valueMax: 200,
  valueMin: 0,
  visible: true,
  lineDataId: 'lineDataId',
  areas: [
    {
      name: 'areaName01',
      points: [
        {
          coord: [113.881906408677, 22.500519815487603], //以深圳湾经纬度为例
        },
        {
          coord: [113.881451067868, 22.498978695146203],
        },
        {
          coord: [113.883352694583, 22.498510202610102],
        },
        {
          coord: [113.883771045247, 22.5000993588058],
        },
      ],
    },
    {
      name: 'areaName02',
      points: [
        {
          coord: [113.881424102056, 22.498959744499203],
        },
        {
          coord: [113.880904853237, 22.4970327383819],
        },
        {
          coord: [113.882790554415, 22.4963953198929],
        },
        {
          coord: [113.88333172379599, 22.498480243032002],
        },
      ],
    },
    {
      name: 'areaName03',
      points: [
        {
          coord: [113.880885882209, 22.4969347752352],
        },
        {
          coord: [113.882733635287, 22.496267429470603],
        },
        {
          coord: [113.882364200908, 22.4947421564903],
        },
        {
          coord: [113.880419543787, 22.495250652640802],
        },
      ],
    },
  ],
  data: [
    {
      areaName: 'areaName01',
      value: 60,
    },
    {
      areaName: 'areaName02',
      value: 100,
    },
    {
      areaName: 'areaName03',
      value: 160,
    },
  ],
};

appInstance.uniCall('addColorAreaLayer', 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	支持	支持
coordZ	Number	Z 轴高度(单位:米)	支持	支持
alpha	String	透明度，0：完全透明；1：完全不透明	支持	支持
type	String	区域边界样式类别（具体类型参考下图 type 枚举值）	不支持 Gradient01	支持
areaHeight	Number	围栏高度(单位:米)	支持	支持
fillArea	String	底部区域填充类型（具体类型参考下图 fillArea 枚举值）	支持	支持
fillPosition	String	区域填充的位置，top/bottom，默认 top	支持	支持
colorMax	String	最大值上限颜色（HEX 颜色值）	支持	支持
colorMin	String	最小值下限颜色（HEX 颜色值）	支持	支持
valueMax	Number	最大值上限	支持	支持
valueMin	Number	最小值下限	支持	支持
visible	Boolean	添加当前图层时默认显示还是隐藏	支持	支持
lineDataId	String	对应本服务器上线数据对象，如果找到 lineDataId，则下方的 areas 不起作用	不支持	支持
areas	Object	定义基础填充区域，支持为不同区域定义各自样式	支持	支持
areas[0].name	String	图层区域子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别	支持	支持
areas[0].points[0].coord	Array	XY 轴坐标，X：经度；Y：纬度	支持	支持
data	Array	定义图层可视化数据	支持	支持
data[0].areaName	String	数据点区域名称	支持	支持
data[0].value	Number	数据点权值	支持	支持

回调数据

JSON

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

回调数据参数描述

属性	类型	说明
result	Number	1：代表成功；0：代表失败
message	String	成功或者失败原因

type 枚举值

Arrow01
Gradient01
Gradient02
Gradient03
Grid01
Grid02
Grid03
Grid04
Grid05
Segment01
Segment02
Segment03

fillArea 枚举值

Gradient01
Gradient02
Grid01
Grid02
Segment01
Segment02
Solid01
Solid02
Solid03
Solid04
Solid05

返回本章目录

2. 更新数值区域图数据

引入版本：3.1 起支持

功能描述

更新三维场景中添加数值区域图的数据

调用方法

JavaScript

let jsonData = {
  id: 'colorArea',
  name: '数值区域图',
  isAppend: true,
  data: [
    {
      areaName: 'areaName01',
      value: 800,
    },
    {
      areaName: 'areaName02',
      value: 15,
    },
    {
      areaName: 'areaName02',
      value: 300,
    },
  ],
};

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

参数描述

属性	类型	说明
id	String	图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
name	String	图层名称，支持为图层自定义名称
isAppend	Boolean	true: 追加数据，并不会清除现有其他数据，如果名称相同，则替换该数据；false: 重建数据，数据全部清空；add：在重名的现有数据上累加值
data	Array	定义图层可视化数据
data[0].areaName	String	数据点区域名称
data[0].value	Number	数据点权值

回调数据

JSON

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

回调数据参数描述

属性	类型	说明
result	Number	1：代表成功；0：代表失败
message	String	成功或者失败原因

返回本章目录

3. 更新数值区域图样式

引入版本：3.1 起支持

功能描述

更新三维场景中添加数值区域图的样式

调用方法

JavaScript

let jsonData = {
  id: 'colorArea',
  alpha: 1,
  type: 'Segment03',
  areaHeight: 100,
  fillArea: 'Segment02',
  fillPosition: 'top',
  colorMax: '#F38080',
  colorMin: '#FFFFFF',
  valueMax: 500,
  valueMin: 100,
};

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

参数描述

属性	类型	说明	端渲染	流渲染
id	String	图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别	支持	支持
alpha	String	透明度，0：完全透明；1：完全不透明	支持	支持
type	String	区域边界样式类别（具体类型参考上图 type 枚举值）	不支持 Gradient01	支持
areaHeight	Number	围栏高度(单位:米)	支持	支持
fillArea	String	区域填充样式类别（具体类型参考上图 fillArea 枚举值）	支持	支持
fillPosition	String	区域填充的位置，top/bottom，默认 top	支持	支持
colorMax	String	最大值上限颜色（HEX 颜色值）	支持	支持
colorMin	String	最小值下限颜色（HEX 颜色值）	支持	支持
valueMax	Number	最大值上限	支持	支持
valueMin	Number	最小值下限	支持	支持

回调数据

JSON

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

回调数据参数描述

属性	类型	说明
result	Number	1：代表成功；0：代表失败
message	String	成功或者失败原因

返回本章目录

4. 更新数值区域图区域

引入版本：3.1 起支持

功能描述

更新三维场景中添加数值区域图的区域

调用方法

JavaScript

let jsonData = {
  id: 'colorArea',
  isAppend: false,
  coordType: 0,
  coordTypeZ: 0,
  coordZ: 10,
  areas: [
    {
      name: 'areaName01',
      points: [
        {
          coord: [113.88382098446199, 22.500017266822603], //以深圳湾经纬度为例
        },
        {
          coord: [113.88632862558299, 22.498684428678903],
        },
        {
          coord: [113.885546862314, 22.4965350435946],
        },
        {
          coord: [113.88412193423, 22.4944958634386],
        },
        {
          coord: [113.882514001654, 22.494895875699303],
        },
      ],
    },
    {
      name: 'areaName02',
      points: [
        {
          coord: [113.883541619114, 22.495801929477103],
        },
        {
          coord: [113.88249203980999, 22.494732920786202],
        },
        {
          coord: [113.882390191192, 22.494377118497702],
        },
        {
          coord: [113.883922230853, 22.4940072574203],
        },
        {
          coord: [113.884035057158, 22.4943830323765],
        },
      ],
    },
    {
      name: 'areaName03',
      points: [
        {
          coord: [113.88236323123999, 22.494282170757803],
        },
        {
          coord: [113.88392223590999, 22.4939272595237],
        },
        {
          coord: [113.88338101288299, 22.4928983105118],
        },
        {
          coord: [113.88195084995, 22.492672968981402],
        },
      ],
    },
  ],
};

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

参数描述

属性	类型	说明
id	String	图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
isAppend	Boolean	true: 追加数据，并不会清除现有其他数据，如果名称相同，则只更新该数据；false: 重建数据，数据全部清空
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 轴高度(单位:米)
areas	Object	定义基础填充区域，支持为不同区域定义各自样式
areas[0].name	String	图层区域子对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别
areas[0].points[0].coord	Array	XY 轴坐标，X：经度；Y：纬度

回调数据

JSON

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

回调数据参数描述

属性	类型	说明
result	Number	1：代表成功；0：代表失败
message	String	成功或者失败原因

返回本章目录

5. 删除数值区域图

引入版本：3.0 起支持

功能描述

删除数值区域图

调用方法

JavaScript

let jsonData = {
  id: 'colorArea',
  overlayType: 'colorAreaLayer',
};

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

参数描述

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

回调数据

JSON

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

回调数据参数描述

属性	类型	说明
result	Number	1：代表成功；0：代表失败
message	String	成功或者失败原因

流渲染效果图

系统架构图

端渲染效果图

系统架构图

返回本章目录