Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reprojection for WebGlTile layer

See original GitHub issue

I’m not sure I’m on the right track here and whether this is a bug or a feature or just my lack of knowledge:

I’m trying to show a UTM COG on an EPSG:3857 (or 4326) map, but I can’t get it working. Nothing shows up for the COG, but OSM and fitting the view to the COG extent works. I assume it doesn’t support automatic reprojection or is there a way to do that? A potential use case could be showing two COGs from different UTM zones on a map.

Here’s a repro based on the COG example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Cloud Optimized GeoTIFF (COG)</title>    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.10.0/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.10.0/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.5/proj4.js"></script>
  </head>
  <body>
    <div id="map" style="height: 400px; width: 100%; border: 1px solid black"></div>
    <script>
    // Add CRS definition for COG
    proj4.defs("EPSG:32636","+proj=utm +zone=36 +datum=WGS84 +units=m +no_defs");
    ol.proj.proj4.register(proj4);
    let cogProj = ol.proj.get("EPSG:32636");
  
    // COG source
    const source = new ol.source.GeoTIFF({
      sources: [
        {
          url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/TCI.tif',
        }
      ],
//    projection: cogProj
    });
    
    // Create map
    const map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.WebGLTile({
          source: source
        })
      ],
      view: new ol.View({
        projection: "EPSG:4326" // CRS for map
      })
    });
    
    // Fit to bounds of COG
    source.getView().then(view => {
      // Fit to COG extent
      let fromLonLat = ol.proj.getTransform(view.projection, map.getView().getProjection());
      let extent = ol.extent.applyTransform(view.extent, fromLonLat);
      map.getView().fit(extent);
    });
    </script>
  </body>
</html>

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:14 (13 by maintainers)

Top GitHub Comments

1reaction

mike-000commented, Jan 11, 2022

Reprojection has been done in canvas since OpenLayers 3, and there would little to be gained by redoing it in WebGL plus canvas reprojection of GeoTIFF could be used with ol/layer/Tile on systems without WebGL… DataTileImage could be like a normal source and not need any extra application code to handle the asynchronous loading as long as any projections needed were predefined and you did not want to recenter the view.

const map = new Map({
  target: 'map',
  layers: [
    new WebGLTileLayer({
      source: new DataTileImage({
        source: new GeoTIFF({
          sources: [{ url: './data/example.tif' }]
        }),
        interpolate: false,
        wrapX: true,
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0,
  })
});

1reaction

mike-000commented, Jan 7, 2022

Yes it is possible. Here is a very basic (no tile load error handling, etc.) reprojection to EPSG:3857 https://jsbin.com/loxohux/edit?html,js,output (GeoTIFF is not working in CodeSandbox)

Top Results From Across the Web

Handle ReprojTile in ol/layer/WebGLTile #12976 - GitHub

The WebGL tile layer renderer handles instances of ImageTile as in the WebGL Tiles example but if the tile source is reprojected the...

OpenLayers Examples

Demonstrates the use of style geometries to render source features of a cluster. Filtering features with WebGL (filter-points-webgl.html). Using WebGL to filter ...

Re-project Web Mercator tiles to arbitrary projection with D3?

When we reproject the tiles, we need to add a coordinate space: The(/a) tile set projection. I felt the examples were not particularily...

OpenLayers Examples

Using OpenStreetMap vector tiles. ... Demonstrates client-side raster reprojection between various projections. ... (semi-transparent-layer.html).

Reimagining projections for the interactive maps era - Mapbox

Reprojection of raster map tiles is often not an option because text labels ... in real time on the GPU by correcting the...