在Cesium中创建渐变色墙体效果

效果如下：

实现思路

为了实现墙体的渐变色效果，我们需要完成以下步骤：

1. 定义墙体的位置和高度：通过经纬度坐标和高度值指定墙体的边界。

2. 创建渐变色纹理：使用HTML5的canvas元素生成垂直渐变的纹理。

3. 将纹理应用于墙体材质：利用Cesium的ImageMaterialProperty将生成的纹理设置为墙体的材质。

代码实现

定义墙体位置

墙体的位置由一系列经纬度坐标和高度值组成。我们使用Cesium的Cartesian3.fromDegreesArrayHeights方法将这些数据转换为三维空间中的点。

let positions = [118.47902832652349, 24.44585889405662, 10,118.47930870673423, 24.445683353547352, 10,118.47910614876766, 24.445472698536705, 10,118.47887054285178, 24.445695846684394, 10,118.47902832652349, 24.44585889405662, 10,
];

创建渐变色纹理

我们使用HTML5的canvas元素来生成渐变色纹理。通过createLinearGradient方法创建一个垂直渐变，并在不同的位置添加颜色停止点。为了实现从底部到顶部的透明度渐变，我们将颜色的透明度从1逐渐降低到0。

function getColorRamp(val) {const ramp = document.createElement('canvas');ramp.width = 1; // 宽度为 1 像素ramp.height = 100; // 高度为 100 像素const ctx = ramp.getContext("2d");const grd = ctx.createLinearGradient(0, 0, 0, 100);for (let key in val) {grd.addColorStop(1 - Number(key), val[key]); // 反转颜色位置}ctx.fillStyle = grd;ctx.fillRect(0, 0, 1, 100);return ramp;
}

应用渐变色纹理到墙体

使用Cesium的ImageMaterialProperty将生成的渐变色纹理设置为墙体的材质。我们定义了一个白色墙体，并通过withAlpha方法调整颜色的透明度，生成渐变色的CSS颜色字符串。

const color = Cesium.Color.WHITE;
let wall = viewer.entities.add({wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),material: new Cesium.ImageMaterialProperty({transparent: true,image: getColorRamp({0.0: color.withAlpha(1.0).toCssColorString(),0.2: color.withAlpha(0.8).toCssColorString(),0.4: color.withAlpha(0.6).toCssColorString(),0.6: color.withAlpha(0.4).toCssColorString(),0.8: color.withAlpha(0.2).toCssColorString(),1.0: color.withAlpha(0.0).toCssColorString(),})}),}
});
viewer.zoomTo(wall);