cesium编程中级(四)使用渐变纹理

使用渐变纹理

官方示例

在渲染地形的时候,我们会使用渐变的纹理,区分不同的高度,官方给了一个示例,本地路径: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>


Your browser does not support the HTML5 canvas tag.

可以看到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   
截图

参考源码

19 thoughts to “cesium编程中级(四)使用渐变纹理”

  1. tga格式的贴图有研究怎么gltf加载吗

    另外请教一下cesium自定义xyz离线切片的有例子吗,就是我有一份切片数据,我知道切图比例尺 顶点这些,需要自己组合url,谢谢

    1. 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
      })
      }
      });

  2. 您显示了三个样式 一个是透明的横向渐变,一个是不透明的横向渐变,一个是不透明的纵向渐变,这三个都是同一个色系,请问一下什么属性能让他们三个换成不同的色系显示么

      1. 能帮我看看问题出在哪么 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;
        }

      1. 设置了 transparent:true,属性 只可以透过一个纹理墙看到另外一个纹理墙 看不到后面的地图,请问设置什么参数可以看到后面的地图呢

  3. 到fillRect(0,0,1,100)是纵向的,fillRect(0,0,1,100)是横向的,———–应该是“fillRect(0,0,1,100)是纵向的,fillRect(0,0,100,1)是横向的”吧?

  4. 想问一下,按照示例,为什么更改canvas设置为height为200,createLinearGradient也设置为200之后,会出现大面积的黑色,按理来说不应该和100和100显示类似的结果吗

发表评论