OpenLayers无法渲染无地理参考的COG问题排查求助

我搭建了示例项目，代码逻辑看似正常，但无法渲染无地理参考的COG，请问我哪里操作有误？

原代码 #

import GeoTIFF from "ol/source/GeoTIFF.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import Projection from "ol/proj/Projection.js";
import View from "ol/View.js";
import { getCenter } from "ol/extent.js";

const extent = [0, 0, 13470, 8670];

const projection = new Projection({
  code: "custom",
  units: "pixels",
  extent: extent
});

const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new GeoTIFF({
        convertToRGB: true,
        sources: [
          {
            url:
              "https://tmp-asger-public.s3.eu-central-1.amazonaws.com/2017_84_40_1_0015_00008062.cog.tif",
            nodata: 0
          }
        ]
      })
    })
  ],
  view: new View({
    projection: projection,
    center: getCenter(extent),
    extent: extent,
    zoom: 1
  })
});

问题分析与修复 #

核心问题 #

1. GeoTIFF源未绑定自定义投影：你定义了像素坐标系的投影，但没有将其关联到GeoTIFF源，导致源无法识别当前地图的坐标系，无法正确对齐渲染。
2. 硬编码范围可能不匹配：手动设置的extent如果和TIFF实际的像素宽高不一致，会导致渲染区域错位或无法显示。

修复方案 #

• 给GeoTIFF源添加projection属性，指向你定义的custom投影，确保源和地图使用同一坐标系。
• 优先通过TIFF元数据动态获取范围，避免硬编码错误；如果必须硬编码，要确保数值和TIFF实际宽高完全一致。

修改后的代码 #

import GeoTIFF from "ol/source/GeoTIFF.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import Projection from "ol/proj/Projection.js";
import View from "ol/View.js";
import { getCenter } from "ol/extent.js";

// 确保此处宽高与TIFF实际像素尺寸一致，或通过异步方式动态获取
const tiffWidth = 13470;
const tiffHeight = 8670;
const extent = [0, 0, tiffWidth, tiffHeight];

const projection = new Projection({
  code: "custom",
  units: "pixels",
  extent: extent
});

const map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new GeoTIFF({
        convertToRGB: true,
        projection: projection, // 关键：绑定自定义投影
        sources: [
          {
            url: "https://tmp-asger-public.s3.eu-central-1.amazonaws.com/2017_84_40_1_0015_00008062.cog.tif",
            nodata: 0
          }
        ]
      })
    })
  ],
  view: new View({
    projection: projection,
    center: getCenter(extent),
    extent: extent,
    zoom: 1
  })
});

进阶优化：动态获取TIFF范围 #

如果不确定TIFF的实际尺寸，可以通过异步加载元数据来动态设置范围，避免硬编码错误：

import GeoTIFF from "ol/source/GeoTIFF.js";
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import Projection from "ol/proj/Projection.js";
import View from "ol/View.js";
import { getCenter } from "ol/extent.js";

// 异步加载TIFF元数据获取准确范围
fetch("https://tmp-asger-public.s3.eu-central-1.amazonaws.com/2017_84_40_1_0015_00008062.cog.tif")
  .then(response => response.arrayBuffer())
  .then(async (buffer) => {
    const tiff = await GeoTIFF.fromArrayBuffer(buffer);
    const image = await tiff.getImage();
    const width = image.getWidth();
    const height = image.getHeight();
    const extent = [0, 0, width, height];

    const projection = new Projection({
      code: "custom",
      units: "pixels",
      extent: extent
    });

    const map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new GeoTIFF({
            convertToRGB: true,
            projection: projection,
            sources: [
              {
                url: "https://tmp-asger-public.s3.eu-central-1.amazonaws.com/2017_84_40_1_0015_00008062.cog.tif",
                nodata: 0
              }
            ]
          })
        })
      ],
      view: new View({
        projection: projection,
        center: getCenter(extent),
        extent: extent,
        zoom: 1
      })
    });
  });

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