Cesium 使用CesiumHeatmap.js实现热力图扩散效果

1.生成热力图

2.实时更新热力图半径，并转换成Image

3.生成矩形，实时修改材质图片为热力图的Image

4.使用preUpdate与preRender事件更新

//数据
    let data = [{
      x: 147.1383442264,
      y: -41.4360048372,
      value: 76
    },
    {
      x: 147.1384363011,
      y: -41.4360298848,
      value: 63
    },
    {
      x: 147.138368102,
      y: -41.4358360603,
      value: 1
    },
    {
      x: 147.1385627739,
      y: -41.4358799123,
      value: 21
    },
    {
      x: 147.1385138501,
      y: -41.4359327669,
      value: 28
    },
    {
      x: 147.1385031219,
      y: -41.4359730105,
      value: 41
    },
    {
      x: 147.1384127393,
      y: -41.435928255,
      value: 75
    },
    {
      x: 147.1384551136,
      y: -41.4359450132,
      value: 3
    },
    {
      x: 147.1384927196,
      y: -41.4359158649,
      value: 45
    },
    {
      x: 147.1384938639,
      y: -41.4358498311,
      value: 45
    },
    {
      x: 147.1385183299,
      y: -41.4360213794,
      value: 93
    },
    {
      x: 147.1384007925,
      y: -41.4359860133,
      value: 46
    },
    {
      x: 147.1383604844,
      y: -41.4358298672,
      value: 54
    },
    {
      x: 147.13851025,
      y: -41.4359098303,
      value: 39
    },
    {
      x: 147.1383874733,
      y: -41.4358511035,
      value: 34
    },
    {
      x: 147.1384981796,
      y: -41.4359355403,
      value: 81
    },
    {
      x: 147.1384504107,
      y: -41.4360332348,
      value: 39
    },
    {
      x: 147.1385582664,
      y: -41.4359788335,
      value: 20
    },
    {
      x: 147.1383967364,
      y: -41.4360581999,
      value: 35
    },
    {
      x: 147.1383839615,
      y: -41.436016316,
      value: 47
    },
    {
      x: 147.1384082712,
      y: -41.4358423338,
      value: 36
    },
    {
      x: 147.1385092651,
      y: -41.4358577623,
      value: 69
    },
    {
      x: 147.138360356,
      y: -41.436046789,
      value: 90
    },
    {
      x: 147.138471893,
      y: -41.4359184292,
      value: 88
    },
    {
      x: 147.1385605689,
      y: -41.4360271359,
      value: 81
    },
    {
      x: 147.1383585714,
      y: -41.4359362476,
      value: 32
    },
    {
      x: 147.1384939114,
      y: -41.4358844253,
      value: 67
    },
    {
      x: 147.138466724,
      y: -41.436019121,
      value: 17
    },
    {
      x: 147.1385504355,
      y: -41.4360614056,
      value: 49
    },
    {
      x: 147.1383883832,
      y: -41.4358733544,
      value: 82
    },
    {
      x: 147.1385670669,
      y: -41.4359650236,
      value: 25
    },
    {
      x: 147.1383416534,
      y: -41.4359310876,
      value: 82
    },
    {
      x: 147.138525285,
      y: -41.4359394661,
      value: 66
    },
    {
      x: 147.1385487719,
      y: -41.4360137656,
      value: 73
    },
    {
      x: 147.1385496029,
      y: -41.4359187277,
      value: 73
    },
    {
      x: 147.1383989222,
      y: -41.4358556562,
      value: 61
    },
    {
      x: 147.1385499424,
      y: -41.4359149305,
      value: 67
    },
    {
      x: 147.138404523,
      y: -41.4359563326,
      value: 90
    },
    {
      x: 147.1383883675,
      y: -41.4359794855,
      value: 78
    },
    {
      x: 147.1383967187,
      y: -41.435891185,
      value: 15
    },
    {
      x: 147.1384610005,
      y: -41.4359044797,
      value: 15
    },
    {
      x: 147.1384688489,
      y: -41.4360396127,
      value: 91
    },
    {
      x: 147.1384431875,
      y: -41.4360684409,
      value: 8
    },
    {
      x: 147.1385411067,
      y: -41.4360645847,
      value: 42
    },
    {
      x: 147.1385237178,
      y: -41.4358843181,
      value: 31
    },
    {
      x: 147.1384406464,
      y: -41.4360003831,
      value: 51
    },
    {
      x: 147.1384679169,
      y: -41.4359950456,
      value: 96
    },
    {
      x: 147.1384194314,
      y: -41.4358419739,
      value: 22
    },
    {
      x: 147.1385049792,
      y: -41.4359574813,
      value: 44
    },
    {
      x: 147.1384097378,
      y: -41.4358598672,
      value: 82
    },
    {
      x: 147.1384993219,
      y: -41.4360352975,
      value: 84
    },
    {
      x: 147.1383640499,
      y: -41.4359839518,
      value: 81
    },
    ];

    let data1 = [{
      x: 147.1383442264,
      y: -41.4360048372,
      value: 76
    },
    {
      x: 147.1384363011,
      y: -41.4360298848,
      value: 63
    }
    ];

    //边界
    var bounds = {
      west: 147.1383844,
      east: 147.13856899,
      south: -41.43606916,
      north: -41.43582929,
    };


    //图片
    var image = new Image();
    //矩形
    var heatPrimitive;
    //半径
    var radius = 200.0;
    //热力图
    let heatMap;
    //最小值
    let valueMin = 0;
    //最大值
    let valueMax = 100;
    //是否生成
    var isShow = true;
    //定时器
    var synctimer;

    //按钮点击
    $("#load").click(function () {
      console.log("加载按钮点击，加载");
      CreateHeatMapSync()
    });
    $("#clear").click(function () {
      console.log("清除按钮点击，清除");
      ClearHeatMap()
    
    });


    //创建热力图，扩散效果
    function CreateHeatMapSync() {
      isShow = true;

      // init heatmap
      heatMap = CesiumHeatmap.create(
        viewer, // your cesium viewer
        bounds, // bounds for heatmap layer
        {
          backgroundColor: "rgba(0,0,0,0)",
          radius: radius,
          maxOpacity: .5,
          minOpacity: 0,
          blur: .75
        }
      );
      heatMap.radius = radius;

      //设置颜色
      // heatMap.gradient=([
      //   {offset:0.4,color:"blue"},
      //   {offset:0.6,color:"cyan"},
      //   {offset:0.7,color:"lime"},
      //   {offset:0.85,color:"yellow"},
      //   {offset:1.0,color:"red"},
      // ]);

      // add data to heatmap
      heatMap.setWGS84Data(valueMin, valueMax, data);
      heatMap.show(false);


      if (heatPrimitive) {
        viewer.scene.primitives.remove(heatPrimitive);
      }

      heatPrimitive = viewer.scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
              rectangle: Cesium.Rectangle.fromDegrees(heatMap.bounds.west, heatMap.bounds.south, heatMap.bounds.east, heatMap.bounds.north),
              vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
            }),
          }),
          appearance: new Cesium.EllipsoidSurfaceAppearance({
            aboveGround: true,
            material: new Cesium.Material({
              fabric: {
                type: "Image",
                uniforms: {
                  image: image.src,
                },
              },
            }),
          }),
        })
      );

      heatPrimitive.show = false;

      CreateImageCanvas(heatMap, heatPrimitive);



      viewer.camera.setView({
        destination: Cesium.Rectangle.fromDegrees(heatMap.bounds.west, heatMap.bounds.south, heatMap.bounds.east, heatMap.bounds.north)
      });

      //延迟更新
      synctimer = setInterval(function () {
        HeatMapSync();
      }, 2000);

    }

    //实时更新图
    function HeatMapSync() {
      viewer.scene.preUpdate.addEventListener(PreUpdateEvent);
      viewer.scene.preRender.addEventListener(PreRenderEvent);
      clearInterval(synctimer);
    }


    //热力图数据渲染成图片，贴在地图上
    function CreateImageCanvas(heatMap, heatPrimitive) {

      //console.log("生成的矩形:", heatPrimitive);
      //指定格式PNG，更新材质
      image.src = heatMap._heatmap._renderer.canvas.toDataURL("image/jpg");
      heatPrimitive.appearance.material.uniforms.image = image.src;
      heatPrimitive.show = true;

    }

    //场景渲染前执行的方法
    function PreUpdateEvent() {
      if (isShow) {
        //console.log("1");
        if (heatMap.getLayer()) {
          heatMap.clearLayer();
        }
      }

    }

    //场景渲染执行的方法
    function PreRenderEvent() {
      if (isShow) {
        if (heatMap.getLayer()) {
          heatMap.clearLayer();
        }
        //console.log("2");

        radius += 1.0;
        if (radius >= 200.0) {
          radius = 1.0;
        }

        Create(heatPrimitive);

      }
    }

    //生成
    function Create(heatPrimitive) {
      heatMap = CesiumHeatmap.create(
        viewer, // your cesium viewer
        bounds, // bounds for heatmap layer
        {
          backgroundColor: "rgba(0,0,0,0)",
          radius: radius,
          maxOpacity: .5,
          minOpacity: 0,
          blur: .75
        }
      );

      heatMap.radius = radius;
      // CesiumHeatmap.defaults.radiusFactor = radius;

      heatMap.setWGS84Data(valueMin, valueMax, data);
      heatMap.show(false);
      //console.log("生成的热力图1:", heatMap);
      CreateImageCanvas(heatMap, heatPrimitive);
    }

    //清除结果
    function ClearHeatMap() {
      radius=200.0;
      isShow = false;
      console.log("清除内容");
      heatMap.clearLayer();
      viewer.scene.primitives.remove(heatPrimitive);
      viewer.scene.preUpdate.removeEventListener(PreUpdateEvent);
      viewer.scene.preRender.removeEventListener(PreRenderEvent);
     
    }