网站页面前端基本设计,wordpress调用用户数据,怎样建淘宝客网站,集团公司做网站五、colormap详解#xff08;颜色映射#xff09;
colormap 包是一个很好的实用程序库#xff0c;用于创建颜色图。该库已作为项目的依赖项添加#xff08;1.7美化#xff08;设置style#xff09;#xff09;。要导入它#xff0c;请编辑 main.js 以包含以下行…五、colormap详解颜色映射
colormap 包是一个很好的实用程序库用于创建颜色图。该库已作为项目的依赖项添加1.7美化设置style。要导入它请编辑 main.js 以包含以下行
import colormap from colormap;从colormap 模块导出一个函数colormap函数从指定的颜色映射之一返回 RGBA 颜色值数组。如前面的示例所示我们需要一个如下所示的值数组
[stopValue0, color0, stopValue1, color1, stopValue1, stopValue2, color2, ...]为了创建这样的数组我们将编写一个函数该函数接受颜色图的 name 、 min 停止值、 max 停止值、 steps 的数量以及 colormap 函数中 reverse 颜色数组的选项。将以下函数添加到您的 main.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 中的图层定义以使用我们的新函数
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?tabreadme-ov-file API 属性默认值Meaningcolormapjet从下面的图像中选择一个颜色映射名称或者自定义一个颜色比例尺 —— 一个包含{index, rgb}对象序列其中 index 是 0 到 1 的数字rgb 是一个长度为 3 或 4 的数组包含颜色停止点的值。nshades72返回数组中的颜色数量最小数量取决于 colormap。formathexhex 表示 #aabbccrgbaString 表示 rgba(255, 255, 255, 1)rgba 表示 [255, 255, 255, 1]float 表示 [1, 1, 1, 1]。alpha1Alpha 范围可以是一个包含 alpha 值的数组也可以只是包含起始/结束颜色的 2 个值。 colormap属性的取值
