I use fetch WMTSCapabilities but I get this message: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Layer') at Function.rL.source.WMTS.optionsFromCapabilities (ol.js:2)
This is the code I use:
const parser = new ol.format.WMTSCapabilities();
let bgRaster;
fetch('data/WMTSCapabilities.xml')
.then(function (response) {
return response.text();
})
.then(function (text) {
const result = parser.read(text);
const options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'standaard',
format: 'image/png',
matrixSet: 'EPSG:28992',
});
bgRaster = new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS(options),
title: 'Kadaster',
visible: false
});
})
This looks like it is failing at this line in optionsFromCapabilities from the OpenLayers source:
export function optionsFromCapabilities(wmtsCap, config) {
const layers = wmtsCap['Contents']['Layer'];
Check that you are getting a valid WMTSCapabilities.xml including the Contents tag
It should look similar to this xml
Thanks, I've got it working now with another approach, by programming origin,extend and resolution like this:
const size = ol.extent.getWidth(projectionExtent) / 256;
// Er zijn 20 (0 tot 19) zoomniveaus beschikbaar van de WMTS-service voor de BGT-Achtergrondkaart:
let matrixIds = new Array(20);
for (let z = 0; z < 10; ++z) {
matrixIds[z] = 'EPSG:3857:0' + z;
}
for (let z = 10; z < 20; ++z) {
matrixIds[z] = 'EPSG:3857:' + z;
}
const bgRaster = new ol.layer.Tile({
extent: projectionExtent,
source: new ol.source.WMTS({
attributions: 'Kaartgegevens: © <a href="https://www.kadaster.nl">Kadaster</a>',
url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0?',
layer: 'standaard',
matrixSet: 'EPSG:3857',
format: 'image/png',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
// origin: -285401.92 + "," + 903402.0,
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
wrapX: false
}),
title: 'Kadaster',
visible: true
});