cesium中级（一）使用渐变纹理

官网实例
在渲染地形的时候，我们会使用渐变的纹理，来表示不同的地形高度，官网给出的实例为：Globe Material

var viewer = new Cesium.Viewer('cesiumContainer', {
            //2.本地图片
            imageryProvider: new Cesium.SingleTileImageryProvider({
                url: '../img/worldimage.jpg'
            }),
            //geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            creditContainer: "credit",
            timeline: false,
            fullscreenButton: false,
            vrButton: false
        });
        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)
            }
        });

        viewer.entities.add({
            name: 'Red wall at height',
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                    121.554409, 31.247417, 200.0,
                    121.643521, 31.235685, 200.0,
                    121.673273, 31.190347, 200.0,
                    121.656744, 31.194054, 200.0,
                    121.626705, 31.191459, 200.0,
                    121.612188, 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], false)
            }
        });

        viewer.zoomTo(viewer.entities);


        function getColorRamp(elevationRamp, isVertical = true) {
            var ramp = document.createElement('canvas');
            ramp.width = isVertical ? 1 : 100;
            ramp.height = isVertical ? 100 : 1;
            var ctx = ramp.getContext('2d');

            var values = elevationRamp;
            var grd = isVertical ? ctx.createLinearGradient(0, 0, 0, 100) : ctx.createLinearGradient(0, 0, 100, 0);
            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;
            if (isVertical)
                ctx.fillRect(0, 0, 1, 100);
            else
                ctx.fillRect(0, 0, 100, 1);
            return ramp;
        }

getColorRamp函数将生成一张渐变的纹理图，思路是：加载数据——生成一张渐变的图

结果：