cesium地形高程渲染区域配色

let heights = [];
let polygonEntityHeight = null;
// 北41.0595556 南39.4416108 西115.4172226 东117.508 // 习惯以左下为起点，逆时针；下方写的以左上顺时
let x1 = 115.4172226,y1 = 41.0595556, x2 = 117.508, y2 = 41.0595556,
x3 = 117.508, y3 = 39.4416108, x4 = 115.4172226,y4 = 39.4416108;
// 创建十个颜色等级颜色自己随便调合适就好alpha为透明度
// 以北京为例高度太低设置为透明色
const colorMapHeight = [
  {red: 103, green: 62, blue: 150, alpha: 0},   // 低高度
  {red: 103, green: 62, blue: 200, alpha: 0}, // 较低高度
  {red: 103, green: 62, blue: 255, alpha: 0}, // 中等偏低高度
  {red: 103, green: 162, blue: 155, alpha: 153},   // 中等高度
  {red: 103, green: 255, blue: 100, alpha: 153}, // 较高高度
  {red: 255, green: 255, blue: 0, alpha: 153}, // 高高度
  {red: 255, green: 128, blue: 0, alpha: 153}, // 较高高度
  {red: 255, green: 0, blue: 0, alpha: 153},   // 很高高度
  {red: 128, green: 0, blue: 128, alpha: 153}, // 极高高度
  {red: 255, green: 0, blue: 255, alpha: 153}  // 最高高度
];
 
const toCanvasHeight = () => {
  const w = 50;
  const h = 50;
  const canvas = document.createElement("canvas");
  canvas.height = h;
  canvas.width = w;
  const ctx = canvas.getContext("2d");
  const bitmap = new Uint8ClampedArray(w * h * 4);
  const minHeight = Math.min(...heights);
  const maxHeight = Math.max(...heights);
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const height = heights[y * w + x] || minHeight; // 默认值为最小高度
      const normalizedHeight = (height - minHeight) / (maxHeight - minHeight); // 归一化高度
      // 根据归一化高度选择颜色
      const colorIndex = Math.floor(normalizedHeight * (colorMapHeight.length - 1));
      const color = colorMapHeight[colorIndex];
      const bitmapIndex = (y * w + x) * 4;
      bitmap[bitmapIndex + 0] = color.red;
      bitmap[bitmapIndex + 1] = color.green;
      bitmap[bitmapIndex + 2] = color.blue;
      bitmap[bitmapIndex + 3] = color.alpha;
    }
  }
  const imageData = new ImageData(bitmap, w, h);
  ctx.putImageData(imageData, 0, 0);
  return canvas;
};
const createMaterialHeight = () => {
  const canvas = toCanvasHeight();
  const positions = [//这里替换需要高程渲染的经纬度 
    Cesium.Cartesian3.fromDegrees(x4, y4),
    Cesium.Cartesian3.fromDegrees(x3, y3),
    Cesium.Cartesian3.fromDegrees(x2, y2),
    Cesium.Cartesian3.fromDegrees(x1, y1),
  ];
  polygonEntityHeight =window.Cesium3DViewer.entities.add({
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(positions),
      material: canvas,
      classificationType: Cesium.ClassificationType.BOTH,
    }
  });
}
const addHeightCanvas = (extent) => {
  // const polygonPosData = turf.getCoord(extent);
  const polygonPosData = extent;
  const rectangle = Cesium.Rectangle.fromDegrees(...polygonPosData);
  const width = 50;
  const height = 50;
  const positions = [];
 
  const dx = (polygonPosData[2] - polygonPosData[0]) / width;
  const dy = (polygonPosData[3] - polygonPosData[1]) / height;
 
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const longitude = Cesium.Math.toDegrees(
          Cesium.Math.lerp(rectangle.west, rectangle.east, x / (width - 1))
      );
      const latitude = Cesium.Math.toDegrees(
          Cesium.Math.lerp(rectangle.north, rectangle.south, y / (height - 1))
      );
 
      positions.push(Cesium.Cartographic.fromDegrees(longitude, latitude));
    }
  }

 const promise =Cesium.sampleTerrainMostDetailed(window.Cesium3DViewer.terrainProvider, positions)
 Promise.resolve(promise).then(
      (updatedPositions) => {
        heights = updatedPositions.map(pos => pos.height);
        createMaterialHeight();
      }
  );
}
export const updateMaterialHeight = () => {
  const extent = [x4, y4, x2, y2];//北京四至范围（左下，右上）
  addHeightCanvas(extent);
}

ps：//使用火星地形http://data.mars3d.cn/terrain不报错，使用自有地形会有报错