cesium 多边形渐变颜色

cesium画一个渐变颜色的多边形

方式一：用一张颜色渐变的图片作为材质，结合color属性，可设置多边形的颜色，达到渐变效果。图片指向正北方向。

 viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray([
                        115.000454, 37.000292,
                        114.999768, 37.00046,
                        114.999322, 37.000266,
                        114.999351, 36.999761,
                        115.000598, 36.999793,
                    ]),
                    material: new Cesium.ImageMaterialProperty({
                        image: 'img.png',
                        color: Cesium.Color.fromCssColorString('#f00')
                    }),
                }
            });
           

方式二：如果没有图片，可用canvas实现，此方式控制颜色比较灵活，可以设置颜色区间以及方向等。

viewer.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray([
                        115.000454, 37.000292,
                        114.999768, 37.00046,
                        114.999322, 37.000266,
                        114.999351, 36.999761,
                        115.000598, 36.999793,
                    ]),
                    material: new Cesium.ImageMaterialProperty({
                        image: drawImage(0)
                    }),
                }
            });
            

function drawImage(rotate) {
            var canvas = document.createElement("canvas");
            canvas.width = 256;
            canvas.height = 256;
            let ctx = canvas.getContext("2d");
            var grad = ctx.createLinearGradient(0, 0, 0, 256)
            grad.addColorStop(0, `rgba(255,0,0,0)`);
            grad.addColorStop(1, `rgba(255,0,0,1)`);
            ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
            ctx.fillRect(0, 0, 256, 256); // 绘制渐变图形
            return canvas;
        }

代码下载地址：https://download.csdn.net/download/AllBluefm/88802114