关于cesium中tif文件处理加载在三维地图中得方式

项目场景：

在Gis项目关于tif影像数据是不能直接在地图上面加载,只能通过后端进行处理,或者前端进行处理之后才能叠加到地图上面!

---

处理方式

1.安装geotiff插件

npm install geotiff -g

2.利用插件处理tif文件

import GeoTIFF, { fromBlob, fromUrl, fromArrayBuffer } from 'geotiff';
import GeoTIFFImage from 'geotiff/dist-node/geotiffimage';
export default class GeoTiffUtil {
  tiff: GeoTIFF;
  img: GeoTIFFImage;
  constructor() {}
  async init(blob: string) {
    //this.tiff = await fromBlob(blob);

    let response = await fetch(blob);

    let af = await response.arrayBuffer();

    this.tiff = await fromArrayBuffer(af);
    this.img = await this.tiff.getImage();
  }
  getBbox(): number[] {
    return this.img.getBoundingBox();
  }
  getEPSGCode() {
    return this.img.geoKeys;
  }
  async getRasters(): Promise<any> {
    return await this.img.readRasters();
  }
  getWidthHeight(): { width: number; height: number } {
    return { width: this.img.getWidth(), height: this.img.getHeight() };
  }
}

3上传文件

<Dragger {...uploadProps}>
               <p className="ant-upload-hint" style={{ color: 'white' }}>
                 파일을 드래그 앤 드롭하여 업로드 하세요.
               </p>
</Dragger>

4核心处理

const uploadProps = {
    name: 'file',
    action: '/server/api/file/upload',
    accept: '.png,.jpg,.tif',
    headers: {
      authorization: '',
    },
    data: {
      userAccount: 'userId',
    },
    maxCount: 1,
    onChange(info: { file: any; fileList?: any; }) {
      const { status } = info.file;
      const { file } = info;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
        if (file.response && file.response.code == 200) {
          if (file.response.data.fileSuffix == '.tif') {
            let newUrl = AppConfig.flightUrl1 + file.response.data.fileUrl;
            // const imageryLayer = new Cesium.ImageryLayer(new Cesium.SingleTileImageryProvider({
            //     url: newUrl
            // }));
            // window.cviewer.flyTo(imageryLayer)
            // window.cviewer.imageryLayers.add(imageryLayer);
            console.log(111111111,newUrl)
            let tiffUtil = new GeoTiffUtil();
            tiffUtil.init(newUrl).then(() => {
              let hw = tiffUtil.getWidthHeight();
              tiffUtil
                  .getRasters()
                  .then((rs) => {
                    const [red = [], green = [], blue = []] = rs;
                    let canvas = document.createElement('canvas');
                    canvas.width = hw.width;
                    canvas.height = hw.height;
                    let ctx = canvas.getContext('2d');
                    let imageData = ctx.createImageData(hw.width, hw.height);
                    for (var i = 0; i < imageData.data.length / 4; i++) {
                      imageData.data[i * 4 + 0] = red[i];
                      imageData.data[i * 4 + 1] = green[i] || 0;
                      imageData.data[i * 4 + 2] = blue[i] || 0;
                      imageData.data[i * 4 + 3] = red[i] === 0 ? 0 : 255;
                    }
                    ctx.putImageData(imageData, 0, 0);
                    let temp1 = {
                      key: file.response.fileName,
                      fileNm: file.response.data.fileName,
                      fileNmOriginal: file.name,
                      filePath: canvas.toDataURL(),
                      fielSize: file.size,
                      fielExt: file.response.data.fileSuffix,
                      date:
                          new Date().getFullYear() +
                          '.' +
                          (new Date().getMonth() + 1) +
                          '.' +
                          new Date().getDate(),
                    };
                    console.log(999999,temp1)
                    setData([...data, temp1]);
                  })
                  .catch((res) => {
                    console.log(res);
                  });
            });
          } else {
            let temp = {
              key: file.response.fileName,
              fileNm: file.response.data.fileName,
              fileNmOriginal: file.name,
              filePath: AppConfig.flightUrl1 + file.response.data.fileUrl,
              fielSize: file.size,
              fielExt: file.response.data.fileSuffix,
              date:
                  new Date().getFullYear() +
                  '.' +
                  (new Date().getMonth() + 1) +
                  '.' +
                  new Date().getDate(),
            };
            setData([...data, temp]);
          }
        }
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove: (file) => {
      setfileListobj(null);
    },
  };