Cesium tif上球

最新推荐文章于 2024-08-14 00:15:00 发布

贾彦亮

最新推荐文章于 2024-08-14 00:15:00 发布

阅读量207

点赞数 1

分类专栏： Cesium 文章标签：前端 javascript linux

本文链接：https://blog.csdn.net/weixin_45461004/article/details/137027407

版权

Cesium 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

方法一

setTifFn 函数封装

const setTifFn = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  axios.get('/tif/航空站/0e87918e39ee449eb721fb0f4d2b4980.tif', { responseType: 'blob' }).then(async (res: any) => {
    const tiff = await fromBlob(res.data);
    let image = await tiff.getImage();
    let [west, south, east, north] = image.getBoundingBox();
    const code = image.geoKeys.ProjectedCSTypeGeoKey || image.geoKeys.GeographicTypeGeoKey;
    const [red = [], green = [], blue = []] = await image.readRasters();
    const canvas = document.createElement('canvas');
    let width = image.getWidth();
    let height = image.getHeight();
    canvas.width = width;
    canvas.height = height;
    let ctx: any = canvas.getContext('2d');
    let imageData = ctx.createImageData(width, height);
    for (var i = 0; i < imageData.data.length / 4; i += 1) {
      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 rectangle = window.Cesium.Rectangle.fromDegrees(west, south, east, north);
    let du = canvas.toDataURL();
    window.Viewer.imageryLayers.addImageryProvider(
      new window.Cesium.SingleTileImageryProvider({
        url: du,
        rectangle
      })
    );
    window.Viewer.camera.setView({
      destination: rectangle
    });
    loading.close();
  });
};

geotiff.js

https://github.com/geotiffjs/geotiff.js

方法二

if (data.mbnm) {
    this.targetId = String(data.mbnm);
    this.$refs.targetDetails.getApiSelectTargetDetail(data.mbnm, res => {
      let geoServerData = res.geoserverImageList[0].fwdz.split('?layers=');
      _this.tifLayer = new Cesium.WebMapServiceImageryProvider({
        url: process.env.VUE_APP_GEOAPIURL + geoServerData[0],
        layers: 'LFQ:' + geoServerData[1],
        style: 'raster',
        parameters: {
          service: 'WMS',
          format: 'image/png',
          transparent: true
          // srs:'EPSG:4326'
        }
      });
      let dataS = window.viewer.imageryLayers.addImageryProvider(_this.tifLayer);
      _this.defaultCheckedKeys = [2];
      this.layerList.push(dataS);
    });
    this.$refs.targetDetails.TabSwitch(3, data.mbnm);
    this.isdirectoryTreeDetails = true;
  }


  window.earth.imageryLayers.remove(tifAll[i]); // 重置场景