Demonstrates how a GeoTIFF can be rendered in a different projection.
This example demonstrates how data from a GeoTIFF in one projection can be displayed on a map with a different projection. For other source types, it is necessary to specify the source projection when it differs from the map view projection. In this example, information about the source projection is included in the GeoTIFF metadata, so it doesn't need to be specified in the application code.
The source.getView()
method returns a promise that resolves after the GeoTIFF metadata has
been fetched. This can be used to get the image projection information along with the image extent and
center coordinates. The transform()
function is used to transform the source imagery center
coordinate when updating the view.
OpenLayers has built-in reprojection support for sources in Universal Transverse Mercator (UTM) projections. Since the source data shown here is in UTM Zone 36 N, no additional configuration is needed to reproject the data to the map projection (Spherical Mercator).
See these other examples for details on the following:
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import {transform} from 'ol/proj.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';
const source = new GeoTIFF({
sources: [
{
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
},
],
});
const map = new Map({
target: 'map',
layers: [new TileLayer({source})],
view: new View({
center: [0, 0],
zoom: 12,
}),
});
// after GeoTIFF metadata has been read, recenter the map to show the image
source.getView().then((sourceView) => {
const view = map.getView();
// transform the image center to view coorindates
const center = transform(
sourceView.center,
sourceView.projection,
view.getProjection(),
);
// update the view to show the image
view.setCenter(center);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GeoTIFF Reprojection</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "geotiff-reprojection",
"dependencies": {
"ol": "10.4.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}