How to add WMTS layer from GeoServer to a map without downloading the get capabilties xml file (in OpenLayers)?

Question

I am new to web mapping and web in general.

I'm adding the default WMTS Italy mosaic that can be found in GeoServer (nurc:mosaic) to my map by following these examples: http://openlayers.org/en/latest/examples/wmts-capabilities.html https://openlayers.org/en/latest/examples/wmts-layer-from-capabilities.html

I downloaded wmts-getcapabilities xml file from my GeoServer's web admin page, simply by clicking on WMTS's 1.0.0. Then saved it within the same directory with my Italy_mosaic_OpenLayers.html file.

And here is how my Italy_mosaic_OpenLayers.html looks like :

var parser = new ol.format.WMTSCapabilities();

var map;

fetch('wmts-getcapabilities.xml').then(function(response) {
    return response.text();
}).then(function(text) {
    var result = parser.read(text);

    var options = ol.source.WMTS.optionsFromCapabilities(result, {
        layer: 'nurc:mosaic',
        matrixSet: 'EPSG:4326',
        format: 'image/png'
    });

    map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM(),
                opacity: 1
            }),
            new ol.layer.Tile({
                opacity: 0.6,
                source: new ol.source.WMTS(/** @type {!olx.source.WMTSOptions} */ (options))
            })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([22, 42]),
            zoom: 5,
            projection:'EPSG:900913'
        })
    });
})

This code works only when my "wmts-getcapabilities.xml" file is in the same directory with my "Italy_mosaic_OpenLayers.html" file. However if I were to renew my Italy_ mosaic raster file I would have to download "wmts-getcapabilities.xml" file again and place it to the same directory(by the "Italy_mosaic_OpenLayers.html" file) again.

To avoid replacement of the xml file again and again, I tried to put 'http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetCapabilities' instead of 'wmts-getcapabilities-xml' in my code, however I had a blank page. I also tried different matrixSet-projection combinations; no matter what matrixSet-projection combination I tried (I tried 9 possibilities, 3 for each (4326,3857 and 900913)), with fetch('http://localhost:8081/geoserver/gwc/service/wmts?REQUEST=GetCapabilities') I always had a blank page (not gray).

Here is my fiddle https://jsfiddle.net/qjcadvzq/15/

What am I missing ?

Answer 1

In the OL example that you have linked, the WMTSCapabilities.xml is read not read locally but directly from the server. You don't want any manual intervention between the server and the webapp, so it is better to always read the file from the server.

 fetch('https://openlayers.org/en/v4.6.4/examples/data/WMTSCapabilities.xml').then(function(response) { ...

which can turn into

fetch('http://localhost:8081/geoserver/gwc/service/wmts?request=getcapabilities').then(function(response) { ...

You said

I downloaded wmts-getcapabilities xml file from my GeoServer's web admin page, simply by clicking on WMTS's 1.0.0

You can copy the link from there instead of the file, and use this link as the URL in the above code.