Openlayers WebGLTileLayer波段切换异常：波段≥5时无法正常工作

gdal_translate -of GTiff N.asc N.tif

通过`gdalinfo`验证为单波段：

...
Band 1 Block=2100x1 Type=Float32, ColorInterp=Gray
Computed Min/Max=0.000,4.262

- 基于OpenLayers的GeoTIFF源和WebGLTileLayer实现的代码：
```typescript
import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import WebGLTileLayer from 'ol/layer/WebGLTile.js';
import { register } from 'ol/proj/proj4.js';
import { View } from "ol";
import { OSM } from "ol/source";

const genurl = (i: number) => `https://blablabla/cogs/${i}.tif`
const urls = [...Array.from({ length: 10 }, (_, index) => index)].map(i => genurl(i))

const sources = [
    new GeoTIFF({
        sources: urls.map(x => ({ url: x, bands: [1] })),
        normalize: false,
    }),
];
let band = 1
const layer = new WebGLTileLayer({
    variables: {band},
    sources: sources,
    style: {
        color: [
            "case",
            ["<", ["var", "band"], 0.5],
            [0, 0, 255, 1],
            [255, 0, 0, 1]
        ],
    },
});
const onRight = () => {
    band++
    layer.updateStyleVariables({ band });
}

const onLeft = () => {
    band--
    layer.updateStyleVariables({ band });
}

• 问题：前4个波段切换正常，加载完成后无延迟，但波段≥5时功能失效。

可能的原因与解决办法 #

1. WebGL着色器变量数量限制 #

OpenLayers的WebGLTileLayer在合并多源GeoTIFF时，每个源的波段会占用着色器中的uniform变量。WebGL 1.0对fragment shader的uniform变量有默认上限，当第5个及以上波段时，超出了着色器能处理的变量数量，导致功能失效。

解决办法：
为每个时间点创建独立的GeoTIFF源，通过切换图层的sources属性实现时间切换，而非修改波段变量：

// 为每个时间点生成独立的GeoTIFF源
const sources = urls.map(url => new GeoTIFF({
    sources: [{ url, bands: [1] }],
    normalize: false,
}));

let currentIndex = 0;
const layer = new WebGLTileLayer({
    sources: [sources[currentIndex]],
    style: {
        color: [
            "case",
            ["<", ["band", 1], 0.5], // 直接引用当前源的第1波段
            [0, 0, 255, 1],
            [255, 0, 0, 1]
        ],
    },
});

const onRight = () => {
    if (currentIndex < sources.length - 1) {
        currentIndex++;
        layer.setSources([sources[currentIndex]]);
    }
}

const onLeft = () => {
    if (currentIndex > 0) {
        currentIndex--;
        layer.setSources([sources[currentIndex]]);
    }
}

这种方式每个时刻仅加载当前时间点的源，避免一次性加载所有源导致的着色器变量溢出，同时OpenLayers会缓存已加载的瓦片，切换时依然保持平滑无延迟。

2. COG文件兼容性问题 #

部分GeoTIFF转COG过程中可能存在元数据错误（如波段索引、块大小不兼容），导致第5个及以后的文件无法被正确解析。

解决办法：

• 使用COG专用转换参数确保文件格式正确：

gdal_translate -of COG -co BLOCKSIZE=512 -co COMPRESS=DEFLATE input.asc output.tif

• 用gdalinfo检查第5个及以后的.tif文件，确认元数据（波段信息、投影、块大小等）与前4个一致。

3. 内存与资源加载限制 #

一次性加载10个GeoTIFF源可能导致浏览器内存占用过高，触发资源回收或加载失败。

解决办法：
实现源的懒加载，仅加载当前及相邻1-2个时间点的源，切换时动态加载并释放冗余资源：

let loadedSources = new Map<number, GeoTIFF>();
let currentIndex = 0;

const loadSource = (index: number) => {
    if (!loadedSources.has(index)) {
        const url = genurl(index);
        const source = new GeoTIFF({
            sources: [{ url, bands: [1] }],
            normalize: false,
        });
        loadedSources.set(index, source);
    }
    return loadedSources.get(index);
};

// 初始化加载当前及相邻源
loadSource(0);
loadSource(1);

const layer = new WebGLTileLayer({
    sources: [loadSource(currentIndex)],
    style: {
        color: [
            "case",
            ["<", ["band", 1], 0.5],
            [0, 0, 255, 1],
            [255, 0, 0, 1]
        ],
    },
});

const onRight = () => {
    if (currentIndex < 9) {
        currentIndex++;
        loadSource(currentIndex);
        // 预加载下一个相邻源（可选）
        if (currentIndex < 9) loadSource(currentIndex + 1);
        // 释放前两个源以节省内存（可选）
        if (currentIndex > 1) loadedSources.delete(currentIndex - 2);
        layer.setSources([loadedSources.get(currentIndex)]);
    }
}

const onLeft = () => {
    if (currentIndex > 0) {
        currentIndex--;
        loadSource(currentIndex);
        // 预加载前一个相邻源（可选）
        if (currentIndex > 0) loadSource(currentIndex - 1);
        // 释放后两个源以节省内存（可选）
        if (currentIndex < 8) loadedSources.delete(currentIndex + 2);
        layer.setSources([loadedSources.get(currentIndex)]);
    }
}

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