优化cesium里的热力图

前言

最近要优化cesium里的热力图效果，浏览了网络上的各种方法，发现大多是贴在影像上的。这么做好是好，但是会被自生添加的模型或者其他数据给遮盖。其次是网上的方法大多数是截取成一个矩形。不能自定义的截取自己所需要的。
经过尝试，决定修改下cesium heatmap，让他达到我们需要的要求。

首先先下载 cesium heatmap包。
其中我们可以看到也是通过叠加entity达到添加canvas的方法绘制到地图上。我们先把这一段代码注释

/*  Update/(re)draw the heatmap
 */
CHInstance.prototype.updateLayer = function () {

  // only works with a Viewer instance since the cesiumWidget
  // instance doesn't contain an entities property
  if (CesiumHeatmap.defaults.useEntitiesIfAvailable && this._cesium.entities) {
    if (this._layer) {
      this._cesium.entities.remove(this._layer);
    }

    // Work around issue with material rendering in Cesium
    // provided by https://github.com/criis
    material = new Cesium.ImageMaterialProperty({
      image: this._heatmap._renderer.canvas,
    });
    if (Cesium.VERSION >= "1.21") {
      material.transparent = true;
    } else if (Cesium.VERSION >= "1.16") {
      material.alpha = 0.99;
    }

    // this._layer = this._cesium.entities.add({
    //  show: true,
    //  rectangle: {
    //      coordinates: this._rectangle,
    //      material: material
    //  }
    // });
  } else {
    if (this._layer) {
      this._cesium.scene.imageryLayers.remove(this._layer);
    }

    this._layer = this._cesium.scene.imageryLayers.addImageryProvider(CesiumHeatmap._getImageryProvider(this));
  }
};

然后我们要获取我们需要添加的面的包围矩形，在上面绘制热力图

Cesium.Resource.fetch({
       url:'./static/range.json' //所需的面json数据，这里是通过cesium的异步加载方法
     }).then(response => {
       var features = JSON.parse(response).features;
       if (heatmapPolygon.length > 0) {
           for (var hPoint of heatmapPolygon) {
               viewer.entities.remove(hPoint);
           }
           heatmapPolygon = [];
       }
       var color = new Cesium.Color(60 / 255, 133 / 255, 223 / 255, 0.9);
       for (var feature of features) {
         var points = [];
         var bpoint = [];
         for (var coord of feature.geometry.coordinates[0]) {
           points.push(coord[0], coord[1]);
           bpoint.push(new Cesium.Cartographic(coord[0], coord[1], 0))
         }
         var bound = new Cesium.Rectangle.fromCartographicArray(bpoint)
         // 初始化CesiumHeatmap
         var heatMap = CesiumHeatmap.create(
           viewer, // 视图层
           bound, // 矩形坐标
           { // heatmap相应参数
             backgroundColor: "rgba(0,0,0,0)",
             radius: 50,
             maxOpacity: .5,
             minOpacity: 0,
             blur: .75
           }
         );

         // 添加数据 最小值，最大值，数据集
         heatMap.setWGS84Data(min, max, getData(300));//如果要用自己的数据，把getData换成你的数据，数据是{ x: x, y: y, value: value }的数组
         var img = heatMap._heatmap._renderer.canvas;
         var entity = viewer.entities.add({
           polygon: {
             hierarchy: Cesium.Cartesian3.fromDegreesArray(points), //多边形
             material: new Cesium.ImageMaterialProperty({//把polygon的材质换成热力图的img图，贴在模型上
               image: img
             })
           }
         });
         heatmapPolygon.push(entity);
       }
     })

     function getData(length) {
       var data = [];
       for (var i = 0; i < length; i++) {
         var x = Math.random() * ( 118.2839609360002 -118.27954196300004) + 118.27954196300004;
         var y = Math.random() * ( 34.05731778300003 - 34.05201381000006) + 34.05201381000006;
         var value = Math.random() * 100;
         data.push({ x: x, y: y, value: value });
       }
       return data;
     }

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kH4qXNst-1675651801900)(https://www.liangtengyu.com:9998/images/pic_1e52bf46.png)]

1.jpg

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mua6mOPN-1675651801901)(https://www.liangtengyu.com:9998/images/pic_18cf9c7a.png)]

2.jpg

ps（纯html里面没发现问题，在node项目下因为修改了源码，就直接import进去发现h337会undefine）
只要把h337.creat改成就行了。

this._heatmap = module.exports.create(this._options);