最近要優(yōu)化cesium里的熱力圖效果，瀏覽了網(wǎng)絡(luò)上的各種方法，發(fā)現(xiàn)大多是貼在影像上的。這么做好是好，但是會(huì)被自生添加的模型或者其他數(shù)據(jù)給遮蓋。其次是網(wǎng)上的方法大多數(shù)是截取成一個(gè)矩形。不能自定義的截取自己所需要的。
    經(jīng)過嘗試，決定修改下cesium heatmap，讓他達(dá)到我們需要的要求。

首先先下載 cesium heatmap包。（站在巨人的肩膀上）
https://www.npmjs.com/package/cesium-heatmap
其中我們可以看到也是通過疊加entity達(dá)到添加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數(shù)據(jù)，這里是通過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, // 矩形坐標(biāo)
           { // heatmap相應(yīng)參數(shù)
             backgroundColor: "rgba(0,0,0,0)",
             radius: 50,
             maxOpacity: .5,
             minOpacity: 0,
             blur: .75
           }
         );

         // 添加數(shù)據(jù) 最小值，最大值，數(shù)據(jù)集
         heatMap.setWGS84Data(min, max, getData(300));//如果要用自己的數(shù)據(jù)，把getData換成你的數(shù)據(jù)，數(shù)據(jù)是{ x: x, y: y, value: value }的數(shù)組
         var img = heatMap._heatmap._renderer.canvas;
         var entity = viewer.entities.add({
           polygon: {
             hierarchy: Cesium.Cartesian3.fromDegreesArray(points), //多邊形
             material: new Cesium.ImageMaterialProperty({//把polygon的材質(zhì)換成熱力圖的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;
     }

1.jpg

2.jpg

ps（純html里面沒發(fā)現(xiàn)問題，在node項(xiàng)目下因?yàn)樾薷牧嗽创a，就直接import進(jìn)去發(fā)現(xiàn)h337會(huì)undefine）
只要把h337.creat改成就行了。

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