加载中…Cesium学习笔记-工具篇15-Elevation等高线绘制
(2018-08-21 21:43:09)
标签：
cesiumelevationcesium等高线cesium坡度globematerials |
分类： Cesium |
今天和大家学习下cesium如何绘制等高线。原来做cs系统用过wContour工具求过雨量等值线，最近想在cesium上绘制地形等高线，首先在github上搜索，还真有大牛贡献轮子：cesium-elevation-gradient，绘制效果：
// 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
});
// 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 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;
http://s14/mw690/006pZnPwzy7n0Hfz19z4d&690
惊讶到自己了，cesium什么时候已经内置等高线了？？？赶紧看示例，还真有，平时官网demo都不注意看的后果啊，尤其是每个版本更新log，先看demo是这个：
惊讶到自己了，cesium什么时候已经内置等高线了？？？赶紧看示例，还真有，平时官网demo都不注意看的后果啊，尤其是每个版本更新log，先看demo是这个：
地形原貌，与添加等高线对比效果：
效果是不是很酷啊，尤其是坡度渐变图。
查看代码，主要是下面三个函数：
getElevationContourMaterial：高程渐变材质
getSlopeContourMaterial：坡度渐变材质
getColorRamp：相应材质贴图。
cesium材质提供了：elevationRampMaterial、slopeRampMaterial、contourMaterial三种类型。这三种材质直接改变globe.material，因此作用范围是全球范围，这个有点不灵活，不知道能否改进下，设置自定义范围。还有就是等高线加标注就更完美了！
function getElevationContourMaterial() {
}
function getSlopeContourMaterial() {
}
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) {
}
基于demo在自己dem数据做测试发现，高程渐变可以正常显示，但是坡度渐变无法正常显示，效果很差，不知道什么原因。后面用到再仔细琢磨吧！下面是自己dem数据绘制效果：高程渐变：
http://s9/mw690/006pZnPwzy7n0IKMqF2b8&690
坡度渐变：
http://s11/mw690/006pZnPwzy7n0IM2pbI2a&690
可以看到坡度无法正常显示，是不是因为设置贴图的等级分级问题，以后再研究吧！
最后还是自己示例源码：git源码
坡度渐变：
http://s11/mw690/006pZnPwzy7n0IM2pbI2a&690
可以看到坡度无法正常显示，是不是因为设置贴图的等级分级问题，以后再研究吧！
最后还是自己示例源码：git源码
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
喜欢
0
赠金笔