tiff图片的绘制

tiff是什么？

tiff是一种特殊的图片，包含了一些坐标信息里面，我们可以用任何画图软件打开它，不过要直接加载到cesium上可不行，cesium目前不支持tiff的直接绘制，一般做法是将其打成瓦片服务来加载它：

    let viewer = this.cesiumService.viewer!;
    let imgProvider = new Cesium.UrlTemplateImageryProvider({
      url: params.url, //瓦片服务地址
      maximumLevel: Number(params?.maxZoom),

      tilingScheme: new Cesium.GeographicTilingScheme()
    });
   viewer.imageryLayers.addImageryProvider(imgProvider); //绘制到球

tiff信息提取

我们可以用geotiff.js这个库来提取tiff的信息。

<script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
<script>
   const { fromUrl } = GeoTIFF;
    fromUrl('./RWA_MNH_ANC.tif').then(tiff=>{
        tiff.getImage().then(image=>{
            console.log('tiff数据类型>>>',image.getSampleFormat());
            let [west, south, east, north] = image.getBoundingBox();//提取边界信息
            console.log(west,south,east,north); 
        });
    
    });
</script>

tiff的数据类型

1 = BYTE
2 = ASCII
3 = SHORT
4 = LONG
5 = RATIONAL
6 = SBYTE
7 = UNDEFINED
8 = SSHORT
9 = SLONG
10= SRATIONAL
11= FLOAT
12= DOUBLE
详细可以参考文章：https://www.cnblogs.com/arxive/p/6746570.html

tiff转base64

如果我们想将其作为一般图片对待，可以用tiff.js这个库直接转成canvas或base64。
下载地址：https://github.com/seikichi/tiff.js

  drawTif(plot) {
    return new Promise((resolve, reject) => {
      console.log('plot>>>', plot.original_url);
      console.log('tif', window['Tiff'])
      this.http.get(url, { responseType: 'arraybuffer' }).then(data => {
        //console.log('data',data);
        let tiff = new window['Tiff']({ buffer: data });
        let canvas = tiff.toCanvas() //绘制canvas
        // console.log('cabnva',canvas);
        resolve(canvas.toDataURL("image/jpeg", 1.0));
      }).catch(e => {
        reject(e);
      })

    })

  }

参考文章：https://blog.csdn.net/lovefengruoqing/article/details/115306876