React项目中如何将EPSG:24378的GeoTIFF转WGS84并在Leaflet展示

核心问题分析 #

你遇到的matrix和cornerCoords为undefined的问题，是因为geotiff.js的getGeoKeys()返回结构中没有这两个直接字段。地理转换参数需要通过image.getGeoTransform()获取仿射矩阵，通过image.getBoundingBox()获取原始投影下的边界范围，而非直接从geoKeys提取。

另外，proj4默认不包含EPSG:24378的投影定义，离线环境下必须手动注册该投影，才能实现从EPSG:24378到WGS84/Web Mercator的转换。

步骤1：注册EPSG:24378投影定义 #

将EPSG:24378的proj4字符串直接添加到proj4库中（离线环境无需在线请求）：

import proj4 from 'proj4';

// 注册EPSG:24378（西安80高斯-克吕格3度带第23带）
proj4.defs("EPSG:24378", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=IAU76 +units=m +no_defs");
// 显式注册常用投影（确保离线环境可用）
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("EPSG:3857", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs");

步骤2：正确读取GeoTIFF并转换投影 #

结合geotiff.js和proj4完成地理信息读取与转换，再通过georaster-layer-for-leaflet在地图上展示：

import { useEffect, useRef } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import GeoRasterLayer from 'georaster-layer-for-leaflet';
import geotiff from 'geotiff';
import proj4 from 'proj4';

// 全局注册投影（放在组件外或项目初始化文件中）
proj4.defs("EPSG:24378", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=IAU76 +units=m +no_defs");
proj4.defs("EPSG:4326", "+proj=longlat +datum=WGS84 +no_defs");
proj4.defs("EPSG:3857", "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs");

const GeoTIFFMap = () => {
  const mapRef = useRef(null);
  const geoLayerRef = useRef(null);

  useEffect(() => {
    const loadGeoTIFF = async () => {
      // 替换为你的离线GeoTIFF文件ArrayBuffer获取逻辑
      const arrayBuffer = await fetch('/local/path/to/epsg24378.tiff').then(res => res.arrayBuffer());
      
      const tiff = await geotiff.fromArrayBuffer(arrayBuffer);
      const image = await tiff.getImage();
      
      // 获取原始投影下的核心地理信息
      const geoTransform = image.getGeoTransform();
      const sourceBbox = image.getBoundingBox();
      const geoKeys = image.getGeoKeys();
      const sourceProj = `EPSG:${geoKeys.ProjectedCSTypeGeoKey}`; // 应为24378

      // 转换边界到Leaflet默认的Web Mercator（EPSG:3857）
      const [minX, minY] = proj4(sourceProj, "EPSG:3857", [sourceBbox[0], sourceBbox[1]]);
      const [maxX, maxY] = proj4(sourceProj, "EPSG:3857", [sourceBbox[2], sourceBbox[3]]);
      const targetBbox = [minX, minY, maxX, maxY];

      // 读取像素数据并创建georaster对象
      const rasterData = await image.readRasters();
      const georaster = {
        data: rasterData,
        width: image.getWidth(),
        height: image.getHeight(),
        affineTransform: [...geoTransform],
        projection: sourceProj,
        bbox: targetBbox
      };

      // 添加图层到地图
      if (mapRef.current && !geoLayerRef.current) {
        geoLayerRef.current = new GeoRasterLayer({
          georaster,
          opacity: 0.7,
          pixelValuesToColor: (values) => {
            // 根据你的GeoTIFF数据自定义颜色逻辑
            return `rgb(${values[0]}, ${values[1]}, ${values[2]})`;
          }
        });
        geoLayerRef.current.addTo(mapRef.current);
      }
    };

    loadGeoTIFF();
  }, []);

  return (
    <MapContainer
      ref={mapRef}
      center={[34.26, 118.08]} // 替换为你的GeoTIFF中心WGS84坐标
      zoom={10}
      style={{ height: '100vh', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
};

export default GeoTIFFMap;

关键注意事项 #

• 离线适配：确保所有依赖包已本地安装，投影定义显式注册，避免任何在线请求。
• 投影选择：Leaflet默认使用Web Mercator（EPSG:3857），直接转换到该投影比WGS84更高效，无需额外图层坐标转换。
• 数据兼容性：确认你的GeoTIFF包含完整的地理参考信息（GeoKeys、仿射变换），缺失这些信息会导致读取失败。
• 性能优化：大尺寸GeoTIFF建议使用分块读取（image.readRasters({window: [x1, y1, x2, y2]})），避免内存溢出。

内容的提问来源于stack exchange，提问作者Sonu Gadewar