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

这篇具有很好参考价值的文章主要介绍了关于cesium中tif文件处理加载在三维地图中得方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

在Gis项目关于tif影像数据是不能直接在地图上面加载,只能通过后端进行处理,或者前端进行处理之后才能叠加到地图上面!
关于cesium中tif文件处理加载在三维地图中得方式,cesium,javascript,开发语言,ecmascript文章来源地址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);
    },
  };

到了这里,关于关于cesium中tif文件处理加载在三维地图中得方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 050:cesium加载mapbox卫星地图、mapbox地形地图

    第050个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中加载mapbox卫星地图、mapbox地形地图。 直接复制下面的 vue+cesium源代码,操作2分钟即可运行实现效果. 示例效果

    2023年04月18日
    浏览(83)
  • 【vue3.2+cesium】加载三维天地图

            使用Vite+Vue3.2+Cesium。Vite需要Node.js版本14.18+及以上版本。Vite命令创建的工程会自动生成vite.config.js文件,来配置一些相关的参数。 1、使用Vite创建vue3项目 #  npm npm init vite@latest cesium-app -- --template vue #  yarn  yarn create vite cesium-app --template vue #  pnpm  pnpm create vite cesium

    2024年02月11日
    浏览(52)
  • Cesium地图上加载3DTiles模型

    1,使用Blender创建模型: 官网下载Blender:https://www.blender.org/,在Github上下载Building Tools插件,通过编辑-偏好设置-插件-安装,导入压缩包使用,这个可以自己创建小房子,文件-导出为obj格式 2,将.obj转成3dtiles格式: 1,第一种方法通过加载本地文件展示: 1,github下载ObjTo3

    2024年02月03日
    浏览(41)
  • 【UE4 Cesium】加载离线地图

    主体思路:先使用水经注软件下载瓦片数据,再使用Python转换瓦片数据格式(TMS),使用Nginx发布网络服务,最后将网络服务加载到UE中。 步骤: 使用水经注下载瓦片数据,这里下载的是全球七级地图存放在/map文件夹内 用python install GDAL(Whl文件下载地址:https://www.lfd.uci.e

    2024年02月15日
    浏览(50)
  • 三维GIS开发:利用Cesium加载 M3D 地质体模型(附代码)

    实现步骤 Step 1.  引用开发库 : 本示例引用 local 本地【include-cesium-local.js】开发库,完成此步骤后才可调用三维 WebGL 的功能; Step 2.  创建布局 : 创建 id=\\\'GlobeView\\\' 的 div 作为三维视图的容器,并设置其样式; Step 3.  构造三维场景控件 : 实例化 Cesium.WebSceneControl 对象,完成

    2024年02月10日
    浏览(40)
  • 在UE5中使用Cesium插件加载谷歌全景地图

    虚幻引擎5(UE5)是一款强大的游戏开发引擎,它提供了许多功能和插件来创建逼真的游戏世界。其中,Cesium是一款流行的地理信息系统(GIS)工具集,它允许您加载和展示地理数据。本文将介绍如何在UE5中使用Cesium插件加载谷歌全景地图,为您打造更逼真的游戏环境。 一、

    2024年02月13日
    浏览(44)
  • vue中加载使用cesium加载3dTileset以及三维模型移动(1.108版本)

    加载三维模型 视频参考地址: https://www.bilibili.com/video/BV14g411s7DX/?spm_id_from=333.1007.top_right_bar_window_history.content.clickvd_source=4716b12357fe8e4b33b293b4bbbbfcd8

    2024年01月23日
    浏览(42)
  • 如何将测绘数据加载到三维地图中,解决海量测绘数据在线管理难题?

    《四维轻云》是四川兴域技术团队基于浏览器打造的一款地理空间数据在线管理平台,可实现TB级大规模倾斜摄影三维模型、正射影像、激光点云、数字高程模型等数据在线发布、管理及分享,并支持私有化部署和高阶功能定制化开发,解决了海量测绘数据在线管理难题。 在

    2024年02月08日
    浏览(56)
  • cesium 3dtile的处理以及加载

    1. 文件处理 如需3dtiles文件,请私聊我哦,或者vx Kii-MichstaBe 加我。文件转换成3dtiles的话推荐: Cesium3DTilesConverter 或者cesiumlab 处理完成为以下格式的文件: 2. 代理: 下载nginx 解压到D盘根目录 把转好的3dtiles放到nginx的根目录下 打开nginx/conf/nginx.conf并修改 然后保存退出在ngi

    2024年02月15日
    浏览(36)
  • vue中使用cesium 加载shp文件

    在cesium中加载shp文件,将shp文件打包为zip,直接加载zip文件,shp文件中需包含这四个文件 加载代码  

    2024年02月12日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包