当前位置: 首页 > news >正文

【openlayers系统学习】3.5colormap详解(颜色映射)

五、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 输出的新颜色图。

image

从 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 的数组,包含颜色停止点的值。
nshades72返回数组中的颜色数量,最小数量取决于 colormap​。
format'hex''hex'​ 表示 #aabbcc​,'rgbaString'​ 表示 rgba(255, 255, 255, 1)​,'rgba'​ 表示 [255, 255, 255, 1]​,'float'​ 表示 [1, 1, 1, 1]​。
alpha1Alpha 范围,可以是一个包含 alpha 值的数组,也可以只是包含起始/结束颜色的 2 个值。

colormap​属性的取值:

image

相关文章:

【openlayers系统学习】3.5colormap详解(颜色映射)

五、colormap详解&#xff08;颜色映射&#xff09; ​colormap​ 包是一个很好的实用程序库&#xff0c;用于创建颜色图。该库已作为项目的依赖项添加&#xff08;1.7美化&#xff08;设置style&#xff09;&#xff09;。要导入它&#xff0c;请编辑 main.js​ 以包含以下行…...

Redis教程(十五):Redis的哨兵模式搭建

一、搭建Redis一主二从 分别复制三份Redis工作文件夹&#xff0c;里面内容一致 接着修改7002的配置文件&#xff0c;【redis.windows-service.conf】 port 7002 改成 port 7002 slaveof 127.0.0.1 7001 7003也同样修改 port 7003 slaveof 127.0.0.1 7001 这样就指定了700…...

【C语言】8.C语言操作符详解(3)

文章目录 10.操作符的属性&#xff1a;优先级、结合性10.1 优先级10.2 结合性 11.表达式求值11.1 整型提升11.2 算术转换11.3 问题表达式解析11.3.1 表达式111.3.2 表达式211.3.3 表达式311.3.4 表达式411.3.5 表达式5: 11.4 总结 10.操作符的属性&#xff1a;优先级、结合性 …...

离线初始化k8s

导出和导入所有必要的 Kubernetes 镜像&#xff0c;使用阿里云作为源。 在能访问外网的机器上拉取镜像 首先&#xff0c;在有外网访问的机器上运行以下命令来拉取所有 Kubernetes v1.29.5 版本需要的镜像&#xff1a; kubeadm config images pull --image-repository regist…...

C++字符编码 cppp-reiconv库使用详解

经常写一些控制台小程序&#xff0c;常常会遇到输出中文乱码的问题&#xff0c;在windwos下可以使用MultiByteToWideChar转换字符编码&#xff0c;但跨平台就需要cppp-reiconv这样的第三方字符编码处理库&#xff0c;且开源。 一、下载cppp-reiconv库的源码和静/动态库 GitHu…...

通过继承React.Component创建React组件-5

在React中&#xff0c;V16版本之前有三种方式创建组件&#xff08;createClass() 被删除了)&#xff0c;之后只有两种方式创建组件。这两种方式的组件创建方式效果基本相同&#xff0c;但还是有一些区别&#xff0c;这两种方法在体如下&#xff1a; 本节先了解下用extnds Reac…...

PgSQL内核机制 - 算子执行统计元组个数

PgSQL内核机制 - 算子执行统计元组个数 我们在执行explain analyze观察执行计划执行情况时&#xff0c;时常通过每个算子实际执行结果来分析SQL的执行&#xff0c;其中有一项“rows XXX”表示执行的行数&#xff08;这里姑且先认为是执行的真实行数&#xff09;。但有些场景下…...

Ubuntu/Linux 安装Paraview

文章目录 0. 卸载已有ParaView1. 安装ParaView1.1 下载后安装 2.进入opt文件夹改名3. 更改启动项4. 创建硬链接5. 添加桌面启动方式6. 即可使用 0. 卸载已有ParaView YUT 1. 安装ParaView https://www.paraview.org/ 1.1 下载后安装 找到下载的文件夹&#xff0c;文件夹内…...

内存泄漏及其解决方法

1. 系统崩溃前的现象 垃圾回收时间延长&#xff1a;从原本的约10ms增长至50ms&#xff0c;Full GC时间也由0.5s增加至4-5s。Full GC频率增加&#xff1a;最短间隔可缩短至1分钟内发生一次。年老代内存持续增长&#xff1a;即使经过Full GC&#xff0c;年老代内存未见明显释放。…...

Java进阶学习笔记13——抽象类

认识抽象类&#xff1a; 当我们在做子类共性功能抽取的时候&#xff0c;有些方法在父类中并没有具体的体现&#xff0c;这个时候就需要抽象类了。在Java中&#xff0c;一个没有方法体的方法应该定义为抽象方法&#xff0c;而类中如果有抽象方法&#xff0c;该类就定义为抽象类…...

【Docker学习】深入研究命令docker exec

使用docker的过程中&#xff0c;我们会有多重情况需要访问容器。比如希望直接进入MySql容器执行命令&#xff0c;或是希望查看容器环境&#xff0c;进行某些操作或访问。这时就会用到这个命令&#xff1a;docker exec。 命令&#xff1a; docker container exec 描述&#x…...

C语言中的文件操作

前言 嗨&#xff0c;我是firdawn&#xff0c;在本章中我们将介绍&#xff0c;文件的概念&#xff0c;文件的打开和关闭&#xff0c;在篇末我们将介绍文件缓冲区的作用&#xff0c;下面是本章的思维导图&#xff0c;接下来&#xff0c;让我们开始今天的学习吧&#xff01; 一…...

python使用xlrd读取excel的时候把字符串读成了数字

xlrd 是一个 Python 库&#xff0c;用于读取 Excel 文件&#xff08;.xls 和 .xlsx&#xff0c;但 .xlsx 需要 openpyxl 或 xlrd 的较新版本&#xff09;。然而&#xff0c;xlrd 在读取 Excel 文件时通常会将单元格的内容按其原始数据类型&#xff08;如字符串、数字、日期等&a…...

【C语言】走进指针世界(下卷)

前言 在“走进指针世界&#xff08;上卷&#xff09;”中&#xff0c;我们已经说过&#xff1a;什么是指针、内存和地址&#xff0c;指针的使用、声明、初始化&#xff0c;取地址运算符、解引用运算符以及这两者关系&#xff0c;还有指针赋值。 在正式使用指针进行各种代码的…...

【Spring】SSM整合_入门代码实现

1. Maven依赖 在pom.xml中添加SSM框架的依赖 <!-- Spring Core --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>5.3.x</version> </dependency>…...

C++代码错误解决1(函数模板)

1、代码如下 //示例函数模板的使用 #include <iostream> #include <string> using namespace std; template <typename T>//函数模板 T max(T a,T b) {return a>b?a:b; } int main() {int a,b;cout<<"input two integers to a&b:"…...

idea configuration 配置 方便本地启动环境切换

idea 再项目启动的时候避免切换环境导致上线的时候出现环境配置问题 可以再idea 的 configuration 中配置项目的 vm options 虚拟机的内容占用 -Xmx256m -Xms256m -Xmn100m -Xss256k program arguments properties 文件中需要修改的配置参数 active profiles 指定启动的本…...

win10配置wsl的深度学习环境

# 1、一步完成wsl&#xff1a;开启虚拟机、linux子系统、并下载ubuntu # 官方文档: https://learn.microsoft.com/zh-cn/windows/wsl/install wsl --install# 2、打开windows terminal&#xff0c;选ubuntu交互环境 # 第一次需要配置用户名和密码 # 接下来正常使用即可# 3、cud…...

如何处理时间序列的缺失数据

您是否应该删除、插入或估算&#xff1f; 世界上没有完美的数据集。每个数据科学家在数据探索过程中都会有这样的感觉&#xff1a; df.info()看到类似这样的内容&#xff1a; 大多数 ML 模型无法处理 NaN 或空值&#xff0c;因此如果您的特征或目标包含这些值&#xff0c;则在…...

fastapi中实现多个路由请求

大家伙&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 前言 最近在写机器人相关的接口&#xff0c;顺手学了学python&#xff0c;发现这是个好东西&#xff0c;写代码效率比java要高很多&#xff0c;比如写个词云呀&#xff0c;写个回调呀&am…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...