MapGIS数字孪生平台：添加区域热力图

前言

在三维地理信息系统（GIS）开发中，区域热力图是一种常见的数据可视化方式，能够直观展示空间数据的分布和强度。MapGIS数字孪生平台通过 MapGISAreaHeatMap 接口，为开发者提供了高效、灵活的区域热力图渲染能力。本文将介绍该接口的使用方法。

构造函数与参数说明

创建区域热力图的基本方式如下：

let heatMap = new MapGISCloudRender.MapGISAreaHeatMap(options);

其中 options 支持如下主要参数：

参数名	类型	默认值	说明
type	string	‘Area’	功能类型（一般无需修改）
geoType	string	‘points’	几何空间类型
isShow	Boolean	true	是否显示
minAttValue	Array		属性最小值列表
maxAttValue	Array		属性最大值列表
radiusFactor	Number	1.0	热力图影响半径因子
url	string	‘NullUrl’	区域热力图数据url
jsonData	object		外部传入的json流数据
colorTable	Array	[new Color(1,0,0)]	热力图颜色表

常用参数：

• jsonData：直接传入热力图数据对象，适合前端动态生成数据的场景。
• url：指定本地或远程的json文件路径，适合已有数据文件的场景。
• colorTable：设置热力图的颜色渐变，支持多个 Color 对象。
• radiusFactor：控制热力图的扩散半径，数值越大，热力范围越广。

数据格式

jsonData 的结构如下：

{
  "datas": [
    {
      "data": {
        "0": {
          "attribute": [
            {
              "attdata": [属性值]
            }
          ],
          "point": [
            Cartesian3对象
          ]
        },
        ...
      }
    }
  ]
}

• attribute.attdata：属性值数组，支持多属性。
• point：空间点坐标，使用 MapGISCloudRender.Cartesian3 创建。

用法

实时构建数据并添加热力图

let { Cartesian3, Color } = MapGISCloudRender;

function createJsonData() {
  const jsonData = { "datas": [ { "data": {} } ] };
  const minLon = 114.12, maxLon = 114.51, scaleLon = maxLon - minLon;
  const minLat = 30.35, maxLat = 30.69, scaleLat = maxLat - minLat;
  // 模拟传感器生成的数据
  for (let i = 0; i < 1000; i++) {
    jsonData.datas[0].data[i] = {
      "attribute": [ { "attdata": [randomNum(60, 100)] } ],
      "point": [
        new Cartesian3(
          minLon + Math.random() * scaleLon,
          minLat + Math.random() * scaleLat
        )
      ]
    };
  }
  return jsonData;
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

const options = {
  radiusFactor: 10,
  maxAttValue: [100],
  colorTable: [
    new Color(1, 0, 0),
    new Color(0.277298, 0.71875, 0.155084),
    new Color(0.328758, 0.013953, 0.380208)
  ],
  jsonData: createJsonData()
};

let heatMap = new MapGISCloudRender.MapGISAreaHeatMap(options);
window.zdScene.addCovering(heatMap);

2. 通过已有 JSON 文件添加热力图

let { Color } = MapGISCloudRender;
const options = {
  radiusFactor: 10,
  maxAttValue: [110],
  colorTable: [
    new Color(1, 0, 0),
    new Color(0.277298, 0.71875, 0.155084),
    new Color(0.328758, 0.013953, 0.380208)
  ],
  url: "F://areaHeatMap.json" // 或 "http://localhost:8080/areaHeatMap.json"
};
let heatMap = new MapGISCloudRender.MapGISAreaHeatMap(options);
window.zdScene.addCovering(heatMap);

3. 移除热力图

window.zdScene.removeCovering(heatMap);

常见问题与建议

• 数据量大时性能问题：建议控制单次渲染点数量，或采用分批加载。
• 颜色渐变不理想：可通过调整 colorTable 实现更丰富的视觉效果。
• 属性值范围设置：maxAttValue 和 minAttValue 建议与实际数据范围匹配，否则热力图效果可能失真。
• 多属性支持：如有多属性需求，可通过 attIndex 切换不同属性的热力渲染。
• 通过JSON文件加载时，支持本地路径或远程URL，但需注意该文件需要服务器可以访问。