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，如有侵權，請聯系刪除。