做视频网站资源采集,网页效果图设计流程,小程序注册了怎么注销,做织梦网站的心得体会项目场景#xff1a;
在Gis项目关于tif影像数据是不能直接在地图上面加载,只能通过后端进行处理,或者前端进行处理之后才能叠加到地图上面! 处理方式
1.安装geotiff插件
npm install geotiff -g2.利用插件处理tif文件
import GeoTIFF, { fromBlob, fromUrl, fromArrayBuff…项目场景
在Gis项目关于tif影像数据是不能直接在地图上面加载,只能通过后端进行处理,或者前端进行处理之后才能叠加到地图上面! 处理方式
1.安装geotiff插件
npm install geotiff -g2.利用插件处理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(): Promiseany {return await this.img.readRasters();}getWidthHeight(): { width: number; height: number } {return { width: this.img.getWidth(), height: this.img.getHeight() };}
}3上传文件
Dragger {...uploadProps}p classNameant-upload-hint style{{ color: white }}파일을 드래그 앤 드롭하여 업로드 하세요./p
/Dragger4核心处理
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);},};
