渲染的 GeoTiff 位置不一致

Question

我正在使用 React With OpenLayers 在地图（mapbox 卫星）上渲染 GeoTiff 叠加层。

我面临的问题是，有时这些 geoTiff 文件与它们的原始位置有点偏离。 这是一些屏幕截图

正如我们在这里看到的，图像有点偏右上角。 这不会发生在某些 GeoTiff 文件上。

这是我正在使用的代码

  const getViewConfig = map => (viewConfig) => {
    const code = viewConfig.projection?.getCode();
    return fromEPSGCode(code).then(() => {
      const projection = code;
      const extent = transformExtent(
        viewConfig.extent,
        viewConfig.projection,
        projection
      );

      const width = getWidth(extent);
      const height = getHeight(extent);
      const center = getCenter(extent);

      const size = map.getSize();
      return {
        projection,
        center,
        resolution: Math.max(width / size[0], height / size[1]),
      };
    });
  };

  function init() {
    const key = import.meta.env.VITE_MAPBOX_KEY;
    const url = `https://api.mapbox.com/styles/v1/xxxx/xxxx/tiles/256/{z}/{x}/{y}@2x?access_token=${key}`;
    const baseSource = new XYZ({
      url,
      maxZoom: 22,
    });

    const baseLayer = new Tile({
      source: baseSource,
    });

    const source = new GeoTIFF({ sources: [{ url: props.src }] });
    const layer = new TileLayer({ source });
    setLayer(layer);

    const customMap = new Map({
      controls: [],
      target: mapRef.current,
      layers: [baseLayer, layer],
    });

    customMap.setView(source.getView().then(getViewConfig(customMap)))
    setMap(customMap);
    customMap.on("loadstart", function () {});
    customMap.on("loadend", function () {
      setShowLoader(false);
    });
}

我尝试使用一些后期渲染代码将 geotiff 的一半高度向下移动并向左移动整个宽度，但这会导致其他正确渲染的 geotiff 不正确。所以我认为这不是一个好的解决方案。

我想知道为什么会发生这种情况以及我们如何解决这些问题，tif 文件有问题吗？或代码。如果它在 tif 文件中，我该如何测试它？