【openlayers系统学习】3.5colormap详解（颜色映射）

五、colormap详解（颜色映射）

colormap 包是一个很好的实用程序库，用于创建颜色图。该库已作为项目的依赖项添加（1.7美化（设置style））。要导入它，请编辑 main.js 以包含以下行：

js 复制代码

import colormap from 'colormap';

从colormap 模块导出一个函数，colormap函数从指定的颜色映射之一返回 RGBA 颜色值数组。如前面的示例所示，我们需要一个如下所示的值数组：

js 复制代码

[stopValue0, color0, stopValue1, color1, stopValue1, stopValue2, color2, ...]

为了创建这样的数组，我们将编写一个函数，该函数接受颜色图的 name 、 min 停止值、 max 停止值、 steps 的数量，以及 colormap 函数中 reverse 颜色数组的选项。将以下函数添加到您的 main.js 中：

js 复制代码

// 此函数生成给定颜色映射名称、范围、步数和方向的颜色停止数组。
function getColorStops(name, min, max, steps, reverse) {
  // 计算步长
  const delta = (max - min) / (steps - 1);
  // 初始化一个数组来存储颜色停止
  const stops = new Array(steps * 2);
  // 从指定的颜色映射获取一个 RGBA 颜色数组，文章最后有colormap函数使用详细的介绍
  const colors = colormap({colormap: name, nshades: steps, format: 'rgba'});
  // 如果需要，反转颜色数组
  if (reverse) {
    colors.reverse();
  }
  // 在指定间隔处用颜色值填充停止数组
  for (let i = 0; i < steps; i++) {
    stops[i * 2] = min + i * delta; // 设置停止值
    stops[i * 2 + 1] = colors[i]; // 设置相应的颜色
  }
  return stops; // 返回颜色停止数组
}

现在我们可以修改图层样式的 color 表达式以使用停止值和颜色值数组。编辑 main.js 中的图层定义以使用我们的新函数：

js 复制代码

const layer = new TileLayer({
  source: source,
  style: {
    color: [
      'interpolate',
      ['linear'],
      ndvi,
      // color ramp for NDVI values
      ...getColorStops('earth', -0.5, 1, 10, true), //使用扩展运算符（...）插入到color数组中
    ],
  },
});

重新加载 http://localhost:5173/ 以查看应用于 NDVI 输出的新颜色图。

从 Sentinel-2 GeoTIFF 生成的 NDVI图像

‍

colormap包的具体介绍：https://github.com/bpostlethwaite/colormap?tab=readme-ov-file

API

属性默认值 Meaning

colormap 'jet' 从下面的图像中选择一个颜色映射名称，或者自定义一个颜色比例尺 ------ 一个包含{index, rgb}对象序列，其中 index 是 0 到 1 的数字，rgb 是一个长度为 3 或 4 的数组，包含颜色停止点的值。

nshades 72 返回数组中的颜色数量，最小数量取决于 colormap。

format 'hex' 'hex' 表示 #aabbcc，'rgbaString' 表示 rgba(255, 255, 255, 1)，'rgba' 表示 [255, 255, 255, 1]，'float' 表示 [1, 1, 1, 1]。

alpha 1 Alpha 范围，可以是一个包含 alpha 值的数组，也可以只是包含起始/结束颜色的 2 个值。

colormap属性的取值：

属性	默认值	Meaning
`colormap`	`'jet'`	从下面的图像中选择一个颜色映射名称，或者自定义一个颜色比例尺 ------ 一个包含`{index, rgb}`对象序列，其中 index 是 0 到 1 的数字，rgb 是一个长度为 3 或 4 的数组，包含颜色停止点的值。
`nshades`	`72`	返回数组中的颜色数量，最小数量取决于 `colormap`。
`format`	`'hex'`	`'hex'` 表示 `#aabbcc`，`'rgbaString'` 表示 `rgba(255, 255, 255, 1)`，`'rgba'` 表示 `[255, 255, 255, 1]`，`'float'` 表示 `[1, 1, 1, 1]`。
`alpha`	`1`	Alpha 范围，可以是一个包含 alpha 值的数组，也可以只是包含起始/结束颜色的 2 个值。

‍