cesium

最新推荐文章于 2025-06-06 14:11:03 发布

原创最新推荐文章于 2025-06-06 14:11:03 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gis #javascript #es6

前端，cesium，gis 专栏收录该内容

18 篇文章

订阅专栏

该博客详细介绍了如何利用Cesium进行GIS高程数据的处理，包括加载地形瓦片、生成等高线、高程设色以及坡度设色，并提供了设置色表的方法，适合JavaScript和ES6开发者学习。

https://blog.youkuaiyun.com/weixin_30848775/article/details/98373947

1，绘制高程

var shadingUniforms = {};
material = Cesium.Material.fromType('SlopeRamp');
shadingUniforms = material.uniforms;

加载地形瓦片：

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
    requestWaterMask : true,
    requestVertexNormals : true
});

生成等高线：

var contourUniforms = {};
material = Cesium.Material.fromType('ElevationContour'); //专门绘制高程轮廓
contourUniforms = material.uniforms;   
contourUniforms.width = 1;
contourUniforms.spacing = 500;
contourUniforms.color = Cesium.Color.RED;

高程设色：

var shadingUniforms = {};
material = Cesium.Material.fromType('ElevationRamp');
shadingUniforms = material.uniforms;
shadingUniforms.minHeight = -414.0;
shadingUniforms.maxHeight = 8777;

坡度设色

var shadingUniforms = {};
material = Cesium.Material.fromType('SlopeRamp');
shadingUniforms = material.uniforms;

为高程设色和坡度设色的shadingUniforms添加色表

shadingUniforms.image = getColorRamp(selectedShading);
 
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('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;
}