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

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

news 2026/5/22 11:56:45

一、彩色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

G3000,MG3660,MG3640S,TS3380,G3800,TS3480,TS3680,TS3460,TS3350,MG6380报错5B00,P07,E08，1700，5b04废墨垫清零,好用

下载&#xff1a;点这里下载 备用下载&#xff1a;https://pan.baidu.com/s/1WrPFvdV8sq-qI3_NgO2EvA?pwd0000 常见型号如下&#xff1a; G系列 G1000、G1100、G1200、G1400、G1500、G1800、G1900、G1010、G1110、G1120、G1410、G1420、G1411、G1510、G1520、G1810、G1820、…...

编程新知 2026/5/22 11:42:37

CANN Profiling 与性能分析：定位训练与推理瓶颈

一、为什么需要 Profiling 1.1 性能问题的来源 深度学习训练和推理的性能瓶颈可能来自多个环节&#xff1a;数据准备慢导致 GPU 空闲、模型算子计算慢成为瓶颈、内存拷贝频繁拖累整体、通信带宽受限拖慢分布式训练。不同瓶颈的优化方法完全不同&#xff0c;错误的优化方向不仅浪…...

编程新知 2026/5/22 11:34:30

STC8A8K64S4A12单片机PWM调速实战：手把手教你搞定循迹小车的电机驱动与速度控制

STC8A8K64S4A12单片机PWM调速实战&#xff1a;从原理到电机精准控制 当你想让一个小车平稳地沿着黑线行驶&#xff0c;或者在转弯时保持优雅的姿态&#xff0c;PWM调速技术就是那个藏在幕后的魔术师。STC8A8K64S4A12这颗国产单片机内置的硬件PWM模块&#xff0c;正是实现这一切…...

编程新知 2026/5/22 10:59:16

AspectCore-Framework扩展组件全解析：与ASP.NET Core、Autofac、LightInject无缝集成

AspectCore-Framework扩展组件全解析&#xff1a;与ASP.NET Core、Autofac、LightInject无缝集成 【免费下载链接】AspectCore-Framework AspectCore is an AOP-based cross platform framework for .NET Standard. 项目地址: https://gitcode.com/gh_mirrors/as/AspectCore-…...

编程新知 2026/5/22 10:36:13

uView 2.0插件开发指南：如何扩展自定义组件与工具函数

uView 2.0插件开发指南&#xff1a;如何扩展自定义组件与工具函数 【免费下载链接】uView2.0 uView UI&#xff0c;是全面兼容nvue的uni-app生态框架&#xff0c;全面的组件和便捷的工具会让您信手拈来&#xff0c;如鱼得水 项目地址: https://gitcode.com/gh_mirrors/uv/uVi…...

编程新知 2026/5/22 9:50:00

全面实战指南：如何高效部署ChatTTS-ui语音合成系统

全面实战指南&#xff1a;如何高效部署ChatTTS-ui语音合成系统 【免费下载链接】ChatTTS-ui 一个简单的本地网页界面&#xff0c;使用ChatTTS将文字合成为语音&#xff0c;同时支持对外提供API接口。A simple native web interface that uses ChatTTS to synthesize text into …...

编程新知 2026/5/22 9:41:18

FlashAttention 在昇腾NPU上到底快在哪？一次拆透 ops-transformer 的核心算子

这是一篇关于昇腾NPU上FlashAttention技术深度解析的CSDN博客文章。文章结合了您提供的网页信息&#xff08;特别是ops-transformer仓库的上下文&#xff09;以及深度学习算子优化的专业知识&#xff0c;旨在帮助开发者理解其原理、优势及在昇腾生态中的应用。 FlashAttention …...

编程新知 2026/5/22 9:00:32

Palantir 现在干的活，本质上就是你描述的那个方向，但它在“深度”和“广度”上比你目前的 MVP 设想走得更远。如果说你想做的是一个“能听懂人话的 SQL 查询工具”，那么 Palantir

Palantir 现在干的活&#xff0c;本质上就是你描述的那个方向&#xff0c;但它在“深度”和“广度”上比你目前的 MVP 设想走得更远。如果说你想做的是一个“能听懂人话的 SQL 查询工具”&#xff0c;那么 Palantir 构建的是一个 “企业级的数字孪生操作系统”。它不仅仅是在“…...

编程新知 2026/5/22 8:15:14

GitHub中文界面转换指南：3步打造专属中文GitHub环境

GitHub中文界面转换指南&#xff1a;3步打造专属中文GitHub环境 【免费下载链接】github-chinese GitHub 汉化插件&#xff0c;GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 当我们第一次接触GitH…...

编程新知 2026/5/22 7:38:55

百度网盘高速下载神器：baidu-wangpan-parse全攻略，告别龟速下载！

百度网盘高速下载神器&#xff1a;baidu-wangpan-parse全攻略&#xff0c;告别龟速下载&#xff01; 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 还在为百度网盘那令人抓狂…...

编程新知 2026/5/22 7:34:45