统一开发 API

Appearance

栅格图操作 ​

目录 ​

1. 添加栅格图 ​

引入版本：3.0 起支持

功能描述 ​

在三维场景中添加栅格图

调用方法 ​

JavaScript
let jsonData = {   
    id: "idObj",
    name: "layerName",
    coordType: 0,
    coordTypeZ: 0,
    coordZ: 10,
    gridClusterStyle: "scatter",
    centerCoord: [113.326675,23.124065],
    radius: 200,
    gridPadding: 0,
    gridType: "grid",
    gridHeight: 10,
    gridAlpha: 0.3,
    gridWidth: 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"],
    visible: true,
    pointDataId: "pointDataId",
    tags: ["tag1", "tag2", "tag3"],
  data: [
    { id: '1', coord: [113.92955740017601, 22.5243823656461], value: 10 },
    { id: '2', coord: [113.92955740017601, 22.5247823656461], value: 74 },
    { id: '3', coord: [113.92955740017601, 22.5251823656461], value: 63 },
    { id: '4', coord: [113.92955740017601, 22.5255823656461], value: 119 },
    { id: '5', coord: [113.92955740017601, 22.525982365646094], value: 98 },
    { id: '6', coord: [113.92955740017601, 22.526382365646093], value: 76 },
    { id: '7', coord: [113.92955740017601, 22.526782365646092], value: 40 },
    { id: '8', coord: [113.92955740017601, 22.52718236564609], value: 48 },
    { id: '9', coord: [113.92995740017601, 22.5243823656461], value: 32 },
    { id: '10', coord: [113.92995740017601, 22.5247823656461], value: 80 },
    { id: '11', coord: [113.92995740017601, 22.5251823656461], value: 43 },
    { id: '12', coord: [113.92995740017601, 22.5255823656461], value: 33 },
    { id: '13', coord: [113.92995740017601, 22.525982365646094], value: 14 },
    { id: '14', coord: [113.92995740017601, 22.526382365646093], value: 43 },
    { id: '15', coord: [113.92995740017601, 22.526782365646092], value: 14 },
    { id: '16', coord: [113.92995740017601, 22.52718236564609], value: 46 },
    { id: '17', coord: [113.930357400176, 22.5243823656461], value: 30 },
    { id: '18', coord: [113.930357400176, 22.5247823656461], value: 33 },
    { id: '19', coord: [113.930357400176, 22.5251823656461], value: 25 },
    { id: '20', coord: [113.930357400176, 22.5255823656461], value: 43 },
    { id: '21', coord: [113.930357400176, 22.525982365646094], value: 24 },
    { id: '22', coord: [113.930357400176, 22.526382365646093], value: 100 },
    { id: '23', coord: [113.930357400176, 22.526782365646092], value: 87 },
    { id: '24', coord: [113.930357400176, 22.52718236564609], value: 135 },
    { id: '25', coord: [113.930757400176, 22.5243823656461], value: 110 },
    { id: '26', coord: [113.930757400176, 22.5247823656461], value: 151 },
    { id: '27', coord: [113.930757400176, 22.5251823656461], value: 136 },
    { id: '28', coord: [113.930757400176, 22.5255823656461], value: 144 },
    { id: '29', coord: [113.930757400176, 22.525982365646094], value: 110 },
    { id: '30', coord: [113.930757400176, 22.526382365646093], value: 83 },
    { id: '31', coord: [113.930757400176, 22.526782365646092], value: 53 },
    { id: '32', coord: [113.930757400176, 22.52718236564609], value: 29 },
    { id: '33', coord: [113.931157400176, 22.5243823656461], value: 1 },
    { id: '34', coord: [113.931157400176, 22.5247823656461], value: 79 },
    { id: '35', coord: [113.931157400176, 22.5251823656461], value: 31 },
    { id: '36', coord: [113.931157400176, 22.5255823656461], value: 44 },
    { id: '37', coord: [113.931157400176, 22.525982365646094], value: 18 },
    { id: '38', coord: [113.931157400176, 22.526382365646093], value: 62 },
    { id: '39', coord: [113.931157400176, 22.526782365646092], value: 32 },
    { id: '40', coord: [113.931157400176, 22.52718236564609], value: 43 },
    { id: '41', coord: [113.931557400176, 22.5243823656461], value: 11 },
    { id: '42', coord: [113.931557400176, 22.5247823656461], value: 56 },
    { id: '43', coord: [113.931557400176, 22.5251823656461], value: 38 },
    { id: '44', coord: [113.931557400176, 22.5255823656461], value: 97 },
    { id: '45', coord: [113.931557400176, 22.525982365646094], value: 80 },
    { id: '46', coord: [113.931557400176, 22.526382365646093], value: 124 },
    { id: '47', coord: [113.931557400176, 22.526782365646092], value: 76 },
    { id: '48', coord: [113.931557400176, 22.52718236564609], value: 115 },
    { id: '49', coord: [113.931957400176, 22.5243823656461], value: 101 },
    { id: '50', coord: [113.931957400176, 22.5247823656461], value: 84 },
    { id: '51', coord: [113.931957400176, 22.5251823656461], value: 49 },
    { id: '52', coord: [113.931957400176, 22.5255823656461], value: 121 },
    { id: '53', coord: [113.931957400176, 22.525982365646094], value: 72 },
    { id: '54', coord: [113.931957400176, 22.526382365646093], value: 65 },
    { id: '55', coord: [113.931957400176, 22.526782365646092], value: 28 },
    { id: '56', coord: [113.931957400176, 22.52718236564609], value: 44 },
    { id: '57', coord: [113.932357400176, 22.5243823656461], value: 2 },
    { id: '58', coord: [113.932357400176, 22.5247823656461], value: 56 },
    { id: '59', coord: [113.932357400176, 22.5251823656461], value: 33 },
    { id: '60', coord: [113.932357400176, 22.5255823656461], value: 53 },
    { id: '61', coord: [113.932357400176, 22.525982365646094], value: 31 },
    { id: '62', coord: [113.932357400176, 22.526382365646093], value: 55 },
    { id: '63', coord: [113.932357400176, 22.526782365646092], value: 30 },
    { id: '64', coord: [113.932357400176, 22.52718236564609], value: 44 },
    { id: '65', coord: [113.38675740017601, 22.5243823656461], value: 17 },
    { id: '66', coord: [113.38675740017601, 22.5247823656461], value: 35 },
    { id: '67', coord: [113.38675740017601, 22.5251823656461], value: 28 },
    { id: '68', coord: [113.38675740017601, 22.5255823656461], value: 49 },
    { id: '69', coord: [113.38675740017601, 22.525982365646094], value: 38 },
    { id: '70', coord: [113.38675740017601, 22.526382365646093], value: 110 },
    { id: '71', coord: [113.38675740017601, 22.526782365646092], value: 82 },
    { id: '72', coord: [113.38675740017601, 22.52718236564609], value: 101 },
  ],
};

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

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别支持支持
nameString图层名称，支持为图层自定义名称支持支持
coordTypeNumberXY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y 米，相对世界 00 点支持支持
coordTypeZNumberZ 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米）支持支持
coordZNumber高度(单位:米)支持支持
gridClusterStyleString栅格聚簇样式，scatter：散点；square：正方形，默认为 scatter 模式支持不支持
centerCoordString中心经纬度，X：经度；Y：纬度，当栅格处理类型为 square 时起作用且必填支持不支持
radiusString半径（单位：米），和中心点经纬度一起形成正方形区域，当栅格处理类型为 square 时起作用且必填，当数据点在正方形之外时，剔除该数据支持不支持
gridPaddingString栅格内边距（单位：米），当栅格处理类型为 square 时起作用支持不支持
gridTypeString栅格外观类别，grid：方格；dot：圆点支持支持
gridHeightNumber单栅高度（单位：米）支持支持
gridAlphaNumber栅格透明度，0：完全透明；1：完全不透明支持支持
gridWidthNumber栅格宽度（单位：米）支持支持
colorMaxString最大值上限颜色（HEX 颜色值）支持支持
colorMinString最小值下限颜色（HEX 颜色值）支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
valueStepArray颜色渐变分段，valueMin 数值对应 0，valueMax 对应 1.0，可配置任意比例分段，非必选不支持支持
stepColorArray颜色渐变分段，根据 valueStep 分段后每段渐变的颜色不支持支持
visibleBoolean添加当前图层时默认显示还是隐藏支持支持
pointDataIdString对应本服务器上点数据对象，如果找到 pointDataId，则下方的 data 不起作用，（注意：端渲染未生效。）支持支持
tagsArray用户自定标签数组，用于保存用户的扩展数据，或者可以控制显隐不支持支持
dataArray数据点位基本信息集合支持支持
data[0].idString当前 ID支持支持
data[0].coordNumberXY 轴坐标，X：经度；Y：纬度支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

2. 更新栅格图数据 ​

引入版本：3.0 起支持

功能描述 ​

更新三维场景中添加栅格图的数据

调用方法 ​

JavaScript
let jsonData = {
  id: 'grid',
  name: '栅格图',
  coordType: 0,
  coordTypeZ: 0,
  coordZ: 64,
  isAppend: true,
  tags: ['tag1', 'tag2', 'tag3'],
  data: [
    {
      id: '0',
      coord: [113.883880901559, 22.500074150971802], //以深圳湾经纬度为例
      value: 80,
    },
    {
      id: '1',
      coord: [113.88412158908899, 22.4999546962148],
      value: 72,
    },
    {
      id: '2',
      coord: [113.884395229937, 22.499835175926503],
      value: 150,
    },
    {
      id: '3',
      coord: [113.884678855774, 22.499690634327102],
      value: 182,
    },
    {
      id: '4',
      coord: [113.885075328656, 22.4994668728112],
      value: 282,
    },
    {
      id: '5',
      coord: [113.88512925644599, 22.499436768755],
      value: 382,
    },
    {
      id: '6',
      coord: [113.885637569383, 22.499163782138503],
      value: 82,
    },
  ],
};

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

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别支持支持
nameString图层名称，支持为图层自定义名称支持支持
coordTypeStringXY 轴坐标类别，0：X 经度，Y 纬度；1：X 米，Y 米，相对世界 00 点 目前该属性仅支持属性值为 0支持支持
coordTypeZNumberZ 轴坐标类别，0：相对 3D 世界 0 海拔；1：相对 3D 世界地表；2：相对 3D 模型表面（单位：米） 目前该属性仅支持属性值为 0支持支持
coordZNumber高度(单位:米)支持支持
isAppendBoolean是否追加数据（按数据顺序），true：在原有数据后方追加数据；false：清除原有数据，更新数据支持支持
tagsArray用户自定标签数组，用于保存用户的扩展数据，或者可以控制显隐不支持支持
dataArray数据点位基本信息集合支持支持
data[0].idString地标点的 id 名支持支持
data[0].coordArrayXY 轴坐标，X：经度；Y：纬度支持支持
data[0].valueNumber数据点权值支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

3. 更新栅格图样式 ​

引入版本：3.0 起支持

功能描述 ​

更新三维场景中添加栅格图的样式

调用方法 ​

JavaScript
let jsonData = {   
    id: "idObj",
    gridClusterStyle: "scatter",
    centerCoord: [113.326675,23.124065],
    radius: 200,
    gridPadding: 0,
    gridType: "dot",
    gridHeight: 10,
    gridAlpha: 0.3,
    gridWidth: 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"]
}

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

参数描述 ​

属性类型说明端渲染流渲染
idString图层对象 id，新建时调用者自己传入的唯一标识，用于各种操作的对象识别支持支持
gridClusterStyleString栅格聚簇样式，scatter：散点；square：正方形，默认为 scatter 模式支持不支持
centerCoordString中心经纬度，X：经度；Y：纬度，当栅格处理类型为 square 时起作用且必填支持不支持
radiusString半径（单位：米），和中心点经纬度一起形成正方形区域，当栅格处理类型为 square 时起作用且必填，当数据点在正方形之外时，剔除该数据支持不支持
gridPaddingString栅格内边距（单位：米），当栅格处理类型为 square 时起作用支持不支持
gridTypeString栅格外观类别，grid：方格；dot：圆点支持支持
gridHeightNumber单栅高度（单位：米）支持支持
gridAlphaNumber栅格透明度，0：完全透明；1：完全不透明支持支持
gridWidthString栅格宽度（单位：米）支持支持
colorMaxNumber最大值上限颜色（HEX 颜色值）支持支持
colorMinNumber最小值下限颜色（HEX 颜色值）支持支持
valueMaxNumber最大值上限支持支持
valueMinNumber最小值下限支持支持
valueStepArray颜色渐变分段，valueMin 数值对应 0，valueMax 对应 1.0，可配置任意比例分段，非必选不支持支持
stepColorArray颜色渐变分段，根据 valueStep 分段后每段渐变的颜色不支持支持

回调数据 ​

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

回调数据参数描述 ​

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

返回本章目录

4. 删除栅格图 ​

引入版本：3.0 起支持

功能描述 ​

删除栅格图

调用方法 ​

JavaScript
let jsonData = {
  id: 'grid',
  overlayType: '3DGridLayer',
};

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

参数描述 ​

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

回调数据 ​

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

回调数据参数描述 ​

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

流渲染效果图 ​

系统架构图

端渲染效果图 ​

系统架构图

返回本章目录