原理:使用heatmap.js插件,先生成一个热力图,再在地图上创建一个盒子(如矩形),以纹理的形式把热力图填充到矩形中。
1、首先下载heatmap.js插件,自己随意写了一个热力图的方法,传入热力图所需参数max和data
// 创建热力图
function createHeatMap(max, data) {
// 创建元素
var heatDoc = document.createElement("div");
heatDoc.setAttribute("style", "width:1000px;height:1000px;margin: 0px;display: none;");
document.body.appendChild(heatDoc);
// 创建热力图对象
var heatmap = h337.create({
container: heatDoc,
radius: 20,
maxOpacity: .5,
minOpacity: 0,
blur: .75,
gradient: {
'0.9':'red',
'0.8':'orange',
'0.7':'yellow',
'0.5':'blue',
'0.3':'green',
},
});
// 添加数据
heatmap.setData({
max: max,
data: data
});
return heatmap;
}
2、创建一个cesium视图对象
var viewer = new Cesium.Viewer("viewer");
3、在之前建的cesium视图中,创建一个矩形(也可是椭圆、正方形、多边形等),在矩形内以纹理的形式填充,自己随意封装了一个方法
// 创建正方形 绑定热力图
function createRectangle(viewer, coordinate, heatMap) {
viewer.entities.add({
name: 'Rotating rectangle with rotating texture coordinate',
show: true,
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(coordinate[0], coordinate[1], coordinate[2], coordinate[3]),
material: heatMap._renderer.canvas // 核心语句,填充热力图
}
});
}
4、随意生成多个点数据
// 生成len个随机数据
function getData(len) {
//构建一些随机数据点
var points = [];
var max = 0;
var width = 1000;
var height = 1000;
while (len--) {
var val = Math.floor(Math.random() * 1000);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random() * width),
y: Math.floor(Math.random() * height),
value: val
};
points.push(point);
}
return {max: max, data: points}
}
5、使用上述方法,则生成热力图
// 第一个热力图
var coordinate1 = [-109.0, 10.0, -80.0, 35.0];
var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data);
creatRectangle(viewer, coordinate1, heatMap1);
// 第二个热力图
var coordinate2 = [-109.0, 30.0, -80.0, 41.0];
var heatMap2 = createHeatMap(getData(3000).max, getData(3000).data);
creatRectangle(viewer, coordinate2, heatMap2);
// 第三个热力图
var coordinate3 = [-109.0, 41.0, -80.0, 50.0];
var heatMap3 = createHeatMap(getData(5000).max, getData(5000).data);
creatRectangle(viewer, coordinate3, heatMap3);
6、效果如下,因为数据都是随意添加的,所以效果不好,但是可以体现出能在cesium中实现热力图