TypeScript

HTML

<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>GeoTIFF with Overviews</title>
  </head>
  <body>
    <div id="map" class="map"></div>
 
  </body>
</html>

CSS

.map {
        width: 100%;
        height: 400px;
      }

TypeScript

const source = new ol.source.GeoTIFF({
  sources: [
    {
      url: 'https://openlayers.org/data/raster/no-overviews.tif',
      overviews: ['https://openlayers.org/data/raster/no-overviews.tif.ovr'],
    },
  ],
});

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.WebGLTile({
      source: source,
    }),
  ],
  view: source.getView(),
});