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

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

news 2026/4/3 5:49:03

一、彩色GeoTIFF图像渲染

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

Band	Description	Central Wavelength (μm)	Resolution (m)
B01	Coastal aerosol	0.433	60
B02	Blue	0.460	10
B03	Green	0.560	10
B04	Red	0.665	10
B05	Vegetation red edge	0.705	20
B06	Vegetation red edge	0.740	20
B07	Vegetation red edge	0.783	20
B08	Near-infrared	0.842	10
B09	Water vapor	0.945	60
B10	Short-wave infrared - Cirrus	1.375	60
B11	Short-wave infrared	1.610	20
B12	Short-wave infrared	2.190	20

有一系列 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。

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/找到和以前一样的结果–但是这次我们写的代码更少了！

Sentinel-2 GeoTIFF的真彩色渲染

‍

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

一、彩色GeoTIFF图像渲染

二、简化view中的代码

相关文章：

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

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

辅助驾驶ADAS功能算法介绍

Docker 安装kingbase V8r6

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

jmeter之MD5加密接口请求教程

R18 NTN中的RACH-less HO

QT使用gsoap获取手机归属地

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

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

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

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

强化学习——学习笔记

NAT简介

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

红队技巧：仿冒Windows登录

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

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

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

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

如何构建LaTeX-Workshop的自动化测试与持续集成流程：开发者完整指南

快捷键失灵？让Hotkey Detective揪出幕后“键盘小偷“——专业级Windows热键冲突解决方案

AI辅助开发新体验：描述你的健康应用构想，快马一键生成Compose项目代码

网安工程师好就业吗？零基础转行如何操作？

MentorBit红外驱动库：裸机与RTOS下的精准时序控制

新手避坑指南：用Selenium和MongoDB爬取东方财富股吧评论（附完整代码）

护网行动入门指南：零基础也能参与，快速积累网安实战经验

Marigold开发者手册：深入理解训练代码和自定义扩展

5分钟掌握gInk：让屏幕标注如同纸上书写的终极指南

怕 AI 短剧平台抽成？自研 AI 短剧创作系统贴牌合作，全部收益自留