【openlayers系统学习】3.6-3.7添加可视化选择器，手动选择可视化的图像源

六、添加可视化选择器（选择可视化的图像类型）

在前面的示例中，我们已经看到了同一Sentinel-2图像的真彩色合成、假彩色合成和NDVI渲染。如果能让用户从这些可视化中选择一个或更多，而不必每次都更改我们的代码，那就太好了。为此，我们将创建一个可用可视化的列表，并在页面中添加一个 <select>​ 元素，让用户选择要显示的内容。

除了真彩色、假彩色和NDVI可视化之外，我们还将添加一个新的归一化差异水指数（NDWI）。这与归一化差异植被指数类似，不同之处在于它可用于监测水体的变化。

NDWI = (GREEN - NIR) / (GREEN + NIR)

正如我们所看到的，每个可视化都需要有一个 sources​ 数组（这些是单波段或多波段GeoTIFF的URL），一个可选的 max​ 值用于缩放GeoTIFF值，一个可选的 style​ 用于渲染图层。此外，我们将为每个可视化提供给予一个 name​ ，以便显示给用户。

编辑您的 main.js​ 以包含以下可视化数据：

const visualizations = [
  {
   
   
    name: 'True Color',
    sources: ['TCI'],
  },
  {
   
   
    name: 'False Color',
    sources: ['B08', 'B04', 'B03'],
    max: 5000,
  },
  {
   
   
    name: 'NDVI',
    sources: ['B04', 'B08'],
    max: 10000,
    style: {
   
   
      color: [
        'interpolate',
        ['linear'],
        ['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
        ...getColorStops('earth', -0.5, 1