项目场景:
在Gis项目关于tif影像数据是不能直接在地图上面加载,只能通过后端进行处理,或者前端进行处理之后才能叠加到地图上面!
文章来源地址https://www.toymoban.com/news/detail-681469.html
处理方式
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);
},
};
文章来源:https://www.toymoban.com/news/detail-681469.html
到了这里,关于关于cesium中tif文件处理加载在三维地图中得方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!