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

一、彩色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的真彩色渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/13503.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LVDS与IDELAY

摘要&#xff1a;LVDS&#xff08;Low-Voltage Differential Signaling&#xff09;低电压差分信号&#xff0c;是一种低功耗、低误码率、低串扰和低辐射的差分信号技术&#xff1b;LVDS会被经常使用到&#xff0c;使用的过程中难免会碰到时序问题&#xff0c;需要借助IDELAY进…

【Qt问题】QStringLiteral、QString、QLatin1String简单区分

【Qt问题】QStringLiteral、QString、QLatin1String简单区分 最近在看项目代码的时候&#xff0c;一个频繁使用的关键词——“QStringLiteral”&#xff0c;引起了我的注意&#xff0c;关键是我竟然对它非常模糊&#xff0c;这不是一个Qter能够轻易接受的事情。 于是我秉承着…

前端学习-day08

文章目录 01-相对定位02-绝对定位03-绝对定位居中04-固定定位05-堆叠顺序06-CSS精灵-基本使用07-案例-京东服务08-字体图标10.垂直对齐方式11-过度12-透明度13-光标类型14-轮播图 01-相对定位 <!DOCTYPE html> <html lang"en"> <head><meta ch…

动态规划(算法)---01.斐波那契数列模型_第N个泰波那契数

前言&#xff1a; 有一个很著名的公式 “程序数据结构算法”。 算法是模型分析的一组可行的&#xff0c;确定的&#xff0c;有穷的规则。通俗的说&#xff0c;算法也可以理解为一个解题步骤&#xff0c;有一些基本运算和规定的顺序构成。但是从计算机程序设计的角度看&#xff…

【C++】牛客 ——NC138 矩阵最长递增路径

✨题目链接&#xff1a; NC138 矩阵最长递增路径 ✨题目描述 给定一个 n 行 m 列矩阵 matrix &#xff0c;矩阵内所有数均为非负整数。 你需要在矩阵中找到一条最长路径&#xff0c;使这条路径上的元素是递增的。并输出这条最长路径的长度。 这个路径必须满足以下条件&#…

Django项目从创建到开发以及数据库连接的主要步骤,精简实用

1、项目创建 安装命令&#xff1a;pip install django3 -i <https://pypi.tuna.tsinghua.edu.cn/simple>上述命令是使用清华镜像&#xff0c;安装django3在项目的创建目录执行命令&#xff1a;django-admin startproject 项目名称&#xff08;英文&#xff09;就可以在指…

ubuntu18 安装sudo

ubuntu18 安装sudo 在Ubuntu 18.04上安装sudo通常是不必要的&#xff0c;因为sudo是Ubuntu及其衍生版本的基本包之一&#xff0c;默认情况下就已经安装。如果出于某种原因&#xff0c;sudo没有预装或者你需要升级到最新版本&#xff0c;你可以通过以下命令安装或更新它&#x…

【STM32项目】基于stm32智能鱼缸控制系统的设计与实现(完整工程资料源码)

实物演示效果 基于stm32智能鱼缸控制系统的设计与实现 目录&#xff1a; 实物演示效果 目录&#xff1a; 一、 绪论 1.1 项目研究目的及意义 1.1.1 选题目的 1.1.2 选题意义 1.2 国内外研究现状 1.2.1 国外发展现状 1.2.2 国内发展现状 1.3 项目研究内容 二、智能鱼缸系统总体设…

一文读懂Linux

前言 为了便于理解&#xff0c;本文从常用操作和概念开始讲起。虽然已经尽量做到简化&#xff0c;但是涉及到的内容还是有点多。在面试中&#xff0c;Linux 知识点相对于网络和操作系统等知识点而言不是那么重要&#xff0c;只需要重点掌握一些原理和命令即可。为了方便大家准…

2024年5月19日优雅草蜻蜓K知识付费系统旗舰版v1.0.9进度更新

v1.1.0更新 v1.1.0更新 2024年5月19日优雅草蜻蜓K知识付费系统旗舰版v1.0.9进度更新&#xff0c;首页体育栏目完善新增用户发布页面 开发进度 首页体育栏目完善 新增用户发布页面 新增用户登录完善 新增学习课程页面完善-过往课程数据完成 去掉其他三方登录&#xff0c;新增…

团队代码质量利器:ESLint 搭配 Prettier

一个中大型项目&#xff0c;一般由团队成员共同开发维护。但每个开发人员都有独特的代码编写风格和不同的文本编辑器。那么如何解决同一项目中有太多不同编码风格的问题&#xff1f;如何实现相同的编码风格&#xff0c;避免团队成员之间的许多警告呢&#xff1f; 答案就是&…

Web Accessibility基础:构建无障碍的前端应用

Web Accessibility&#xff08;网络无障碍&#xff09;是确保所有人都能平等访问和使用网站和应用程序的关键。这包括视觉、听觉、运动和认知能力有限的用户。以下是一些构建无障碍前端应用的基础原则和代码示例&#xff1a; 2500G计算机入门到高级架构师开发资料超级大礼包免…

list stream 改变list属性的值

在Java中&#xff0c;如果你想使用Stream API来改变List中对象的某个属性值&#xff0c;需要注意的是&#xff0c;Stream API本身设计为不可变操作&#xff0c;即它不直接修改原有的集合&#xff0c;而是产生一个新的流或集合。但是&#xff0c;你可以通过流操作来创建一个新的…

java文档管理系统的设计与实现源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的文档管理系统的设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 文档管理系统的…

第二证券今日投资参考:5月国产游戏版号发放 猪价加速上涨

昨日&#xff0c;两市股指盘中震荡上扬&#xff0c;沪指盘中续创年内新高&#xff0c;创业板指一度涨超1%。到收盘&#xff0c;沪指涨0.54%报3171.15点&#xff0c;深证成指涨0.43%报9750.82点&#xff0c;创业板指涨0.59%报1875.93点&#xff0c;上证50指数涨0.34%&#xff1b…

小程序-收货地址管理模块实现

页面结构代码&#xff1a; address-form.vue --->新建地址和修改地址页面 <template><view class"content"><form><!-- 表单内容 --><view class"form-item"><text class"label">收货人</text>…

注册/认证小程序为什么验证失败

​很多商家在注册/认证小程序时&#xff0c;经常会出现各种验证失败的情况。其中可能是工商总局数据没更新&#xff0c;也有可能是商家填写的信息有误。下面具体分析一下这些情况。 一、工商数据没有更新或存在异常。 微信平台是直接拉取国家工商总局的数据&#xff0c;工商数…

Python 中文编码问题

Python 输出 "Hello, World!"&#xff0c;英文没有问题&#xff0c;但是如果你输出中文字符 "你好&#xff0c;中国" 就有可能会碰到中文编码问题。 Python 文件中如果未指定编码&#xff0c;在执行过程会出现报错&#xff1a; print ("你好&#x…

登录安全分析报告:创蓝云智注册

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

vue 组件中 data 为什么必须是函数

在 Vue 中&#xff0c;组件的 data 必须是一个函数而不是一个对象&#xff0c;这是因为 Vue 组件是可复用的&#xff0c;并且每个组件实例都需要拥有自己独立的数据状态。如果 data 是一个对象&#xff0c;那么这个对象在多个组件实例之间将是共享的&#xff0c;这会导致所有的…