cesium 克里金插值 背景透明显示

1、cesium 克里金 背景透明的问题，

2、在polygon 中加一个颜色的改变颜色的透明度

color: Cesium.Color.fromCssColorString('rgba(255, 255, 255,0.6)')

class KrigingInstance {
  constructor(viewer, values, colors, jsonUrl, type) {
    this.viewer = viewer
    this.values = values
    this.colors = colors
    this.jsonUrl = jsonUrl
    this.type = type
    this.handelObj = this._handelValues(values)
    this.lngs = this.handelObj.lngs
    this.lats = this.handelObj.lats
    this.siteValue = this.handelObj.siteValue
    this.ex = []
    this.minx = 0
    this.miny = 0
    this.maxx = 0
    this.maxy = 0
    this._canvas = this._creatCanvas()
    this._entyInstance = null
    this.dataReady = this._getJsonData()
  }
  _coords = []
  updateViewer(values) {
    this.handelObj = this._handelValues(values)
    this.lngs = this.handelObj.lngs
    this.lats = this.handelObj.lats
    this.siteValue = this.handelObj.siteValue
    console.log('start', new Date().getMinutes() + ',' + new Date().getSeconds())
    this.changeCanvas()
    console.log('end', new Date().getMinutes() + ',' + new Date().getSeconds())
    this._entyInstance.polygon.material = new Cesium.ImageMaterialProperty({
      image: this._canvas//使用贴图的方式将结果贴到面上
    })
  }
  addViewer() {
    this.dataReady.then(res => {
      this.changeCanvas()
      if (this._canvas != null) {

        if(this.viewer.entities.getById("KrigingRain" + this.type)){
          this.viewer.entities.removeById("KrigingRain" + this.type)
        }

        // console.log(this._canvas.style); 



        let ctx=this._canvas.getContext('2d')   

        ctx.globalCompositeOperation = 'destination-out'; // 擦除底层颜色
        ctx.globalAlpha = 0.5;
        ctx.fillStyle = 'yellow';


       
        this._entyInstance = this.viewer.entities.add({
          id: "KrigingRain" + this.type,
          polygon: {
            show: true,
            clampToGround: true,
            hierarchy: {
              positions: Cesium.Cartesian3.fromDegreesArray(this._coords)
            },
            material: new Cesium.ImageMaterialProperty({
              image: this._canvas,//使用贴图的方式将结果贴到面上,
              color: Cesium.Color.fromCssColorString('rgba(255, 255, 255,0.6)')
            })
          },
        });
      }
    })
  }

  show(show){
    if(this._entyInstance){

        this._entyInstance.polygon.show = show
    }
  }

  export () {
    return this._canvas
  }

  
  changeCanvas() {
    //1.用克里金训练一个variogram对象
    let variogram = kriging.train(this.siteValue, this.lngs, this.lats, 'exponential', 0, 100);
    //2.使用刚才的variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值；
    let grid = kriging.grid(this.ex, variogram, (this.maxy - this.miny) / 500);
    //3.将得到的格网预测值渲染到canvas画布上
    kriging.plot(this._canvas, grid, [this.minx, this.maxx], [this.miny, this.maxy], this.colors);
  }
  _creatCanvas() {
    let canvas = null;//画布
    canvas = document.createElement('canvas');
    canvas.width = 800;  // 画布的大小 
    canvas.height = 800; // 
    canvas.style.display = 'block';
    canvas.getContext('2d').globalAlpha =1;//设置透明度
    return canvas
  }
  // 根据url 获取数据
  async _getJsonData() {
    let coords = []
    const { data } = await axios.get(this.jsonUrl)
    let ex = data.features[0].geometry.coordinates // 流域边界面
    this.ex = ex
    for (let item of ex[0]) {
        // if(item.length>1){
        //     for(let i=0;i<item.length;i++){    
        //         coords.push(...item[i])
        //     }
        // }else{

            coords.push(...item)
        // }
     
    }
    this._coords = coords
    const polygonHierarchy = new Cesium.PolygonHierarchy(
      Cesium.Cartesian3.fromDegreesArray(this._coords)
    )
    // const polygon = new Cesium.PolygonGeometry({
    //   polygonHierarchy: polygonHierarchy
    // });
    //范围（弧度）
    let extent = Cesium.PolygonGeometry.computeRectangle({
      polygonHierarchy: polygonHierarchy
    });
    this.minx = Cesium.Math.toDegrees(extent.west);//转换为经纬度
    this.miny = Cesium.Math.toDegrees(extent.south);
    this.maxx = Cesium.Math.toDegrees(extent.east);
    this.maxy = Cesium.Math.toDegrees(extent.north);
  }
  // 处理接口返回的数据               
  _handelValues(values) {
    let lngs = []
    let lats = []
    let siteValue = []
    values.map(item => {
      lngs.push(item[0]);
      lats.push(item[1]);
      siteValue.push(item[2])
    })
    return {
      lngs: lngs,
      lats: lats,
      siteValue: siteValue
    }
  }
  // 删除当前实例
  _remove() {
    if (this._entyInstance) viewer.entities.remove(this._entyInstance);
    this._entyInstance = null
  }
}
export {
  KrigingInstance
}

3、结果展示