做设计赚钱的网站,天津企业做网站,wordpress好用的文件管理,阿里巴巴运营要学多久一、彩色GeoTIFF图像渲染
Sentinel-2 卫星任务收集并传播覆盖地球陆地表面的图像#xff0c;重访频率为 2 至 5 天。传感器收集多波段图像#xff0c;其中每个波段都是电磁频谱的一部分。 2A 级 (L2A) 产品提供以下频段的表面反射率测量#xff1a;
BandDescriptionCentra…一、彩色GeoTIFF图像渲染
Sentinel-2 卫星任务收集并传播覆盖地球陆地表面的图像重访频率为 2 至 5 天。传感器收集多波段图像其中每个波段都是电磁频谱的一部分。 2A 级 (L2A) 产品提供以下频段的表面反射率测量
BandDescriptionCentral Wavelength (μm)Resolution (m)B01Coastal aerosol0.43360B02Blue0.46010B03Green0.56010B04Red0.66510B05Vegetation red edge0.70520B06Vegetation red edge0.74020B07Vegetation red edge0.78320B08Near-infrared0.84210B09Water vapor0.94560B10Short-wave infrared - Cirrus1.37560B11Short-wave infrared1.61020B12Short-wave infrared2.19020
有一系列 Sentinel-2 L2A 产品作为云优化的 GeoTIFF 存储在 Amazon S3 上。在这个练习中我们将在地图上渲染其中一个产品。
首先重置您的 index.html 以便我们准备好渲染整页地图
!DOCTYPE html
htmlheadmeta charsetutf-8titleOpenLayers/titlestyleimport node_modules/ol/ol.css;/stylestylehtml, body, #map-container {margin: 0;height: 100%;width: 100%;font-family: sans-serif;}/style/headbodydiv idmap-container/divscript src./main.js typemodule/script/body
/html
现在我们将导入两个以前未使用过的新组件
用于处理多波段栅格数据的 ol/source/GeoTIFFol/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//localhost5173/找到和以前一样的结果–但是这次我们写的代码更少了
Sentinel-2 GeoTIFF的真彩色渲染
