关于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);},};