OpenLayers 6.14.1 ol.GeoTIFF图层正确加载使用方法咨询

你写的代码基础调用逻辑没有语法错误，但存在3个会直接导致加载失败的遗漏点：

• 缺少跨域配置：加载第三方存储的COG资源时，未给ol.source.GeoTIFF设置crossOrigin参数，浏览器会拦截跨域请求，图层无法正常拉取瓦片数据。
• 未做视图适配：添加图层后没有将地图视图定位到GeoTIFF对应的地理范围，默认视图初始定位在0经纬度位置，和示例中哨兵影像覆盖的南美区域完全不重叠，自然看不到内容。
• 版本适配风险：6.14.1是OpenLayers较早支持GeoTIFF源的版本，如果你采用按需引入的方式使用OL，漏引入WebGL渲染相关依赖时会直接抛出图层初始化错误。

• 前置校验：确认使用的OpenLayers版本不低于6.13.0，按需引入场景下必须导入ol/layer/WebGLTile、ol.source/GeoTIFF两个模块。注意GeoTIFF源只能搭配WebGLTile图层使用，不能绑定到普通瓦片图层、影像图层上。
• 图层初始化：配置源时必须补充跨域参数，公开无鉴权的COG资源设置crossOrigin: 'anonymous'即可，修正后的基础配置参考：

const geoTiffLayer = new ol.layer.WebGLTile({
  id: 'geoTiffs',
  zIndex: 3,
  source: new ol.source.GeoTIFF({
    crossOrigin: 'anonymous',
    sources: [
      {
        url: '目标COG文件访问地址'
      }
    ]
  })
});
olMap.addLayer(geoTiffLayer);

• 视图适配：GeoTIFF源内置了获取自身坐标范围、投影信息的方法，不要硬编码地图中心点和缩放等级，在图层添加后调用源的getView()方法获取适配参数，直接更新地图视图即可：

const cogSource = geoTiffLayer.getSource();
cogSource.getView().then(viewOptions => {
  olMap.setView(new ol.View(viewOptions));
});

• 常见异常排查：
  • 图层加载空白时优先查看浏览器控制台，若存在CORS相关报错，需要确认COG存储服务配置了允许跨域访问的响应头。
  • 出现渲染黑块、加载超时报错时，先确认目标文件是标准云优化GeoTIFF（COG）格式，普通非COG格式的TIF不支持分片按需加载，会直接触发加载失败。
  • 抛出WebGL上下文相关错误时，先确认浏览器开启了WebGL支持，同时避免同时加载过多高分辨率COG导致显存溢出。

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