Cesium（七）热力图

一、下载cesium-heatmap.js
在Cesium中实现热力图需要cesium-heatmap.js,可以使用npm直接下载

npm install cesium-heatmap

JavaScript环境也可以在github直接下载
https://github.com/danwild/CesiumHeatmap
二、配置路径
在angular.json文件中添加js文件的路径：

"scripts": [
   "node_modules/cesium-heatmap/CesiumHeatmap.js"
 ]

三、代码实现

// 矩形坐标
var bounds = {
  west: -180.0, south: 30.0, east: -80.0, north: 50.0
};

// 初始化CesiumHeatmap
var heatMap = CesiumHeatmap.create(
  viewer, // 视图层
  bounds, // 矩形坐标
  { // heatmap相应参数
      backgroundColor: "rgba(0,0,0,0)",
      radius: 15,
      maxOpacity: .5,
      minOpacity: 0,
      blur: .75
  }
);

// 添加数据 最小值，最大值，数据集
heatMap.setWGS84Data(0, 100, getData(1000));
viewer.zoomTo(viewer.entities);

// 动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
function getData(length) {
  var data = [];
  for (var i = 0; i < length; i++) {
      var x = Math.random() * (-180 + 80) - 80;
      var y = Math.random() * (50 - 30) + 30;
      var value = Math.random() * 100;
      data.push({x: x, y: y, value: value});
  }
  return data;
}

效果如下：

image.png