cesium+heatmap.js实现动态热力图

樱花_伸手摘星

已于 2024-05-14 16:26:22 修改

阅读量1.8k

点赞数 2

文章标签： javascript 前端开发语言

于 2023-10-31 19:47:35 首次发布

本文链接：https://blog.csdn.net/qq_29133225/article/details/134147538

版权

文章介绍了如何使用heatmap.js绘制热力图并将其转换为img，然后在Cesium中创建矩形图元，通过fabric将img动态绑定到图元，以避免闪烁。重点在于处理Base64编码和更新uniforms的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图

具体流程就是先用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;