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

先上效果图

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值