Skip to content

数值区域图操作 ​

目录 ​

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',
  tags: ['tag1', 'tag2', 'tag3'],
  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);
});

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
nameString图层名称,支持为图层自定义名称支持支持
coordTypeNumberXY 轴坐标类别,0:X 经度,Y 纬度;1:X 米,Y 米,相对世界 00 点 目前该属性仅支持属性值为 0支持支持
coordTypeZNumberZ 轴坐标类别,0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面(单位:米) 目前该属性仅支持属性值为 0支持支持
coordZNumberZ 轴高度(单位:米)支持支持
alphaString透明度,0:完全透明;1:完全不透明支持支持
typeString区域边界样式类别(具体类型参考下图 type 枚举值)不支持 Gradient01支持
areaHeightNumber围栏高度(单位:米)支持支持
fillAreaString底部区域填充类型(具体类型参考下图 fillArea 枚举值)支持支持
fillPositionString区域填充的位置,top/bottom,默认 top支持支持
colorMaxString最大值上限颜色(HEX 颜色值)支持支持
colorMinString最小值下限颜色(HEX 颜色值)支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
visibleBoolean添加当前图层时默认显示还是隐藏支持支持
lineDataIdString对应本服务器上线数据对象,如果找到 lineDataId,则下方的 areas 不起作用不支持支持
tagsArray用户自定标签数组,用于保存用户的扩展数据,或者可以控制显隐不支持支持
areasObject定义基础填充区域,支持为不同区域定义各自样式支持支持
areas[0].nameString图层区域子对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
areas[0].points[0].coordArrayXY 轴坐标,X:经度;Y:纬度支持支持
dataArray定义图层可视化数据支持支持
data[0].areaNameString数据点区域名称支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

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

回调数据参数描述 ​

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

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,
  tags: ['tag1', 'tag2', 'tag3'],
  data: [
    {
      areaName: 'areaName01',
      value: 800,
    },
    {
      areaName: 'areaName02',
      value: 15,
    },
    {
      areaName: 'areaName02',
      value: 300,
    },
  ],
};

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

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
nameString图层名称,支持为图层自定义名称支持支持
isAppendBooleantrue: 追加数据,并不会清除现有其他数据,如果名称相同,则替换该数据;false: 重建数据,数据全部清空;add:在重名的现有数据上累加值支持支持
tagsArray用户自定标签数组,用于保存用户的扩展数据,或者可以控制显隐不支持支持
dataArray定义图层可视化数据支持支持
data[0].areaNameString数据点区域名称支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

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

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
alphaString透明度,0:完全透明;1:完全不透明支持支持
typeString区域边界样式类别(具体类型参考上图 type 枚举值)不支持 Gradient01支持
areaHeightNumber围栏高度(单位:米)支持支持
fillAreaString区域填充样式类别(具体类型参考上图 fillArea 枚举值)支持支持
fillPositionString区域填充的位置,top/bottom,默认 top支持支持
colorMaxString最大值上限颜色(HEX 颜色值)支持支持
colorMinString最小值下限颜色(HEX 颜色值)支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

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

参数描述 ​

属性类型说明
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别
isAppendBooleantrue: 追加数据,并不会清除现有其他数据,如果名称相同,则只更新该数据;false: 重建数据,数据全部清空
coordTypeNumberXY 轴坐标类别,0:X 经度,Y 纬度;1:X 米,Y 米,相对世界 00 点 目前该属性仅支持属性值为 0
coordTypeZNumberZ 轴坐标类别,0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面(单位:米) 目前该属性仅支持属性值为 0
coordZNumberZ 轴高度(单位:米)
areasObject定义基础填充区域,支持为不同区域定义各自样式
areas[0].nameString图层区域子对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别
areas[0].points[0].coordArrayXY 轴坐标,X:经度;Y:纬度

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

5. 删除数值区域图 ​

引入版本:3.0 起支持

功能描述 ​

删除数值区域图

调用方法 ​

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

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

参数描述 ​

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

回调数据 ​

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

回调数据参数描述 ​

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

流渲染效果图 ​

系统架构图

端渲染效果图 ​

系统架构图

返回本章目录