【openlayers系统学习】3.1-3.2彩色GeoTIFF图像渲染

一、彩色GeoTIFF图像渲染

Sentinel-2 卫星任务收集并传播覆盖地球陆地表面的图像，重访频率为 2 至 5 天。传感器收集多波段图像，其中每个波段都是电磁频谱的一部分。 2A 级 (L2A) 产品提供以下频段的表面反射率测量：

Band	Description	Central Wavelength (μm)	Resolution (m)
B01	Coastal aerosol	0.433	60
B02	Blue	0.460	10
B03	Green	0.560	10
B04	Red	0.665	10
B05	Vegetation red edge	0.705	20
B06	Vegetation red edge	0.740	20
B07	Vegetation red edge	0.783	20
B08	Near-infrared	0.842	10
B09	Water vapor	0.945	60
B10	Short-wave infrared - Cirrus	1.375	60
B11	Short-wave infrared	1.610	20
B12	Short-wave infrared	2.190	20

有一系列 Sentinel-2 L2A 产品作为云优化的 GeoTIFF 存储在 Amazon S3 上。在这个练习中，我们将在地图上渲染其中一个产品。

首先，重置您的 index.html ，以便我们准备好渲染整页地图：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>OpenLayers</title><style>@import "node_modules/ol/ol.css";</style><style>html, body, #map-container {margin: 0;height: 100%;width: 100%;font-family: sans-serif;}</style></head><body><div id="map-container"></div><script src="./main.js" type="module"></script></body>
</html>

现在我们将导入两个以前未使用过的新组件：

用于处理多波段栅格数据的 ol/source/GeoTIFF
ol/layer/WebGLTile 用于在地图上显示WebGL渲染的瓦片图层。使用WebGL技术可以实现更高性能的地图渲染，特别是在处理大量数据或复杂图形时。（用于使用 GPU 上的着色器操作瓦片数据）

更新您的 main.js 以在地图上加载和渲染远程托管的 GeoTIFF 文件：

import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import Projection from 'ol/proj/Projection.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';const projection = new Projection({code: 'EPSG:32721',units: 'm',
});// metadata from https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/S2B_21HUB_20210915_0_L2A.json
const sourceExtent = [300000, 6090260, 409760, 6200020];const source = new GeoTIFF({sources: [{url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif',},],
});const layer = new TileLayer({source: source,
});/*** 创建一个新的Map实例。* @param {Object} options - 配置项对象。*    target: 'map-container' - 地图容器的ID。*    layers: [layer] - 地图图层数组。*    view: new View({*      projection: projection - 投影类型。*      center: getCenter(sourceExtent) - 地图中心点，基于源范围计算得到。*      extent: sourceExtent - 地图显示的范围。*      zoom: 1 - 地图初始缩放级别。*    })* @returns {Map} 返回一个新的Map实例。*/
new Map({target: 'map-container',layers: [layer],view: new View({projection: projection,center: getCenter(sourceExtent),extent: sourceExtent,zoom: 1,}),
});

http://localhost:5173/ 上的工作示例显示了一张地图，其中包含在 WebGL 图块图层中渲染的 GeoTIFF。

Sentinel-2 GeoTIFF 的真彩色渲染
最困难的部分是确定 projection 和 extent 适合地图视图。在下一步中，我们将使这变得更容易。

‍

二、简化view中的代码

在前面的示例中，我们必须使用有关空间参考系统和图像坐标位置的信息来配置地图视图。

关于图像我们需要知道的第一件事是空间参考系统的标识符。这用于创建 OpenLayers Projection （还需要知道单位）：

const projection = new Projection({code: 'EPSG:32721',units: 'm',
});

关于图像我们需要了解的第二件事是它的坐标位置。这用于创建边界框或范围数组：

// metadata from https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/S2B_21HUB_20210915_0_L2A.json
const extent = [300000, 6090260, 409760, 6200020];

有了这些信息，我们终于能够配置地图的视图：

new Map({target: 'map-container',layers: [layer],view: new View({projection: projection,center: getCenter(extent),extent: extent,zoom: 1,}),
});

GeoTIFF 图像通过特殊的“geo”标签扩展了常规 TIFF 图像，这些标签提供有关图像的空间参考系统和坐标位置等信息。 OpenLayers 中的 ol/source/GeoTIFF 源解析此信息，并且可以理想地用于配置地图的视图。

GeoTIFF 源的 source.getView() 方法返回视图属性的一个promise（例如 projection 、 center 、 extent 和 zoom )。

地图构造函数现在接受一个 view 选项，该选项可以是这些相同属性的 promise。因此，我们可以向地图提供来自源的视图属性的 promise，而不是自己深入元数据以查找投影和范围等内容。

更新您的 main.js 以便地图构造函数使用这个新方法从源获取视图属性：

new Map({target: 'map-container',layers: [layer],view: source.getView(),
});

现在，可以从 main.js 文件中删除 projection 、 extent 和相关导入（ View 、 Projection 和 getCenter ）。

你应该会在http：//localhost：5173/找到和以前一样的结果–但是这次我们写的代码更少了！

Sentinel-2 GeoTIFF的真彩色渲染

‍