Blank page using WMTS' function from OpenLayers

Question

I'm trying to display a WMTS layer in a simple webmap based on OpenLayers 6.14.1, below my code:

var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults({
        attribution: false
    }),
});
var view = new ol.View({
    center: ol.proj.fromLonLat([14.483733304611981, 40.69930245824812]),
    zoom: 14,
    maxZoom: 20,
    minZoom: 12
});
map.setView(view);

var osm = new ol.layer.Tile({
    source: new ol.source.OSM(),
    zIndex: 0
});
map.addLayer(osm);

var wmtsSource = 'http://sit.cittametropolitana.na.it/geoserver/gwc/service/wmts'

var raster2021 = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: wmtsSource,
        layer: 'raster:2021_Worldview3_RGB',
    }),
});
map.addLayer(raster2021);

I'm be able to see raster:2020_Worldview3_RGB in QGIS but I can't see it on a webmap because of this error:

Uncaught TypeError: r is null
    px file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    ju file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    getTileInternal file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    getTile file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    getTile file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    renderFrame file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    render file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    renderFrame file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    Wi file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    Bi file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    render file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    dr file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    dispatchEvent file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    notify file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    set file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    setSize file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    updateSize file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    pr file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    dispatchEvent file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    notify file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    set file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    setProperties file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    n file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    n file:///home/max/DEV/StabiaeGIS/assets/libraries/openlayers6.14.1/ol.js:2
    <anonymous> file:///home/max/DEV/StabiaeGIS/assets/js/test.js:2

It is the first time that I use the WMTS function, the log from error doesn't help me to understand where is the problem. Where is my mistake?

Answer 1

You will also need to specify the matrixSet and a WMTS tileGrid with matrixIds.

The simplest way to do that is to fetch the capabilities and let OpenLayers construct the options. The matrix set projection is EPSG:32633 so you will also need include the proj4 library and register the projection definition.

proj4.defs('EPSG:32633', '+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs +type=crs');
ol.proj.proj4.register(proj4);

var wmtsSource = 'https://sit.cittametropolitana.na.it/geoserver/gwc/service/wmts';

var raster2021 = new ol.layer.Tile();
map.addLayer(raster2021);

fetch(wmtsSource + '?SERVICE=WMTS&request=GetCapabilities')
  .then(function (response) {
    return response.text();
  })
  .then(function (text) {
    var result = new ol.format.WMTSCapabilities().read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'raster:2021_Worldview3_RGB',
    });
    raster2021.setSource(new ol.source.WMTS(options));
  });

Working example https://jsbin.com/zimitifawe/edit?html,output