先上效果图
具体流程就是先用heatmap.js绘制出热力图的canvas,把canvas转成img,然后在cesium里面绘制一个矩形图元,利用fabric把前面的img赋给该图元。heatmap.js绘制canvas的过程在这里不叙述了,网上很多示例。
var image = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
image.src = heatMap._renderer.canvas.toDataURL("image/jpg");
this.heatPrimitive = this.viewer.scene.primitives.add(
new Cesium.GroundPrimitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(
coordinate[0],coordinate[1],coordinate[2],coordinate[3]
),
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
}),
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
aboveGround: false,
material: new Cesium.Material({
fabric: {
type: "Image",
uniforms: {
image: image.src,
},
},
}),
}),
})
);
动态更新该热力图需要注意的地方是,直接更新uniforms里面的image,这样不会有闪烁的感觉
var image = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
image.src = heatMap1._renderer.canvas.toDataURL("image/jpg");
this.heatPrimitive.appearance.material.uniforms.image = image.src;