cesium直接加载TIFF地图影像

项目场景：

遇到了一个需求： 就是用cesium加载TIFF影像，本来主流的方式是后台切片发布服务，前端直接调用服务加载就行，但是 后台直接给了我一个tif文件，就需要前端来进行绘图渲染了

---

问题描述

做之前先上网查看了一下有没有相关的文档，查到了某大佬写的文https://blog.youkuaiyun.com/lovefengruoqing/article/details/115306876
给了我思路，但是 执行下来就会遇到各种各样的问题，以下详细说一下：

  const tiff = await fromBlob(blob);
  let image = await tiff.getImage();
  let [west, south, east, north] = image.getBoundingBox();
  const code = image.geoKeys.ProjectedCSTypeGeoKey || image.geoKeys.GeographicTypeGeoKey;
  // 我这里拿到的epsg是32651

所以需要对 方位坐标(west, south, east, north) 的数据进行转换为4326格式的数据,这里用的是proj4 库进行的转换

// 定义 EPSG32651 和 EPSG4326 的投影信息
  proj4.defs('EPSG:32651', '+proj=utm +zone=51 +datum=WGS84 +units=m +no_defs');
  proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs');

  // 进行坐标转换
  const utmCoords = [west, south]; // 组合坐标
  const utmCoords1 = [east, north]; // 组合坐标

  // 注意这两条数据 后面绘制图片区域时要用！！！
  const convertedCoords = proj4('EPSG:32651', 'EPSG:4326', utmCoords);
  const convertedCoords1 = proj4('EPSG:32651', 'EPSG:4326', utmCoords1);

接下来就是要用canvas绘制图像了

  // 注意这一步，有坑***1.0
  const [red = [], green = [], blue = []] = await image.readRasters();
  // 将像素信息写入canvas
  const canvas = document.createElement('canvas');
  let width = image.getWidth();
  let height = image.getHeight();
  canvas.width = width;
  canvas.height = height