Cesium颜色渐变的围墙

展示图

在这里插入图片描述

功能思路：

1、需要修改的是entity墙的纹理（material）的属性值，使用Cesium 材质相关的类为 MaterialProperty，该类中ImageMaterialProperty图片纹理功能；
主要有下面属性：

a、image 值可以是URL，Canvas,或者Video
b、repeat 值为一个二位数，分别表示X,y方向的重复次数，例如new Cartesian2(2.0, 1.0)表示x方向重复2次,y方向重复1次
c、color 设置颜色之后，会在图片上覆盖一层设置的颜色
d、transparent 是否透明，纹理为png图片的时候可以设置

2、创建一个Canvas，根据Canvas的属性设置一张颜色渐变的图片；
canvas的addColorStop(stop,color)方法完成颜色渐变，如下

stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在 stop 位置显示的 CSS 颜色值。

3、最后将Canvas赋值到墙的material中。

完整代码

wall代码

var rgba = Cesium.Color.fromCssColorString('#00FF33');
var lat = 32.482460726755672;
var lon = 118.92318511515712;
var walls= viewer.entities.add({
  wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([lon, lat, 200.0,
		lon + 0.0182, lat, 200.0,
		lon + 0.0182, lat - 0.0182, 200.0,
		lon, lat - 0.0182, 200.0,
		lon, lat, 200.0
	]),
   maximumHeights:[500, 500, 500, 500, 500],
   minimumHeights:[0, 0, 0, 0, 0],
    material: new Cesium.ImageMaterialProperty({
		transparent:true,//设置透明
		image:getColorRamp({
			0.0:rgba.withAlpha(1.0).toCssColorString().replace(')',',1.0)'),
			0.045:rgba.withAlpha(0.8).toCssColorString(),
			0.1:rgba.withAlpha(0.6).toCssColorString(),
			0.15:rgba.withAlpha(0.4).toCssColorString(),
			0.37:rgba.withAlpha(0.2).toCssColorString(),
			0.54:rgba.withAlpha(0.1).toCssColorString(),
			1.0:rgba.withAlpha(0).toCssColorString()
		})//Canvas
	}),
  }
});
viewer.zoomTo(walls);

Canvas代码：

function getColorRamp(val){
	if(val==null){
		val={0.0:"blue",0.1:"cyan",0.37:"lime",0.54:"yellow",1:"red"}
	}
	var ramp=document.createElement('canvas');
	ramp.width=1;
	ramp.height=100;
	var ctx=ramp.getContext('2d');
	var grd=ctx.createLinearGradient(0,0,0,100);
	for(var key in val){
		grd.addColorStop(1-Number(key),val[key]);					
	}
	ctx.fillStyle=grd;
	ctx.fillRect(0,0,1,100);
	return ramp;
}

本文转自 https://blog.csdn.net/qq_35984445/article/details/118112693?spm=1001.2014.3001.5502，如有侵权，请联系删除。