OpenLayers单波段带概览GeoTIFF图层背景透明化问题

我用以下代码创建了GeoTIFF图层：

new WebGLTileLayer({
  title: 'mb',
  style: slope,
  source: new GeoTIFF({
    normalize: false,
    sources: [{
      url: 'raster/mb_p_sl.tif',
      overviews: ['raster/mb_p_sl.tif.ovr'],
      min: 0,
      max: 76,
      nodata: -9999,
    }],
  }),
}),

对应的白到黑颜色样式（值范围0-76）：

const slope = {
  color: [
    'interpolate',
    ['linear'],
    ['band', 1],
    0,
    [255, 255, 255],
    76,
    [0, 0, 0],
  ],
};

目前图层范围内出现大片白色背景，不清楚如何将该背景设置为透明。以下是该图层的信息：

Driver: GTiff/GeoTIFF
Files: raster/mb_p_sl.tif
       raster/mb_p_sl.tif.ovr
Size is 833, 1319
Coordinate System is:
GEOGCRS["WGS 84",
    DATUM["World Geodetic System 1984",
        ELLIPSOID["WGS 84",6378137,298.257223563,
            LENGTHUNIT["metre",1]]],
    PRIMEM["Greenwich",0,
        ANGLEUNIT["degree",0.0174532925199433]],
    CS[ellipsoidal,2],
        AXIS["geodetic latitude (Lat)",north,
            ORDER[1],
            ANGLEUNIT["degree",0.0174532925199433]],
        AXIS["geodetic longitude (Lon)",east,
            ORDER[2],
            ANGLEUNIT["degree",0.0174532925199433]],
    ID["EPSG",4326]]
Data axis to CRS axis mapping: 2,1
Origin = (-77.598083833395464,-15.699601330547507)
Pixel Size = (0.000935666790919,-0.000903654660184)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  INTERLEAVE=BAND
Corner Coordinates:
Upper Left  ( -77.5980838, -15.6996013) ( 77d35'53.10"W, 15d41'58.56"S)
Lower Left  ( -77.5980838, -16.8915218) ( 77d35'53.10"W, 16d53'29.48"S)
Upper Right ( -76.8186734, -15.6996013) ( 76d49' 7.22"W, 15d41'58.56"S)
Lower Right ( -76.8186734, -16.8915218) ( 76d49' 7.22"W, 16d53'29.48"S)
Center      ( -77.2083786, -16.2955616) ( 77d12'30.16"W, 16d17'44.02"S)
Band 1 Block=833x2 Type=Float32, ColorInterp=Gray
    Computed Min/Max=0.000,45.349
  Minimum=0.000, Maximum=45.349, Mean=4.120, StdDev=4.657
  NoData Value=-9999
  Overviews: 417x660, 209x330, 105x165
  Metadata:
    STATISTICS_MAXIMUM=45.349166870117
    STATISTICS_MEAN=4.1197140260889
    STATISTICS_MINIMUM=0
    STATISTICS_STDDEV=4.6573973577461
    STATISTICS_VALID_PERCENT=9.514

从图层信息能看到，有效像素仅占9.514%，剩余区域都是NoData值（-9999），当前样式未处理这类像素，导致默认渲染为白色背景。可以通过以下两种方式解决：

1. 在样式中直接处理NoData值 #

修改slope样式，用case表达式判断像素是否为NoData，将其设为透明（RGBA第四个值设为0）：

const slope = {
  color: [
    'case',
    ['==', ['band', 1], -9999],
    [0, 0, 0, 0], // 透明色
    ['interpolate',
      ['linear'],
      ['band', 1],
      0,
      [255, 255, 255],
      76,
      [0, 0, 0]
    ]
  ],
};

2. 配置GeoTIFF源的透明处理 #

你已经设置了nodata: -9999，可以尝试新增useAlpha选项，让图层自动识别NoData并渲染为透明：

new WebGLTileLayer({
  title: 'mb',
  style: slope,
  source: new GeoTIFF({
    normalize: false,
    useAlpha: true, // 开启Alpha通道支持
    sources: [{
      url: 'raster/mb_p_sl.tif',
      overviews: ['raster/mb_p_sl.tif.ovr'],
      min: 0,
      max: 76,
      nodata: -9999,
    }],
  }),
}),

额外优化建议 #

图层实际最大值是45.349而非76，调整颜色映射的最大值到实际数值，能让颜色过渡更精准：

const slope = {
  color: [
    'case',
    ['==', ['band', 1], -9999],
    [0, 0, 0, 0],
    ['interpolate',
      ['linear'],
      ['band', 1],
      0,
      [255, 255, 255],
      45.349, // 替换为实际最大值
      [0, 0, 0]
    ]
  ],
};

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