OpenLayers中移动/转换WebGLTile加载的GeoTIFF图层坐标的方法

嘿，我明白你现在遇到的问题——底图是Web Mercator（EPSG:3857，你代码里写的EPSG:3867应该是笔误啦），但GeoTIFF是UTM 33N（EPSG:32633），导致图层错位。其实不用手动去移动图层，OpenLayers本身就支持跨投影的图层渲染，只要我们正确配置GeoTIFF源的投影信息就行，我来一步步帮你改代码：

首先，你已经用proj4定义了两个投影，这一步做得很对，我们可以把这部分代码提前，确保投影定义在图层加载前完成。然后关键是给你的GeoTIFF源加上投影声明和图层范围，这样OpenLayers就能自动把EPSG:32633的坐标转换到视图的EPSG:3857投影里，不用你手动处理坐标转换。

修改后的完整代码如下：

// 先定义投影，确保在图层加载前完成
proj4.defs(
  "EPSG:32633",
  "+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +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"
);

// 异步加载GeoTIFF并获取其边界范围
async function initMap() {
  const tiff = await fromUrl("http://localhost:5173/odm_orthophoto_rgba.tif");
  const image = await tiff.getImage();
  const [gx1, gy1, gx2, gy2] = image.getBoundingBox();
  // GeoTIFF的范围，对应EPSG:32633坐标系
  const tiffExtent = [gx1, gy1, gx2, gy2];

  // 创建GeoTIFF源，指定投影和范围
  const geotiffSource = new GeoTIFF({
    sources: [
      {
        url: "http://localhost:5173/odm_orthophoto_rgba.tif",
      },
    ],
    // 声明GeoTIFF的原始投影
    projection: "EPSG:32633",
    // 设置图层的范围，帮助OpenLayers正确计算瓦片位置
    extent: tiffExtent,
  });

  let geotiffLayer = new WebGlTile({
    source: geotiffSource,
  });

  // 把视图中心设置为GeoTIFF范围的中心点（转换到EPSG:3857）
  const center32633 = [(gx1 + gx2)/2, (gy1 + gy2)/2];
  const center3857 = proj4("EPSG:32633", "EPSG:3857", center32633);

  const view = new View({
    center: center3857,
    zoom: 10, // 根据你的图层范围调整合适的缩放级别
    projection: "EPSG:3857",
  });

  const map = new Map({
    target: "map",
    units: "m",
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
      geotiffLayer,
    ],
    view: view,
  });

  // 你原来的标记测试代码可以保留，用来验证位置是否正确
  const lat = (gy1 + gy2)/2;
  const long = (gx1 + gx2)/2;
  const epsg32633Coords = [long, lat];
  const epsg3857Coords = proj4("EPSG:32633", "EPSG:3857", epsg32633Coords);

  const markerOriginal = new Feature({
    geometry: new Point(epsg32633Coords),
  });
  const markerNew = new Feature({
    geometry: new Point(epsg3857Coords),
  });

  const markerLayer = new VectorLayer({
    source: new VectorSource({
      features: [markerOriginal],
    }),
  });
  const markerLayerNew = new VectorLayer({
    source: new VectorSource({
      features: [markerNew],
    }),
  });

  map.addLayer(markerLayer);
  map.addLayer(markerLayerNew);
}

// 初始化地图
initMap();

关键修改点解释： #

• 提前定义投影：确保proj4的投影定义在所有图层创建之前完成，这样OpenLayers才能识别EPSG:32633这个投影。
• 给GeoTIFF源设置projection和extent：这两个属性是核心——projection告诉OpenLayers这个GeoTIFF用的是哪个坐标系，extent给出图层的边界范围，OpenLayers会自动处理从EPSG:32633到视图投影（EPSG:3857）的坐标转换，不需要你手动移动图层。
• 调整视图中心：把视图中心设置为GeoTIFF范围的中心点（转换到EPSG:3857），这样地图加载后会自动定位到你的GeoTIFF图层位置，不用手动缩放查找。

这样修改后，你的WebGLTile图层应该就能正确显示在底图的对应位置了，和你添加的标记位置一致。如果还有问题，可以检查一下GeoTIFF的边界框是否正确读取，或者proj4的投影定义有没有写错~

备注：内容来源于stack exchange，提问作者Boris Grigorov