cesium 加载tif文件

解析tif后转canvas

  function getFetch(url) {
    axios({
      url,
      method: "GET",
      responseType: "blob",
    }).then((res) => {
      const blob = new Blob([res.data]);
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(blob);
      fileReader.onload = async function () {
        // debugger
        const tiff = await fromArrayBuffer(this.result);
        // const tiff = await fromBlob(this.result);
        const image = await tiff.getImage();
        const width = image.getWidth();
        const height = image.getHeight();
        // 的四至信息：即最大/最小经纬度
        // const extentMap = image.getBoundingBox();
        // let [west, south, east, north] = image.getBoundingBox();
        let [w, s, e, n] = image.getBoundingBox();
        // console.log(width);
        // console.log(width,height,extentMap);
        /* debugger
        let wgs84 = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  ';
        // lon_0后的113是根据当地的经度带来计算
        let cgcs2000 = '+proj=tmerc +lat_0=0 +lon_0=113 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs';
        //将cgcs2000坐标转换成wgs84坐标
        console.log(west,south);
        let xy=proj4(cgcs2000, wgs84, [west,south]); */
        /* let { x: w, y: n } = await (
          await fetch(
            `//epsg.io/trans?x=${west}&y=${north}&s_srs=4497&t_srs=4326`
          )
        ).json();
        let { x: e, y: s } = await (
          await fetch(
            `//epsg.io/trans?x=${east}&y=${south}&s_srs=4497&t_srs=4326`
          )
        ).json(); */

        // 读取像素信息
        const [red = [], green = [], blue = []] = await image.readRasters();

        // 将像素信息写入canvas
        const canvas = document.createElement("canvas");
        /* let width = image.getWidth();
        let height = image.getHeight(); */
        canvas.width = width;
        canvas.height = height;
        let ctx = canvas.getContext("2d");
        let imageData = ctx.createImageData(width, height);
        // debugger
        console.time("写入像素");
        /* 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;
        } */
        for (var i = 0; i < imageData.data.length / 4; i += 1) {
          imageData.data[i * 4 + 0] = 75;
          imageData.data[i * 4 + 1] = 150 || 0;
          imageData.data[i * 4 + 2] = 237 || 0;
          imageData.data[i * 4 + 3] = red[i] === 0 ? 0 : 255;
        }
        /* for (var i = 0; i < imageData.data.length / 4; i += 1) {
          imageData.data[i * 4 + 0] = 159;
          imageData.data[i * 4 + 1] = 207 || 0;
          imageData.data[i * 4 + 2] = 255|| 0;
          imageData.data[i * 4 + 3] = red[i] === 0 ? 0 : 255;
        } */

        ctx.putImageData(imageData, 0, 0);
        let rectangle = Cesium.Rectangle.fromDegrees(w, s, e, n);
        let du = canvas.toDataURL();
        console.log(du);
        // debugger
        data.viewer.imageryLayers.addImageryProvider(
          new Cesium.SingleTileImageryProvider({
            url: du,
            rectangle,
            // z:10
          })
        );

        data.viewer.camera.setView({
          destination: rectangle,
        });
        //是否开启抗锯齿
        // viewer.scene.fxaa = true;
        data.viewer.scene.postProcessStages.fxaa.enabled = true;
        /*  console.log(xy);
        debugger */
      };
    });