cesium区域高程渲染

cesium官网提供了高程渲染的demo  渲染的全球的地形,没有找到渲染部分区域的功能

下面是实现区域的高程渲染的示例

npm i @turf/turf

//下载引入turf 获取地形信息
import * as turf from "@turf/turf";

const heights = ref([]);
let polygonEntityHeight = null;
const addHeightCanvas = (extent) => {
  const polygonPosData = turf.getCoord(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));
    }
  }

  Cesium.sampleTerrainMostDetailed(_viewer.terrainProvider, positions).then(
      (updatedPositions) => {
        heights.value = updatedPositions.map(pos => pos.height);
        createMaterialHeight();
      }
  );
}

const createMaterialHeight = () => {
  const canvas = toCanvasHeight();
  const positions = [//这里替换需要高程渲染的经纬度 
    Cesium.Cartesian3.fromDegrees(x1, y1),
    Cesium.Cartesian3.fromDegrees(x2, y2),
    Cesium.Cartesian3.fromDegrees(x3, y3),
    Cesium.Cartesian3.fromDegrees(x4, y4),
  ];
  polygonEntityHeight = _viewer.entities.add({
    polygon: {
      hierarchy: new Cesium.PolygonHierarchy(positions),
      material: canvas,
      classificationType: Cesium.ClassificationType.BOTH,
    }
  });
}
// 创建十个颜色等级颜色自己随便调合适就好alpha为透明度
const colorMapHeight = [
  {red: 103, green: 62, blue: 150, alpha: 153},   // 低高度
  {red: 103, green: 62, blue: 200, alpha: 153}, // 较低高度
  {red: 103, green: 62, blue: 255, alpha: 153}, // 中等偏低高度
  {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.value);
  const maxHeight = Math.max(...heights.value);
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const height = heights.value[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 updateMaterialHeight = () => {//106.301334, 29.73894 106.331005, 29.773777
  const extent = turf.square([x1, y1, x2, y2]); // 设置你要处理的矩形区域,对角的两组坐标
  addHeightCanvas(extent);
}

这样能进行区域的高程渲染,但是性能不是很好,有更好的方法欢迎讨论