Cesium 多边形渐变色纹理（Canvas）

可以直接使用：Cesium.ImageMaterialProperty(options)方法给Material赋值。

// 绘制canvas渐变（这里用的是 径向/圆 渐变）
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
    
  let ctx = canvas.getContext("2d");
  var grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) // 创建一个渐变色径向/圆对象
  grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色
  grad.addColorStop(0.25, "rgba(327,201,64,1)");
  grad.addColorStop(0.5, "rgba(22,184,200,1)");
  grad.addColorStop(1, "rgba(82,67,192,1)");
  ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
  ctx.fillRect(0, 0, 500, 500); // 绘制渐变图形
}

// 绘制多边形
viewer.entities.add({
    
  polygon: {
    
    // 获取指定属性（positions，holes（图形内需要挖空的区域））
    hierarchy: {
    
      positions: Cesium.Cartesian3.fromDegreesArray([
        120.9677706, 30.7985748,
        110.20, 34.55,
        120.20, 50.55
      ]),
    },
    extrudedHeight: 0.0,
    // 这里可以直接使用canvas元素
    material: new Cesium.ImageMaterialProperty({
    
      image: document.getElementById('myCanvas'),
      transparent: true
    }),
    closeTop: false,
    closeBottom: false
  }
});

// 用完可以删除之前绘制的canvas
document.getElementById('myCanvas').remove();

canvas 填充渐变，请看我另一篇文章：点击查看