WMTS layers have been rendering in OpenLayers 6.5.1 flawlessly in from my code for some time now, but it has recently stopped working.
I can't actually think of anything that I've recently changed in the OpenLayers part of the app, so I've cut it down to a simple OpenLayers-only HMTL+JavaScript and it is still not rendering a WMTS layer. So surely I've changed something and forgotten about it???
But I can't figure out why this is not working. No errors are produced, and the console log message looks good. Additionally, (to answer the question in comments), there are no requests to the WMTS service in the browser debugger (only to OSM). Furthermore, if I edit the tileURLFunction to include a console.log() message, nothing gets logged from there. So it appears that it never even attempts to load any tiles.
Why is this WMTS layer not working?
JSFiddle: https://jsfiddle.net/nsands/m78qygjn/4/
Full code is below.
test.js:
function newLayerWMTS(url, layerName, matrixSetID, projCode, projString) {
var capabilitiesURL = url + '?request=GetCapabilities';
var options;
var request = new XMLHttpRequest();
request.open("GET", capabilitiesURL, false);
request.onload = function (e) {
if ( request.readyState === 4 ) {
if ( request.status === 200 ) {
parsedCapabilities = new ol.format.WMTSCapabilities().read(request.responseText)
options = ol.source.WMTS.optionsFromCapabilities(parsedCapabilities, {
layer: layerName,
matrixSet: matrixSetID,
});
} else {
console.log("REQUEST STATUS: " + request.status);
console.error(request.statusText);
}
} else {
console.log("ONLOAD READY STATE IS NOT 4");
}
};
request.onerror = function (e) {
console.error("REQUEST ERROR " + request.status);
console.error(request.statusText);
};
request.send();
proj4.defs(projCode, projString);
ol.proj.proj4.register(proj4);
options['projection'] = projCode;
console.log(options)
return new ol.layer.Tile({ source: new ol.source.WMTS(options) });
}
var map = new ol.Map({
layers: [],
target: 'map',
controls: [
new ol.control.Attribution({collapsible: false}),
new ol.control.ScaleLine(),
],
view: new ol.View(),
});
map.getView().fit([56322178.5436955, -5207263.87320154, 56358296.78939585, -5129055.83184506], map.getSize(), {constrainResolution: false});
layer = new ol.layer.Tile({ source: new ol.source.OSM() });
map.addLayer(layer);
layer = newLayerWMTS('https://services.thelist.tas.gov.au/arcgis/rest/services/Basemaps/Orthophoto/MapServer/WMTS', 'Basemaps_Orthophoto', 'default028mm', 'EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs');
map.addLayer(layer);
test.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="ol/ol.css" type="text/css" />
<script src="ol/ol.js" type="text/javascript"></script>
<script src="proj4/proj4.js" type="text/javascript"></script>
</head>
<body>
<div id="map" style="position: absolute;top: 0px;left: 0px;height: 100%;width: 100%;margin: 0px;padding: 0px;"></div>
<script src="test.js" type="text/javascript"></script>
</body>
</html>
