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

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

news 2026/2/8 23:20: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

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/8 4:37:34

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/2/8 3:32:52

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2026/2/7 1:51:12

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2026/1/24 13:01:05

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37