Combining Openlayers, WM(T)S, and OGCAPI

Question

I would like to combine a WMS or WMTS and a OGC API in open layers. This code in codepen is working with OpenStreetMap, but when adding a WMTS or Tile the OGC API I don't get any data from the OGC API.

This is the javascript code:

var map = new ol.Map({
  view: new ol.View({
    center: [1102000, 8461000],
    zoom: 9
  }),
  layers: [ 
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }) 
  ],
  target: 'map'
});

(async () => {
  const adresser = await fetch('https://ogcapitest.kartverket.no/ldproxy/rest/services/matrikkelenadresse/collections/Vegadresse/items?kommunenummer=3007&limit=2000', {
    headers: {
      'Accept': 'application/geo+json'
    }
    //Jevnaker=3053
  }).then(response => response.json());
  const iconurl = 'data:image/svg+xml;base64,'+btoa('<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" rx="24" fill="#000"/><path d="M 91.268,28.17 C 91.308,16.432 109.015,16.432 109.015,28.514 L 109.015,77.831 L 178.023,119.336 L 178.023,137.549 L 109.319,114.945 L 109.319,151.776 L 125.205,164.221 L 125.205,178.61 L 100.698,171.001 L 76.191,178.61 L 76.191,164.221 L 91.915,151.776 L 91.915,114.945 L 23.191,137.549 L 23.191,119.336 L 91.248,77.831 L 91.248,28.17 z" fill="#fff"/></svg>');
  map.addLayer(new ol.layer.Vector({
    source: new ol.source.Vector({
      features: new ol.format.GeoJSON().readFeatures(adresser, { featureProjection: 'EPSG:3857' }),
      attributions: 'Contains OS data &copy; Crown copyright and database right 2021.'
    }),
    style: new ol.style.Style({
        image: new ol.style.Icon({
          src: 'http://register.geonorge.no/symbol/files/kulturminner/sefrak---meldepliktig-iht-kulturminneloven-25_roed.svg',
          opacity: 0.9,
          scale: 0.8
        })
      })
  }));
})();

This is the code for a WMTS that is working fine without adding the OGC API:

    var sProjection = 'EPSG:25833';
    var extent = {
      'EPSG:3857': [20037508.34, 20037508.34, 20037508.34, 20037508.34],
      'EPSG:25833': [-2500000, 3500000, 3045984, 9045984],   
      'EPSG:25832': [-78460.1, 6284830, 1668310, 8107690],  
      'EPSG:32633': [-2500000, 3500000, 3045984, 9045984]
    };

    var projection = new ol.proj.Projection({
      code: sProjection,
      extent: extent[sProjection]
    });
    ol.proj.addProjection(projection);

    var view = new ol.View({
      projection: projection,
//      center: [569771, 6670986], //UTM32
      center: [236976, 6679774], //UTM33
      zoom: 9
    });

    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = [],
      matrixIds = [];

    for (var z = 0; z < 21; ++z) { //Max 18?
      resolutions[z] = size / Math.pow(2, z);
      matrixIds[z] = sProjection + ":" + z;
    }

    var map = new ol.Map({
      view: view, 
      layers: [
        new ol.layer.Tile({
          title: "norgeskart_bakgrunn",
          source: new ol.source.WMTS({
            url: "http://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?gkt=9522B7345B9DB58F79351C51605635397CE41994B328463E8DF829231A08590AA9678AB96D6E1FC113B57E5BAA3F284CBC8633929A70B5118D018F0853CD0DA1",
//url: "https://opencache.statkart.no/gatekeeper/gk/gk.open_nib_utm32_wmts_v2?",
            layer: "norgeskart_bakgrunn2",
            matrixSet: sProjection,
            format: 'image/png',
            projection: projection,
            tileGrid: new ol.tilegrid.WMTS({
              origin: ol.extent.getTopLeft(projection.getExtent()),
              resolutions: resolutions,
              matrixIds: matrixIds
            }),
            style: 'default'
          })
        })
      ],
      target: 'map'
    });

Answer 1

Using a WMS tile cache, this is how this can be done in the JS using a WMS from the Norwegian Mapping Authority:

const positionringerike = [10.2, 60.1]
var map = new ol.Map({
  view: new ol.View({
    center: ol.proj.fromLonLat(positionringerike),
    zoom: 9
  }),
  layers: [ 
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://cache.kartverket.no/topo4/v1/gmaps/{z}/{x}/{y}.png'
      })
    }) 
  ],
  target: 'map'
});