【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​属性的取值:

相关推荐
dxnb2212 分钟前
Datawhale25年10月组队学习:math for AI+Task2线性代数
人工智能·学习·线性代数
wanfeng_0933 分钟前
python爬虫学习
爬虫·python·学习
A9better1 小时前
嵌入式开发学习日志39——stm32之I2C总线物理层与常用术语
stm32·单片机·嵌入式硬件·学习
报错小能手2 小时前
linux学习笔记(35)C语言连接mysql
linux·笔记·学习
jjjxxxhhh1232 小时前
【学习】USB摄像头 -> FFmpeg -> H264 -> AI模型
人工智能·学习·ffmpeg
_dindong3 小时前
笔试强训:Week -2
笔记·学习·算法
deng-c-f3 小时前
Linux C/C++ 学习日记(26):KCP协议(二):kcp源码分享
c语言·c++·学习·网络编程·kcp
Yupureki4 小时前
从零开始的C++学习生活 9:stack_queue的入门使用和模板进阶
c语言·数据结构·c++·学习·visual studio
小年糕是糕手4 小时前
【数据结构】单链表“0”基础知识讲解 + 实战演练
c语言·开发语言·数据结构·c++·学习·算法·链表
半夏知半秋4 小时前
lua对象池管理工具剖析
服务器·开发语言·后端·学习·lua