openlayers：实现不同投影的两个Sentinel 2 COG (附完整源码）

最新推荐文章于 2025-12-19 16:57:00 发布

源代码大师

最新推荐文章于 2025-12-19 16:57:00 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

分类专栏： openlayers实战教程文章标签： sentinel javascript 前端 openlayers

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/135923165

openlayers实战教程专栏收录该内容

417 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何利用OpenLayers在JavaScript前端实现不同投影的Sentinel 2 COG图像处理。通过分析`main.js`、`index.html`和`package.json`文件，展示了完整的源码示例，帮助读者理解Sentinel 2卫星数据在Web地图中的应用。

openlayers：实现不同投影的两个Sentinel 2 COG

main.js
index.html
package.json

两个Sentinel 2 COG，每个都有可见红、绿色和蓝色波段以及近红外波段的光源。相邻区域位于其各自UTM区域的边缘，因此必须重新投影至少一个COG才能在同一地图上显示。

main.js

import GeoTIFF from 'ol/source/GeoTIFF.js';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import proj4 from 'proj4';
import {createEmpty, extend, getCenter} from 'ol/extent.js';
import {register} from 'ol/proj/proj4.js';
import {transformExtent} from 'ol/proj.js';

proj4.defs('EPSG:32631', '+proj=utm +zone=31 +datum=WGS84 +units=m +no_defs');
proj4.defs('EPSG:32632', '+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs');
register(proj4);

const channels = ['red', 'green', 'blue'];
for (const channel of channels) {
  const selector = document.getElementById(channel);
  selector.addEventListener('change', upda

了解本专栏