Behave like a 3857 tile service when google compatible flag found in COG file

[sharkAndshark]

Not an actual PR but a concept prove(Currently it's really messy). But if it works, it might be split to many PRs to make review easy.
Trying to fix #1820

[sharkAndshark]

To verify this PR

Download and transform

Using a tif file from openlayers offcial demo

curl -o tci_original.tif 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
gdalwarp -t_srs EPSG:3857 tci_original.tif tci_3857.tif
gdal_translate -of COG -co TILING_SCHEME=GoogleMapsCompatible tci_3857.tif tci.tif 

Start martin with this branch

martin tci.tif

Create openlayers project

npm create ol-app my-app
cd my-app

Update main.js

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new TileLayer({
      source: new XYZ({
        url: 'http://ubuntu.orb.local:3000/tci/{z}/{x}/{y}',
        tileSize: 512
      })
    })
  ],
  view: new View({
    center: [3732694, 1882165],
    zoom: 14 
  })
});

Start openlayers project

npm start

You could see the tiles are where they should be when zooming and draging the map.

Without this feature

We need to add the custom gridset without this feature and we are still trying to find the best way to tell it to user in #343

# running on main branch
martin tci.tif

the main.js

import './style.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ.js';


import TileGrid from 'ol/tilegrid/TileGrid.js';

// the tiling schema could be GoogleMapsCompatible, see https://gdal.org/en/latest/drivers/raster/cog.html#reprojection-related-creation-options
var custom_grid = new TileGrid({
  extent: [
    3671423.342593584,
    1824704.7392237284,
    3788830.618039615,
    1944557.9995748848],
  resolutions: [
    611.49622628141,
    305.748113140705,
    152.8740565703525,
    76.43702828517625,
    38.21851414258813,
    19.109257071294063,
    9.554628535647032],
  tileSize: [256, 256],
  origin: [ 3671423.342593584,
    1944557.9995748848]
});

var source = new XYZ({
  url: "http://ubuntu.orb.local:3000/tci/{z}/{x}/{y}", tileGrid: custom_grid
});

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://api.maptiler.com/maps/basic/{z}/{x}/{y}.png?key=vgdy5zgzM4IIqQCC6SOn',
        attributions: '© MapTiler © OpenStreetMap contributors'
      })
    }),
    new TileLayer({
      source: source
    }),

  ],
  view: new View({
    center: [3671423.342593584,
      1944557.9995748848],
    zoom: 14
  })
});

[sharkAndshark]

This PR would be split to many to get review easy and save the time of maintainers:

• Add helper methods to get the very basic info from cog: tie_points, pixel_scale, transformation matrix
• Add helper methods to get the extent, origin, resolutions etc
• Cleanup and refactor
• Implement this feature

[CommanderStorm]

I am not sure what the status of this PR is, but the following PR seems like solving the same thing

• feat(unstable-cog): Change tile path semantics for COG sources to match other sources, expose COG bounds, center and tileSize in TileJSON #2510

Lets track this there