可以直接使用: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 填充渐变,请看我另一篇文章:点击查看