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

【openlayers系统学习】3.1-3.2彩色GeoTIFF图像渲染

news 2025/9/16 16:52:05

一、彩色GeoTIFF图像渲染

Sentinel-2 卫星任务收集并传播覆盖地球陆地表面的图像，重访频率为 2 至 5 天。传感器收集多波段图像，其中每个波段都是电磁频谱的一部分。 2A 级 (L2A) 产品提供以下频段的表面反射率测量：

BandDescriptionCentral Wavelength (μm)Resolution (m)
B01Coastal aerosol0.43360
B02Blue0.46010
B03Green0.56010
B04Red0.66510
B05Vegetation red edge0.70520
B06Vegetation red edge0.74020
B07Vegetation red edge0.78320
B08Near-infrared0.84210
B09Water vapor0.94560
B10Short-wave infrared - Cirrus1.37560
B11Short-wave infrared1.61020
B12Short-wave infrared2.19020

有一系列 Sentinel-2 L2A 产品作为云优化的 GeoTIFF 存储在 Amazon S3 上。在这个练习中，我们将在地图上渲染其中一个产品。

首先，重置您的 index.html​ ，以便我们准备好渲染整页地图：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>OpenLayers</title><style>@import "node_modules/ol/ol.css";</style><style>html, body, #map-container {margin: 0;height: 100%;width: 100%;font-family: sans-serif;}</style></head><body><div id="map-container"></div><script src="./main.js" type="module"></script></body>
</html>

现在我们将导入两个以前未使用过的新组件：

  • 用于处理多波段栅格数据的 ol/source/GeoTIFF​
  • ​ol/layer/WebGLTile​ 用于在地图上显示WebGL渲染的瓦片图层。使用WebGL技术可以实现更高性能的地图渲染，特别是在处理大量数据或复杂图形时。（用于使用 GPU 上的着色器操作瓦片数据）

更新您的 main.js​ 以在地图上加载和渲染远程托管的 GeoTIFF 文件：

import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import Projection from 'ol/proj/Projection.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';const projection = new Projection({code: 'EPSG:32721',units: 'm',
});// metadata from https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/S2B_21HUB_20210915_0_L2A.json
const sourceExtent = [300000, 6090260, 409760, 6200020];const source = new GeoTIFF({sources: [{url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif',},],
});const layer = new TileLayer({source: source,
});/*** 创建一个新的Map实例。* @param {Object} options - 配置项对象。*    target: 'map-container' - 地图容器的ID。*    layers: [layer] - 地图图层数组。*    view: new View({*      projection: projection - 投影类型。*      center: getCenter(sourceExtent) - 地图中心点，基于源范围计算得到。*      extent: sourceExtent - 地图显示的范围。*      zoom: 1 - 地图初始缩放级别。*    })* @returns {Map} 返回一个新的Map实例。*/
new Map({target: 'map-container',layers: [layer],view: new View({projection: projection,center: getCenter(sourceExtent),extent: sourceExtent,zoom: 1,}),
});

http://localhost:5173/ 上的工作示例显示了一张地图，其中包含在 WebGL 图块图层中渲染的 GeoTIFF。

​image​

Sentinel-2 GeoTIFF 的真彩色渲染
最困难的部分是确定 projection​ 和 extent​ 适合地图视图。在下一步中，我们将使这变得更容易。

‍

二、简化view中的代码

在前面的示例中，我们必须使用有关空间参考系统和图像坐标位置的信息来配置地图视图。

关于图像我们需要知道的第一件事是空间参考系统的标识符。这用于创建 OpenLayers Projection​ （还需要知道单位）：

const projection = new Projection({code: 'EPSG:32721',units: 'm',
});

关于图像我们需要了解的第二件事是它的坐标位置。这用于创建边界框或范围数组：

// metadata from https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/S2B_21HUB_20210915_0_L2A.json
const extent = [300000, 6090260, 409760, 6200020];

有了这些信息，我们终于能够配置地图的视图：

new Map({target: 'map-container',layers: [layer],view: new View({projection: projection,center: getCenter(extent),extent: extent,zoom: 1,}),
});

GeoTIFF 图像通过特殊的“geo”标签扩展了常规 TIFF 图像，这些标签提供有关图像的空间参考系统和坐标位置等信息。 OpenLayers 中的 ol/source/GeoTIFF​ 源解析此信息，并且可以理想地用于配置地图的视图。

GeoTIFF 源的 source.getView()​ 方法返回视图属性的一个promise（例如 projection​ 、 center​ 、 extent​ 和 zoom​ )。

地图构造函数现在接受一个 view 选项，该选项可以是这些相同属性的 promise。因此，我们可以向地图提供来自源的视图属性的 promise，而不是自己深入元数据以查找投影和范围等内容。

更新您的 main.js​ 以便地图构造函数使用这个新方法从源获取视图属性：

new Map({target: 'map-container',layers: [layer],view: source.getView(),
});

现在，可以从 main.js​ 文件中删除 projection​ 、 extent​ 和相关导入（ View​ 、 Projection​ 和 getCenter​ ）。

你应该会在http：//localhost：5173/找到和以前一样的结果–但是这次我们写的代码更少了！

​image​

Sentinel-2 GeoTIFF的真彩色渲染

‍

相关文章：

【openlayers系统学习】3.1-3.2彩色GeoTIFF图像渲染

一、彩色GeoTIFF图像渲染 Sentinel-2 卫星任务收集并传播覆盖地球陆地表面的图像&#xff0c;重访频率为 2 至 5 天。传感器收集多波段图像&#xff0c;其中每个波段都是电磁频谱的一部分。 2A 级 (L2A) 产品提供以下频段的表面反射率测量&#xff1a; BandDescriptionCentra…...

编程日记 2024/5/28 12:41:36

前端自动将 HTTP 请求升级为 HTTPS 请求

前端将HTTP请求升级为HTTPS请求有两种方式&#xff1a; 一、index.html 中插入meta 直接在首页 index.html 的 head 中加入一条 meta 即可&#xff0c;如下所示&#xff1a; <meta http-equiv"Content-Security-Policy" content"upgrade-insecure-requests&…...

编程日记 2024/5/28 12:40:35

辅助驾驶ADAS功能算法介绍

一、ADAS功能分类 按照行驶域划分，将ADAS功能分为行车功能、泊车功能和主动安全功能。 行车功能 ACC（Adaptive Cruise Control）自适应巡航控制TJA（Traffic Jam Assist）交通拥堵辅助LCC（Lane Centering Control）车道居中控制ICC（Integration Cruise Control）智能巡航系…...

编程日记 2024/5/28 12:39:33

Docker 安装kingbase V8r6

下载 官网下载&#xff0c;注意&#xff1a;这里下载 Docker 版本v8r6 安装 # 导入镜像 docker load -i kingbase.tar# 重命名 docker tag [image-name]:[tag] [new-image-name]:[new-tag]# 删除 docker rmi [image-name]:[tag]# 创建容器 docker run -tid \ --privileged \…...

编程日记 2024/5/28 12:38:32

Python 应用打包成 APK【全流程】

将 Python 应用打包成 APK。 文章目录 步骤 1: 安装 Buildozer 和其依赖Linux (Ubuntu) 环境下安装: 步骤 2: 创建你的 Python 应用步骤 3: 配置 Buildozer步骤 4: 打包成 APK总结 步骤 1: 安装 Buildozer 和其依赖 首先确保你的系统中已安装 Python 和 pip。接下来&#xff…...

编程日记 2024/5/28 12:37:31

jmeter之MD5加密接口请求教程

前言&#xff1a; 有时候在项目中&#xff0c;需要使用MD5加密的方法才可以登录&#xff0c;或者在某一个接口中遇到 登录获取token后才可以进行关联&#xff0c;下面介绍下遇到的常见使用 一、第一种方法&#xff1a;使用jmeter自带的函数助手digest 选择工具&#xff0c;选…...

编程日记 2024/5/28 12:36:30

R18 NTN中的RACH-less HO

在看R18 38.300时，发现NTN场景 增加了如下黄色字体的内容，R18 NTN支持了RACH-less HO，索性就简单看了看。 NTN RACH less HO相关的描述主要在38.331,38.213和38.321中。38.300中的描述显示：网络侧会通过RRCReconfiguration消息将RACH-less HO相关的配置下发给UE， 其中会包…...

编程日记 2024/5/28 12:35:29

QT使用gsoap获取手机归属地

1-环境变量 用的win32 E:\hes_scc\tools\gsoap_2.8.134\gsoap-2.8\gsoap\bin\win32 2-生成代码接口 自己建一个目录&#xff0c;在此打开cmd窗口&#xff0c;生成的文件都会在这个文件夹中。 这里用的手机归宿地。 wsdl2h -o GetPhoneInfo.h -s -n Phone -t ....\typemap.…...

编程日记 2024/5/28 12:34:28

抖音本地生活服务商入驻指南分享！

当前&#xff0c;各大平台的团购外卖业务持续火爆&#xff0c;并逐渐成为众多创业赛道中的大热门。其中&#xff0c;本地生活服务更是在短时间内杀出重围&#xff0c;成为创业者们的首选。 根据抖音生活服务近日发布的《2023年度数据报告》&#xff0c;2023年&#xff0c;抖音生…...

编程日记 2024/5/28 12:33:26

【量算分析工具-水平距离】GeoServer改造Springboot番外系列四

【量算分析工具-概述】GeoServer改造Springboot番外系列三-CSDN博客 【量算分析工具-水平距离】GeoServer改造Springboot番外系列四-CSDN博客 【量算分析工具-水平面积】GeoServer改造Springboot番外系列五-CSDN博客 【量算分析工具-方位角】GeoServer改造Springboot番外系列…...

编程日记 2024/5/28 12:32:25

vs2019 c++20 规范的 STL 库的智能指针 shared、unique 、weak 及 make_** 函数的源码注释汇总，和几个结论

智能指针的源码都在 《memory》 头文件中。因为头文件太长&#xff0c;再者本次整理是基于以前的零散的模板分析。故相当于抽取了该头文件中关于智能指针的源码进行分析&#xff0c;注释。 &#xff08;1 探讨一&#xff09;当独占指针指向数组时&#xff0c;其默认的删除器是…...

编程日记 2024/5/28 12:31:24

【大模型】 基于AI和全球化进程的权衡：开源大模型与闭源大模型

【大模型】 基于AI和全球化进程的权衡&#xff1a;开源大模型与闭源大模型 前言 实际上关于开源or闭源&#xff0c;一直以来都是颇有争议的话题&#xff0c;人们争执于数据的隐私性和共享性&#xff0c;到底哪一方能获得的收益更大。而对于开源与闭源哪个更好实际上也就是说是…...

编程日记 2024/5/28 12:30:23

强化学习——学习笔记

一、什么是强化学习&#xff1f; 强化学习 (Reinforcement Learning, RL) 是一种通过与环境交互来学习决策策略的机器学习方法。它的核心思想是让智能体 (Agent) 在执行动作 (Action)、观察环境 (Environment) 反馈的状态 (State) 和奖励 (Reward) 的过程中&#xff0c;学习到…...

编程日记 2024/5/28 12:28:21

NAT简介

一、NAT 概念定义 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是一种将私有 IP 地址转换为公有 IP 地址的技术。 允许一个组织内部使用私有 IP 地址的网络通过少量的公有 IP 地址连接到互联网。实现了私有网络与外部网络的通信&#xf…...

编程日记 2024/5/28 12:27:20

联想凌拓 NetApp AFF C250 全闪存存储助力丰田合成打造数据新“引擎”

联想凌拓 NetApp AFF C250全闪存存储助力丰田合成打造数据新“引擎” 丰田合成&#xff08;张家港&#xff09;科技有限公司&#xff08;以下简称“丰田合成”&#xff09;于2003年12月成立&#xff0c;坐落在中国江苏省张家港市保税区中华路113号&#xff0c;是日本丰田合成株…...

编程日记 2024/5/28 12:26:19

红队技巧：仿冒Windows登录

Metasploit框架&#xff1a;phish_windows_credentials Metasploit带有内置的后期漏洞利用功能&#xff0c;可帮助我们完成任务。由于它是后渗透的模块&#xff0c;因此只需要输入会话即可&#xff1a; use post/windows/gather/phish_windows_credentials set session 1 …...

编程日记 2024/5/28 12:25:18

821. 字符的最短距离 - 力扣

1. 题目 给你一个字符串 s 和一个字符 c &#xff0c;且 c 是 s 中出现过的字符。 返回一个整数数组 answer &#xff0c;其中 answer.length s.length 且 answer[i] 是 s 中从下标 i 到离它 最近 的字符 c 的 距离 。 两个下标 i 和 j 之间的 距离 为 abs(i - j) &#xff0c…...

编程日记 2024/5/28 12:20:11

BI工具如何为金融行业带来变革？金融行业营销管理策略大揭秘

当今数字化时代&#xff0c;金融行业正经历着前所未有的变革。随着大数据、人工智能、区块链等新兴技术的兴起&#xff0c;金融机构正面临着重新定义服务模式、风险管理和客户体验的挑战。商业智能&#xff08;BI&#xff09;作为这一变革的关键驱动力&#xff0c;已经成为金融…...

编程日记 2024/5/28 12:19:10

操作系统 - 计算机系统概述

事前提一嘴 室友考完研了&#xff0c;下一年就是我了&#xff0c;真不想和他们一起考&#xff0c;压力太大了&#xff0c;这里分享一点笔记吧 采用王道考研的书以及视频&#xff0c;去掉了一些书上的废话&#xff0c;加上了视频中的重点&#xff0c;最后总结出来的 如有侵权&a…...

编程日记 2024/5/28 12:16:07

[论文笔记]REACT: SYNERGIZING REASONING AND ACTING IN LANGUAGE MODELS

引言 今天带来一篇经典论文REACT: SYNERGIZING REASONING AND ACTING IN LANGUAGE MODELS的阅读笔记&#xff0c;论文中文意思是 在语言模型中协同推理和行动。 虽然大型语言模型(LLMs)在语言理解和互动决策任务中展现出强大的能力&#xff0c;但它们在推理(例如思维链提示)和…...

编程日记 2024/5/28 12:15:06

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/9/16 1:45:47

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/8/11 15:02:00

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/9/7 8:50:53

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/9/9 10:10:16

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/3 19:49:50

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2025/9/2 3:21:36

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27