关于编辑器:cesium编程使用渐变纹理

举荐：将场景编辑器(NSDT)
退出你的3D开发工具链官网示例在渲染地形的时候，咱们会应用突变的纹理，辨别不同的高度，官网给了一个示例,本地门路：Globe Materials

剖析这里代码给了一坨，整体浏览一下，理一理思路，简略来讲是这样的 加载数据–>依据参数生成一张突变的图–>将图赋值到纹理上，OK，那要害的函数就是生成图的函数getColorRamp，增加物体和设置材质都是入门根底， 能够在网上搜寻下教程。看看fillRect的成果<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#ff0000";
ctx.fillRect(0,0,1,100);
</script>
能够看到fillRect(0,0,1,100)是纵向的，fillRect(0,0,100,1)是横向的，好，上面来实际操作一下，当初咱们就来绘制一面墙，并应用突变来填充它//增加物体
var redWall = viewer.entities.add({

name: 'Red wall at height',wall: {    positions: Cesium.Cartesian3.fromDegreesArrayHeights([        121.444409, 31.247417, 200.0,        121.533521, 31.235685, 200.0,        121.563273, 31.190347, 200.0,        121.546744, 31.194054, 200.0,        121.516705, 31.191459, 200.0,        121.502188, 31.203074, 200.0    ]),    minimumHeights: [3000.0, 2000.0, 2000, 2000, 2000, 3000],    material: getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0],true)}

});

//纹理图绘制
function getColorRamp(elevationRamp) {

var ramp = document.createElement('canvas');ramp.width = 1;ramp.height = 100;var ctx = ramp.getContext('2d');var values = elevationRamp;var grd = ctx.createLinearGradient(0, 0, 0, 100);grd.addColorStop(values[0], '#000000'); //blackgrd.addColorStop(values[1], '#2747E0'); //bluegrd.addColorStop(values[2], '#D33B7D'); //pinkgrd.addColorStop(values[3], '#D33038'); //redgrd.addColorStop(values[4], '#FF9742'); //orangegrd.addColorStop(values[5], '#ffd700'); //yellowgrd.addColorStop(values[6], '#ffffff'); //whitectx.fillStyle = grd;ctx.fillRect(0, 0, 1, 100);return ramp;

}

后果：

当然，也能够增加通明纹理，只须要这样var redWall = viewer.entities.add({
name: 'Red wall at height1',
wall: {

positions: Cesium.Cartesian3.fromDegreesArrayHeights([...]),minimumHeights: [...],material:new Cesium.ImageMaterialProperty({  // image:"2.png",  image:getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0], true),  transparent:true})

}
});

//改几个色阶
grd.addColorStop(values[5], 'transparent'); //yellow

参考源码