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

相关推荐
Hello_Embed20 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中21 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h1 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
研梦非凡1 天前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
limengshi1383921 天前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
周周记笔记1 天前
学习笔记:第一个Python程序
笔记·学习
优雅鹅1 天前
ARM、AArch64、amd64、x86_64、x86有什么区别?
arm开发·学习
..过云雨1 天前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习
咸甜适中1 天前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui