Cesium专栏-地形等高线

关于等高线

等高线指的是地形图上高程相等的相邻各点所连成的闭合曲线。把地面上海拔高度相同的点连成的闭合曲线，并垂直投影到一个水平面上，并按比例缩绘在图纸上，就得到等高线。等高线也可以看作是不同海拔高度的水平面与实际地面的交线，所以等高线是闭合曲线。在等高线上标注的数字为该等高线的海拔。Cesium中的等高线主要是对Material进行操作。

空间分析之地形坡度分析 链接：xiaozhuanlan.com/topic/86723…
空间分析之地形坡向分析 链接：xiaozhuanlan.com/topic/26837…

效果图

具体做法

原理：修改Globe的Material属性，适应于全球的

具体步骤

1、并初始化地球，调用全球地形服务

Cesium.Ion.defaultAccessToken = 'xxxx';
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
    }),
    terrainProvider: Cesium.createWorldTerrain({
        requestVertexNormals: true,
        requestWaterMask: true
    })
});

2、开启深度测试

viewer.scene.globe.enableLighting = true;

3、设置几个等高线必备的参数

var minHeight = -414.0; // 最小高度-例：最低接近死海高度
var maxHeight = 8777.0; // 最大高度-例：最高接近珠峰高度
var contourColor = Cesium.Color.RED.withAlpha(0.4); // 等高线的颜色
var contourSpacing = 200.0; // 等高线的等间距
var contourWidth = 1.0; // 等高线的宽度

4、创建具备等高线样式的Material

var material = Cesium.Material.fromType('ElevationContour');
var contourUniforms = material.uniforms;
contourUniforms.width = contourWidth;
contourUniforms.spacing = contourSpacing;
contourUniforms.color = contourColor;

5、赋值给globe

viewer.scene.globe.material = material;

进一步

添加地形高程的渲染效果

1、创建具备地形渲染样式的Material

var material = Cesium.Material.fromType('ElevationRamp');
var shadingUniforms = material.uniforms;
shadingUniforms.minimumHeight = minHeight;
shadingUniforms.maximumHeight = maxHeight;
shadingUniforms.image = getColorRamp(); // 彩色色带

效果图

更进一步

可以思考一下，如何同时显示这两种效果。

效果图

link==>