展示图

功能思路：

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

a、image 值可以是URL，Canvas,或者Videob、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; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。