源码在Build文件下，打开源码发现，工程是基于webpack的：
前端小白一枚，根本没用过webpack工具，于是放弃了，不过回头看工程介绍：
惊讶到自己了，cesium什么时候已经内置等高线了？？？赶紧看示例，还真有，平时官网demo都不注意看的后果啊，尤其是每个版本更新log，先看demo是这个：
demo不仅绘制等高线，还绘制坡度图，我们看下效果：
地形原貌，与添加等高线对比效果：
高程渐变与添加等高线效果：
坡度渐变与添加等高线效果：
效果是不是很酷啊，尤其是坡度渐变图。
查看代码，主要是下面三个函数：
getElevationContourMaterial：高程渐变材质
getSlopeContourMaterial：坡度渐变材质
getColorRamp：相应材质贴图。
cesium材质提供了：elevationRampMaterial、slopeRampMaterial、contourMaterial三种类型。这三种材质直接改变globe.material，因此作用范围是全球范围，这个有点不灵活，不知道能否改进下，设置自定义范围。还有就是等高线加标注就更完美了！
function getElevationContourMater
ial() {
// Creates a composite material with both elevation
shading and contour lines
return new Cesium.Material({
fabric: {
type:
'ElevationColorContour',
materials: {
contourMaterial: {
type: 'ElevationContour'
},
elevationRampMaterial: {
type: 'ElevationRamp'
}
},
components: {
diffuse: 'contourMaterial.alpha == 0.0 ?
elevationRampMaterial.diffuse : contourMaterial.diffuse',
alpha: 'max(contourMaterial.alpha,
elevationRampMaterial.alpha)'
}
},
translucent: false
});
}
function getSlopeContourMaterial() {
// Creates a composite material with both slope
shading and contour lines
return new Cesium.Material({
fabric: {
type:
'SlopeColorContour',
materials: {
contourMaterial: {
type: 'ElevationContour'
},
slopeRampMaterial: {
type: 'SlopeRamp'
}
},
components: {
diffuse: 'contourMaterial.alpha == 0.0 ? slopeRampMaterial.diffuse
: contourMaterial.diffuse',
alpha: 'max(contourMaterial.alpha, slopeRampMaterial.alpha)'
}
},
translucent: false
});
}
var elevationRamp = [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
var slopeRamp = [0.0, 0.29, 0.5, Math.sqrt(2)/2, 0.87, 0.91,
1.0];
function getColorRamp(selectedShading) {
var ramp =
document_createElement_x_x_x_x('canvas');
ramp.width = 100;
ramp.height = 1;
var ctx = ramp.getContext('2d');
var values = selectedShading === 'elevation' ?
elevationRamp : slopeRamp;
var grd = 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;
ctx.fillRect(0, 0, 100, 1);
return ramp;
}
基于demo在自己dem数据做测试发现，高程渐变可以正常显示，但是坡度渐变无法正常显示，效果很差，不知道什么原因。后面用到再仔细琢磨吧！下面是自己dem数据绘制效果：
高程渐变：
坡度渐变：
可以看到坡度无法正常显示，是不是因为设置贴图的等级分级问题，以后再研究吧！
最后还是自己示例源码：
git源码
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，
代码交流小伙伴在公众号发消息，我会一一回复的。
