1. 创建viewer
创建viewer并添加地形
const viewer = new Cesium.Viewer("cesiumContainer", {terrain: Cesium.Terrain.fromWorldTerrain({requestVertexNormals: true, //Needed to visualize slope}),
});2. 创建canvas色条
添加getColorRamp方法，创建canvas，按比例添加颜色值
const elevationRamp = [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];
const slopeRamp = [0.0, 0.29, 0.5, Math.sqrt(2) / 2, 0.87, 0.91, 1.0];
const aspectRamp = [0.0, 0.2, 0.4, 0.6, 0.8, 0.9, 1.0];
function getColorRamp(selectedShading) {const ramp = document.createElement("canvas");ramp.width = 100;ramp.height = 1;const ctx = ramp.getContext("2d");let values;if (selectedShading === "elevation") {values = elevationRamp;} else if (selectedShading === "slope") {values = slopeRamp;} else if (selectedShading === "aspect") {values = aspectRamp;}const grd = ctx.createLinearGradient(0, 0, 100, 0);grd.addColorStop(values[0], "#000000"); //blackgrd.addColorStop(values[1], "#2747E0"); //bluegrd.addColorStop(values[2], "#D33B7D"); //pinkgrd.addColorStop(values[3], "#D33038"); //redgrd.addColorStop(values[4], "#FF9742"); //orangegrd.addColorStop(values[5], "#ffd700"); //yellowgrd.addColorStop(values[6], "#ffffff"); //whitectx.fillStyle = grd;ctx.fillRect(0, 0, 100, 1);return ramp;
}3. 创建材质
使用Cesium.Material.fromType方法创建材质
const minHeight = -414.0; // approximate dead sea elevation
const maxHeight = 8777.0; // approximate everest elevationconst material = Cesium.Material.fromType("ElevationRamp",{image:getColorRamp('elevation'),minimumHeight:minHeight,maximumHeight:maxHeight
});把材质附加到地球上
viewer.scene.globe.material = material;
链接地址
https://sandcastle.cesium.com/#c=jVVZbxs3EP4rhPoQGVCovQ/JNoo6TvuQA4iD9CHKA707kohwlxuSK9kt9N8zJFdHXEGoHqjlcL6Pwzkr2WpDNhy2oMgNaWFL7kDzvqFfnGy8GFVufydbw3gLajGakH8XLSEGlELJbA/47Pd0qWTzt1SiHgRjp02Igh89aPMFlIGnD1I1TOgZMaqHCZlOPwDUUBMj0RjdM8H/AaKF7MCCd1eTRbu7mi/aRVs5ixve/gV8tTZo9OskTGgwRxLCuk7JJ94wA6QGVhMNjICADTNcHsHs6QAu8jw/A4YNKDT2FLtHH0SfWNMhw9eABhOCS5Lav9At7jPO7ZomExLS4Nt8T+Ce9QIclU51Qt4zs6b6hzLj6IpMSWTFheMpwxc8THdQmZdEdknskjmoQx6Ay76trOlkBeZOCqkseqzxSZWB+mHNat6urnx8/SXK09ey6htoDa0UoH/uBdidzQ7WbphejGxwiNOmW16bNWLCIDgK13uHh/MjeWWeUOLOnUEtZoYljWpPaDUFYH4yganjgHxJXtpLbm5uyGJ0DNVoeAEZgHjHL0FzRDuUabjA57PvDNchfv+Px4fpHNExgJ7JP9i7ZqVq1EAHDR5/h7XH1J8Kma3jbawn1sP4712PAMrq2kX1wchu7K/5GnyboBG/Be5n3Yqp/ihY9f0SKPSgKE/y+yOoh0uYyGPexPEf+ZsB0/H24j3xARPExYBRUF+CJB7y9m2ZJ9EAkYq1q4vGpR61XNb5wQvPIITcXkJle5T9DajtmhsYIoXRWXIhHsyzAIwW0sxP5Z8wuqeRCvc5rcD0qnWJj5LdSVvDSCvOBJINXfX9IHFt9fNzB1ge96fJjP3Y5RX2rRXMfqnrV4esf2UbKLFdkzd945vf7NBD/Rl7Oj3bt8hD3/UzguoKWqArIR+Bnli7/zxVrVgDilENxs4SPwZqbKq8dTbNTqfNHcOpoDlr47EvkqiIwjSnWZkFRVEGZTbx8jSLcR/RJEvTMsmDeJBHZV7kcUbDIkvyOA293D9bKlszw6VDEa7B1eiMJBSTPMrwoixOMKfygbDjplrPyGtsqVGQlWVRpEVaZmEZDQpKCjEjGY2KIE6CNE3SIi/T1J3u/LwaTUbX2ibHrYcQ8jtvOqkM6ZUYUzo10HQCXaenj331HbC9au3LmZDr6Sn0uuYbwuubM/OYVIJpjSfLHnMRB+didHs9Rf3/QIV0j/6Iw02wZ6u2Dm/feSGl9HqK2/NII6V4ZOoF808