Cesium-地球材质-坡度

原创已于 2024-12-06 16:21:21 修改

· 1k 阅读

6 ·

版权

文章标签：

#cesium #javascript

于 2024-12-06 16:17:10 首次发布

1. 创建viewer

创建viewer并添加地形

const viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(3956, {
    requestVertexNormals: true
  })
});

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"); //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;
}

3. 创建材质

使用Cesium.Material.fromType方法创建材质

const material = Cesium.Material.fromType("SlopeRamp",{
  image:getColorRamp('slope'),
});

把材质附加到地球上

viewer.scene.globe.material = material;

链接地址

https://sandcastle.cesium.com/#c=jVXbkho3EP0VFXkwVBEx9wsLW0nWl3KVnaS8Lr8YP2hnGlBZSFgS4I2Lf3dLGi5LNlR40IxafU5r+nQ3jZLGki2HHWgyJRJ25A4M36zoJ2/rz3qN398paRmXoGe9Ifkxk4RY0Botf2u15S3oMWE7xu0BHh4fn/rQuVart0r+bgzYt20/rfOiYyNEw7cNGPsJtIXvfyq9YsKMidUbcOf7wUzuBzczOZONvzMI2DLLlfzAVmu8+ueIRkOCS5a7R+wX/5qWbs2zIYlp9OXmQGCEWsMFOKm965C8Z3ZJzTdt+8mAjEjizJXnqeMLHmbW0NhLIrdkbik81COPwPlGNu7qZAH2TgmlHbpv8JMaC+39krVcLgYhMSGIDvStajYrkJY2GpiFVwLczonE5JaZWc9liHhvuuOtXSImjqKTcQl8sbTOenMib+x3tPhzfyGJAjjSpA2EzlMAlgkTqJAH8jm5vC+ZTqdk1jvqgtiDtAGIMZ6I5on2aDNwhc/L9BzXUb//xxNkeo7oJGBgCh8cUrPQLXpggrqMv8MWYPqNRmaXeKf10GUYnyH1CKCsbb2q91at+yHM5+jLEC/xS+R/Lq1kNHoQrPl6DRQHUFJm5asTKDTEf2GSgHmZpn+ULzvMmsurcdIjJkqrDqOhvQbJAuT167rMkg6iNJOLq5fLA2o+b8tjFh5BCLW7hioOKPfrULslt9ApherMuRD39lEAqoU0N+f2D6juuVLxoaY12I2WvvDRsj/NlhUqrTkTSNaNs/edxU+wj49rwPa4PxQgjkRfU3zFFjB+0tMvfJW+GAyP0yvMWmoakEAXQj0APQt3eD13bdgKNKM4Mt1M7vtQLU5KLn0rjc+n9h3D6Wk4k2k/VHlSJXFe0qIuoqqqo7oYBntepLhPaFbkeZ2VUdrZk7qsyrSgcVVkZZrHwT7wq9Ku6LugXRctwTfZmGQUqzQpMFCRZlgUZUe45rZZjsmvOBOTqKjrqsqrvC7iOukctBJiTAqaVFGaRXme5VVZ57k/3Ye89Ya9iXHq3gYIIb/x1VppSzZa9CkdWVitBabOjB42zVfA+WhM6EdCJqNz6KTlW8Lb6TP/a6QRzBg8mW+wmPg/OHVuJyP0/xdUKP/Rf21BC/bo3Jbx7btgpJRORrh9HmmVEg9MXzD/BA