使用渐变纹理
官方示例
在渲染地形的时候，我们会使用渐变的纹理，区分不同的高度，官方给了一个示例,本地路径：Globe Materials
分析
这里代码给了一坨，整体浏览一下，理一理思路，简单来讲是这样的 加载数据–>根据参数生成一张渐变的图–>将图赋值到纹理上，OK，那关键的函数就是生成图的函数getColorRamp，添加物体(cesium编程入门(五)绘制形状)和设置材质(cesium编程入门(八)设置材质)都已经介绍过，
看看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'); //black
grd.addColorStop(values[1], '#2747E0'); //blue
grd.addColorStop(values[2], '#D33B7D'); //pink
grd.addColorStop(values[3], '#D33038'); //red
grd.addColorStop(values[4], '#FF9742'); //orange
grd.addColorStop(values[5], '#ffd700'); //yellow
grd.addColorStop(values[6], '#ffffff'); //white
ctx.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 
tga格式的贴图有研究怎么gltf加载吗
另外请教一下cesium自定义xyz离线切片的有例子吗，就是我有一份切片数据，我知道切图比例尺 顶点这些，需要自己组合url，谢谢
http://cesium.xin/wordpress/archives/339
渐变纹理不能添加透明属性吗?? /(ㄒoㄒ)\
viewer.entities.add({
name: ‘Red wall at height1’,
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: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
})
}
});
搞定搞定,谢谢了啊 老哥
能不能让这三个样式 换成不同的色系 同时显示呢
改下颜色就行了撒
您显示了三个样式 一个是透明的横向渐变，一个是不透明的横向渐变，一个是不透明的纵向渐变，这三个都是同一个色系，请问一下什么属性能让他们三个换成不同的色系显示么
看看在哪里绑定的颜色，改一下就行了撒
能帮我看看问题出在哪么 redWalls 这个墙怎么也调用不了getColorRamp1这个canvas
var redWalls = viewer.entities.add({
name: ‘the Red wall at height1’,
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
116.232575,39.535532,0.0,
116.232785,39.535532,0.0,
116.232890,39.535532,0.0,
]),
minimumHeights: [200.0, 200.0,200.0],//高度
material:new Cesium.ImageMaterialProperty({
// image:”2.png”,
image:getColorRamp1([0.01, 0.02, 0.03, 0.04, 0.05], true),
transparent:true
})
}
});
function getColorRamp1(elevationRamp1, isVertical = true) {
var ramp1 = document.createElement(‘canvas’);
ramp1.width = isVertical ? 1 : 100;
ramp1.height = isVertical ? 10 : 1;
var ctx1 = ramp1.getContext(‘2d’);
ctx1.rect(0, 0, 1, 100);
ctx1.fillStyle=”white”;
ctx1.fill();
var values1 = elevationRamp1;
var grd1 = isVertical ? ctx1.createLinearGradient(0, 0, 0, 100) : ctx1.createLinearGradient(0, 0, 100, 0);
grd1.addColorStop(values1[0], ‘#FFFFFF’); //black
//grd.addColorStop(values[0], ‘#000000’); //black
grd1.addColorStop(values1[1], ‘#000000’); //blue
grd1.addColorStop(values1[2], ‘#FF00FF’); //pink
grd1.addColorStop(values1[3], ‘#00FFFF’); //red
grd1.addColorStop(values1[4], ‘#0000FF’); //orange
ctx1.fillStyle = grd1;
if (isVertical)
ctx1.fillRect(0, 0, 1, 100);
else
ctx1.fillRect(0, 0, 100, 1);
return ramp1;
}
请问一下这个透明度的级别怎么设置呀 我这个透明度看不到墙对面的地图
没明白你说的什么意思，什么透明度级别
就是透过加载的纹理墙看不到后面的地图呀 设置子什么参数可以看到呢
设置了 transparent:true,属性 只可以透过一个纹理墙看到另外一个纹理墙 看不到后面的地图，请问设置什么参数可以看到后面的地图呢
到fillRect(0,0,1,100)是纵向的，fillRect(0,0,1,100)是横向的，———–应该是“fillRect(0,0,1,100)是纵向的，fillRect(0,0,100,1)是横向的”吧？
已修改，谢谢指出
麻烦问一下，有什么办法，能够根据某个点的经纬度，得到坡度渲染后该点的坡度值？
想问一下，按照示例，为什么更改canvas设置为height为200，createLinearGradient也设置为200之后，会出现大面积的黑色，按理来说不应该和100和100显示类似的结果吗
var ctx = ramp.getContext(‘2d’);
// 增加
ctx.rect(0, 0, 1, 200);
ctx.fillStyle=”white”;
ctx.fill();
var values = elevationRamp;