COG with ModelTransformation

cog 14 projection 14 ModelTransformation 1

COG with ModelTransformation.

Example of using a COG with ModelTransformation. A ModelTransformation may rotate or skew the tile grid relative to the reported projection. This can be reprojected to that or any other supported projection. To apply the ModelTransformation to ol/source/TileDebug use the source option.

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import {fromEPSGCode, register} from 'ol/proj/proj4.js';
import {transformExtent} from 'ol/proj.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';
import OSM from 'ol/source/OSM.js';
import TileDebug from 'ol/source/TileDebug.js';
import proj4 from 'proj4';

register(proj4);

const cogSource = new GeoTIFF({
  sources: [
    {
      url:
        'https://umbra-open-data-catalog.s3.amazonaws.com/sar-data/tasks/Tanna%20Island,%20Vanuatu/' +
        '9c76a918-9247-42bf-b9f6-3b4f672bc148/2023-02-12-21-33-56_UMBRA-04/2023-02-12-21-33-56_UMBRA-04_GEC.tif',
    },
  ],
});

const showTilesCheckbox = document.getElementById('show-tiles');
const debugLayer = new TileLayer({
  source: new TileDebug({source: cogSource}),
  visible: showTilesCheckbox.checked,
});
showTilesCheckbox.addEventListener('change', () => {
  debugLayer.setVisible(showTilesCheckbox.checked);
});

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    new TileLayer({
      source: cogSource,
      opacity: 0.8,
    }),
    debugLayer,
  ],
  view: new View(),
});

cogSource.getView().then((viewConfig) =>
  fromEPSGCode(viewConfig.projection.getCode()).then(() => {
    const view = map.getView();
    view.fit(
      transformExtent(
        viewConfig.extent,
        viewConfig.projection,
        view.getProjection(),
      ),
    );
  }),
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>COG with ModelTransformation</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>
    <form>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="show-tiles" checked />
        <label class="form-check-label" for="show-tiles">Show source tile coordinates</label><br>
      </div>
    </form>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "cog-modeltransformation",
  "dependencies": {
    "ol": "10.5.0",
    "proj4": "2.15.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}