获取tif文件四角经纬、页面渲染tif文件

        本文使用GeoTools读取tif文件获取经纬度信息， GeoTools是可以操作和显示地图的开源Java代码库GeoTools，它提供了一系列符合规范的操作地理空间数据的方法，例如可以用它来实现一个地理信息系统（GIS）。

        对比gdal它无需安装本地库和配置环境变量，使用便捷。gdal 主要使用 C/C++ 编写，但它也支持许多其他编程语言，如 Python、Java 和 Ruby。GeoTools 是用 Java 编写的，因此它更适合 Java 开发者。

1，读取tif文件

1.1，指定所需依赖

<!--版本自选-->
<dependency>
   <groupId>org.geotools</groupId>
   <artifactId>gt-coverage</artifactId>
   <version>25.2</version>
</dependency>
<dependency>
   <groupId>org.geotools</groupId>
   <artifactId>gt-referencing</artifactId>
   <version>25.2</version>
</dependency>
<dependency>
   <groupId>org.geotools</groupId>
   <artifactId>gt-geotiff</artifactId>
   <version>25.2</version>
</dependency>
<dependency>
   <groupId>org.geotools</groupId>
   <artifactId>gt-shapefile</artifactId>
   <version>25.2</version>
</dependency>
<dependency>
   <groupId>org.geotools</groupId>
   <artifactId>gt-epsg-hsql</artifactId>
   <version>25.2</version>
</dependency>
<!--从指定存储库下载-->
<repositories>
   <repository>
    <id>osgeo</id>
    <name>OSGeo Release Repository</name>
    <url>https://repo.osgeo.org/repository/release/</url>
    <snapshots><enabled>false</enabled></snapshots>
    <releases><enabled>true</enabled></releases>
   </repository>
   <repository>
    <id>osgeo-snapshot</id>
    <name>OSGeo Snapshot Repository</name>
    <url>https://repo.osgeo.org/repository/snapshot/</url>
    <snapshots><enabled>true</enabled></snapshots>
    <releases><enabled>false</enabled></releases>
   </repository>
 </repositories>

1.2，文件读取

try {
    // 读取 TIF 文件
    GeoTiffReader reader = new GeoTiffReader(new File("E:\\work\\map\\12.tif"));

    //获取文件的坐标系信息
    CoordinateReferenceSystem crs = reader.getCoordinateReferenceSystem();
    GridCoverage2D coverage = reader.read(null);

    // 获取 TIF 文件的四角坐标，并转换为经纬度坐标系
    Envelope envelope = coverage.getEnvelope();
    Envelope transformedEnvelope = CRS.transform(envelope, crs);

    double maxLon = transformedEnvelope.getMaximum(0); // 最大经度
    double maxLat = transformedEnvelope.getMaximum(1); // 最大纬度


    double minLon = transformedEnvelope.getMinimum(0); // 最小经度
    double minLat = transformedEnvelope.getMinimum(1); // 最小纬度

    DirectPosition lowerCorner = transformedEnvelope.getLowerCorner();// 左下角
    DirectPosition upperCorner = transformedEnvelope.getUpperCorner();// 右上角

    // 左上角(最小经度，最大纬度)  右下角(最大经度，最小纬度)

    // 输出结果
    System.out.println("lowerCorner: " + lowerCorner);
    System.out.println("upperCorner: " + upperCorner);
} catch (Exception e) {
    e.printStackTrace();
}

2，前端渲染tif文件的地图块

2.1，依赖下载

npm install tiff.js

 2.2，渲染

<img :src="imageUrl" alt="TIF Image">  <!-- 样式自拟 -->

import Tiff from 'tiff.js'

async getTiffDataUrlHandler() {
  const xhr = new XMLHttpRequest()

  xhr.open('GET', this.tiffUrl, true)  //tiffUrl：文件路径
  xhr.responseType = 'arraybuffer'
        
  xhr.onload = () => {

   // 指定内存大小，避免tif文件过大导致溢出。可使用fileSize
   Tiff.initialize({ TOTAL_MEMORY: this.fileSize });

   const tiff = new Tiff({ 
      buffer: xhr.response,
   })
   const canvas = tiff.toCanvas()
   this.imageUrl = canvas.toDataURL('image/tif')
  }
  xhr.send();
},