Skip to content

路径段热力图操作 ​

目录 ​

1. 添加路径段热力图 ​

引入版本:3.1 起支持

功能描述 ​

在三维场景中添加路径段热力图

调用方法 ​

JavaScript
let jsonData = {
  id: 'idObj',
  name: 'layerName',
  coordType: 0,
  coordTypeZ: 0,
  alpha: 1,
  width: 30,
  colorMax: '#FF0000',
  colorMin: '#00FF00',
  usingLegends: false,
  valueMax: 1000,
  valueMin: 0,
  lineSpeed: 10,
  lineDataId: 'lineDataId',
  visible: true,
  segments: [
    {
      name: 'segment01',
      points: [
        {
          coord: [113.9515886155735, 22.530255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9375886155735, 22.530255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment02',
      points: [
        {
          coord: [113.9375886155735, 22.530255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9375886155735, 22.516255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment03',
      points: [
        {
          coord: [113.9375886155735, 22.516255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9515886155735, 22.516255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment04',
      points: [
        {
          coord: [113.9515886155735, 22.516255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9515886155735, 22.530255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment05',
      points: [
        {
          coord: [113.9505886155735, 22.528255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9385886155735, 22.528255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment06',
      points: [
        {
          coord: [113.9385886155735, 22.528255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9385886155735, 22.517255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment07',
      points: [
        {
          coord: [113.9385886155735, 22.517255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9505886155735, 22.517255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment08',
      points: [
        {
          coord: [113.9505886155735, 22.517255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9505886155735, 22.528255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment09',
      points: [
        {
          coord: [113.9495886155735, 22.526255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9395886155735, 22.526255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment10',
      points: [
        {
          coord: [113.9395886155735, 22.526255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9395886155735, 22.518255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment11',
      points: [
        {
          coord: [113.9395886155735, 22.518255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9495886155735, 22.518255482736806],
          coordZ: 64,
        },
      ],
    },
    {
      name: 'segment12',
      points: [
        {
          coord: [113.9495886155735, 22.518255482736806],
          coordZ: 64,
        },
        {
          coord: [113.9495886155735, 22.526255482736806],
          coordZ: 64,
        },
      ],
    },
  ],
  legends: [
    {
      name: 'legendName1',
      color: '#ff0000',
      type: 'default',
      valueMin: 0,
      valueMax: 1,
    },
    {
      name: 'legendName1',
      color: '#00ff00',
      type: 'default',
      valueMin: 1,
      valueMax: 2,
    },
  ],
  data: [
    {
      name: 'segment01',
      value: 0,
    },
    {
      name: 'segment02',
      value: 500,
    },
    {
      name: 'segment03',
      value: 750,
    },
    {
      name: 'segment04',
      value: 1000,
    },
    {
      name: 'segment05',
      value: 150,
    },
    {
      name: 'segment06',
      value: 750,
    },
    {
      name: 'segment07',
      value: 500,
    },
    {
      name: 'segment08',
      value: 1000,
    },
    {
      name: 'segment09',
      value: 500,
    },
    {
      name: 'segment10',
      value: 0,
    },
    {
      name: 'segment11',
      value: 1000,
    },
    {
      name: 'segment12',
      value: 750,
    },
  ],
};
appInstance.uniCall('addRoadSgHeatLayerCoord', jsonData, (result) => {
  console.log(result);
});

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
nameString图层名称,支持为图层自定义名称支持支持
coordTypeNumberXY 轴坐标类别,0:X 经度,Y 纬度;1:X 米,Y 米,相对世界 00 点支持支持
coordTypeZNumberZ 轴坐标类别,0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面(单位:米)支持支持
alphaNumber透明度,0:完全透明;1:完全不透明支持支持
widthNumber路径宽度(单位:米)支持支持
colorMaxString最大值上限颜色(HEX 颜色值)支持支持
colorMinString最小值下限颜色(HEX 颜色值)支持支持
usingLegendsBoolean样式是否使用图例配置,默认是 false,false:不使用 legends 配置样式,使用 colorMax 和 colorMin,true:使用 legends 配置样式,如果数据权值没有包括在 legends 范围内,使用 colorMin 作为默认颜色不支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
linespeedNumber路线流动速度(单位:米/秒)不支持支持
lineDataIdString对应本服务器上线数据对象,如果找到 lineDataId,则 segments 不起作用支持支持
visibleBoolean添加当前图层时默认显示还是隐藏支持支持
segmentsArray定义基础路段数据,支持不同路段表现为不同热力颜色支持支持
segments[0].nameString图层路段子对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
segments[0].pointsArray定义段途径点支持支持
segments[0].points[0].coordArrayXY 轴坐标,X:经度;Y:纬度支持支持
segments[0].points[0].coordZNumberZ 轴高度(单位:米)支持支持
legendsArray定义路径段的图例,为不同的 value 值域范围定义各自样式不支持支持
legends[0].nameString图例名称,新建时调用者自己传入的唯一名称,用于各种操作的图例识别不支持支持
legends[0].colorString颜色(HEX 颜色值)不支持支持
legends[0].typeString路线样式类别, default 实线型, arrow 箭头型, dot 虚线型不支持支持
legends[0].valueMinString数据权值范围的最小值(包含),大于等于 valueMin 且小于 valueMax 的数据会使用这个图例样式不支持支持
legends[0].valueMaxString数据权值范围的最大值(不包含),大于等于 valueMin 且小于 valueMax 的数据会使用这个图例样式不支持支持
dataArray定义图层可视化数据支持支持
data[0].nameString数据点路段名称支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

2. 更新路径段热力图数据 ​

引入版本:3.1 起支持

功能描述 ​

更新三维场景中添加路径段热力图的数据

调用方法 ​

JavaScript
let jsonData = {
  id: 'idObj',
  isAppend: true,
  data: [
    {
      name: 'segment01',
      value: 0,
    },
    {
      name: 'segment02',
      value: 0,
    },
    {
      name: 'segment03',
      value: 0,
    },
    {
      name: 'segment04',
      value: 0,
    },
    {
      name: 'segment05',
      value: 500,
    },
    {
      name: 'segment06',
      value: 500,
    },
    {
      name: 'segment07',
      value: 500,
    },
    {
      name: 'segment08',
      value: 500,
    },
    {
      name: 'segment09',
      value: 1000,
    },
    {
      name: 'segment10',
      value: 1000,
    },
    {
      name: 'segment11',
      value: 1000,
    },
    {
      name: 'segment12',
      value: 1000,
    },
  ],
};
appInstance.uniCall('updateRoadSgHeatLayerCoord', jsonData, (result) => {
  console.log(result);
});

参数描述 ​

属性类型说明
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别
isAppendBoolean是否追加数据(按数据顺序),true:按新数据 更新原有重复数据 & 追加新数据;false:清除原有数据 & 重建新数据
dataArray定义图层可视化数据
data[0].nameString数据点路段名称
data[0].valueNumber数据点权值

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

3. 更新路径段热力图样式 ​

引入版本:3.1 起支持

功能描述 ​

更新三维场景中添加路径段热力图的样式

调用方法 ​

JavaScript
let jsonData = {
  id: 'idObj',
  alpha: 0.5,
  width: 50,
  colorMax: '#ff0000',
  colorMin: '#ff00ff',
  usingLegends: false,
  valueMax: 1200,
  valueMin: 0,
  lineSpeed: 10,
  legends: [
    {
      name: 'legendName1',
      color: '#ff0000',
      type: 'default',
      valueMin: 0,
      valueMax: 1,
    },
    {
      name: 'legendName1',
      color: '#00ff00',
      type: 'default',
      valueMin: 1,
      valueMax: 2,
    },
  ],
};
appInstance.uniCall('updateRoadSgHeatLayerStyle', jsonData, (result) => {
  console.log(result);
});

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别支持支持
alphaNumber透明度,0:完全透明;1:完全不透明支持支持
widthNumber路径宽度(单位:米)支持支持
colorMaxString最大值上限颜色(HEX 颜色值)支持支持
colorMinString最小值下限颜色(HEX 颜色值)支持支持
usingLegendsBoolean样式是否使用图例配置,默认是 false,false:不使用 legends 配置样式,使用 colorMax 和 colorMin,true:使用 legends 配置样式,如果数据权值没有包括在 legends 范围内,使用 colorMin 作为默认颜色不支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
linespeedNumber路线流动速度(单位:米/秒)不支持支持
legendsArray定义路径段的图例,为不同的 value 值域范围定义各自样式不支持支持
legends[0].nameString图例名称,新建时调用者自己传入的唯一名称,用于各种操作的图例识别不支持支持
legends[0].colorString颜色(HEX 颜色值)不支持支持
legends[0].typeString路线样式类别, default 实线型, arrow 箭头型, dot 虚线型不支持支持
legends[0].valueMinString数据权值范围的最小值(包含),大于等于 valueMin 且小于 valueMax 的数据会使用这个图例样式不支持支持
legends[0].valueMaxString数据权值范围的最大值(不包含),大于等于 valueMin 且小于 valueMax 的数据会使用这个图例样式不支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

4. 更新路径段热力图路段 ​

引入版本:3.1 起支持

功能描述 ​

更新三维场景中添加路径段热力图的路段

调用方法 ​

JavaScript
let jsonData = {
  id: 'idObj',
  name: 'layerName',
  coordType: 0,
  coordTypeZ: 0,
  isAppend: false,
  segments: [
    {
      name: 'segment01',
      points: [
        {
          coord: [113.945154525, 22.5325479965],
          coordZ: 150,
        },
        {
          coord: [113.9349563656, 22.5222341731],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment02',
      points: [
        {
          coord: [113.9349563656, 22.5222341731],
          coordZ: 150,
        },
        {
          coord: [113.9555589769, 22.522076486],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment03',
      points: [
        {
          coord: [113.9555589769, 22.522076486],
          coordZ: 150,
        },
        {
          coord: [113.945154525, 22.5325479965],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment04',
      points: [
        {
          coord: [113.9451471935, 22.5310745627],
          coordZ: 150,
        },
        {
          coord: [113.9365372063, 22.5227642062],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment05',
      points: [
        {
          coord: [113.9365372063, 22.5227642062],
          coordZ: 150,
        },
        {
          coord: [113.9532843087, 22.5228748729],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment06',
      points: [
        {
          coord: [113.9532843087, 22.5228748729],
          coordZ: 150,
        },
        {
          coord: [113.9451471935, 22.5310745627],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment07',
      points: [
        {
          coord: [113.9451477319, 22.5300791217],
          coordZ: 150,
        },
        {
          coord: [113.9379622599, 22.5232608469],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment08',
      points: [
        {
          coord: [113.9379622599, 22.5232608469],
          coordZ: 150,
        },
        {
          coord: [113.9519180395, 22.5232611833],
          coordZ: 150,
        },
      ],
    },
    {
      name: 'segment09',
      points: [
        {
          coord: [113.9519180395, 22.5232611833],
          coordZ: 150,
        },
        {
          coord: [113.9451477319, 22.5300791217],
          coordZ: 150,
        },
      ],
    },
  ],
};
appInstance.uniCall('updateRoadSgHeatLayerSegment', jsonData, (result) => {
  console.log(result);
});

参数描述 ​

属性类型说明
idString图层对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别
nameString图层名称,支持为图层自定义名称
coordTypeNumberXY 轴坐标类别,0:X 经度,Y 纬度;1:X 米,Y 米,相对世界 00 点
coordTypeZNumberZ 轴坐标类别,0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面(单位:米)
isAppendBoolean是否追加数据(按数据顺序),true:按新数据 更新原有重复数据 & 追加新数据;false:清除原有数据 & 重建新数据
segmentsArray定义基础路段数据,支持不同路段表现为不同热力颜色
segments[0].nameString图层路段子对象 id,新建时调用者自己传入的唯一标识,用于各种操作的对象识别
segments[0].pointsArray定义段途径点
segments[0].points[0].coordArrayXY 轴坐标,X:经度;Y:纬度
segments[0].points[0].coordZNumberZ 轴高度(单位:米)

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

5. 删除路径段热力图 ​

引入版本:3.0 起支持

功能描述 ​

删除路径段热力图

调用方法 ​

JavaScript
let jsonData = {
  id: 'idObj',
  overlayType: 'roadSgHeatLayer',
};

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

参数描述 ​

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

回调数据 ​

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

回调数据参数描述 ​

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

路径段热力图流渲染效果图 ​

系统架构图

路径段热力图端渲染效果图 ​

系统架构图

返回本章目录