一、下载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
