Small fixes to WMTSCapabilitiesLoader and WMTSImageSource (#1323)

* WMTS capabilities: handle missing style elements title/isDefault

* WMTS capabilities: handle WGS84BoundingBox without crs

* WMTSIMAGESource: set ContentBounds from layer

* WMTS Capabilities: distinguish between false and missing isDefault

* WMTS Capabilities: simplify check for WGS84BoundingBox

* WMTS Capabilities: always return bool for Style isDefault

* WMTSTiles example: fix crash if WMTS source has not default layer style

* WMTS example: pick first tms that has a supported crs

* WMTS example: auto select CRS compatible layer

* WMTS: simplify code

Author: Ylannl

example/wmtsTiles.js

@@ -8,6 +8,7 @@ import { TilesFadePlugin, UpdateOnChangePlugin, WMTSCapabilitiesLoader, WMTSTile
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 
 const url = window.location.hash.replace( /^#/, '' ) || 'https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
+const compatibleCRSList = [ 'EPSG:4326', 'EPSG:3857' ];
 
 let controls, scene, renderer;
 let tiles, camera, gui;
@@ -50,9 +51,12 @@ async function updateCapabilities() {
 
 	// use a default overlay
 	let defaultLayer = 'MODIS_Terra_CorrectedReflectance_TrueColor';
+
 	if ( ! capabilities.layers.find( l => l.identifier === defaultLayer ) ) {
 
-		defaultLayer = capabilities.layers[ 0 ].identifier;
+		defaultLayer = capabilities.layers.find( l =>
+			l.tileMatrixSets.some( tms => compatibleCRSList.includes( tms.supportedCRS ) )
+		).identifier;
 
 	}
 
@@ -84,8 +88,9 @@ function rebuildGUI() {
 
 	// initialize the layer settings
 	const layer = capabilities.layers.find( l => l.identifier === params.layer );
-	params.style = layer.styles.find( s => s.isDefault ).identifier;
-	params.tileMatrixSet = layer.tileMatrixSets[ 0 ].identifier;
+	params.style = layer.styles.find( s => s.isDefault )?.identifier || layer.styles[ 0 ].identifier;
+	const compatibleTileMatrixSet = layer.tileMatrixSets.find( tms => compatibleCRSList.includes( tms.supportedCRS ) );
+	params.tileMatrixSet = compatibleTileMatrixSet ? compatibleTileMatrixSet.identifier : layer.tileMatrixSets[ 0 ].identifier;
 
 	// update the ui
 	const abstract = capabilities.serviceIdentification.abstract;

src/three/plugins/images/sources/WMTSImageSource.js

@@ -81,7 +81,17 @@ export class WMTSImageSource extends TiledImageSource {
 		// generate the tiling scheme
 		tiling.flipY = true;
 		tiling.setProjection( new ProjectionScheme( projection ) );
-		tiling.setContentBounds( ...tiling.projection.getBounds() );
+
+		if ( layer.boundingBox !== null ) {
+
+			tiling.setContentBounds( ...layer.boundingBox.bounds );
+
+		} else {
+
+			tiling.setContentBounds( ...tiling.projection.getBounds() );
+
+		}
+
 		tileMatrixSet.tileMatrices.forEach( ( tm, i ) => {
 
 			// TODO: needs to set tileCountX from matrix width?

src/three/plugins/loaders/WMTSCapabilitiesLoader.js

@@ -207,7 +207,7 @@ function parseBoundingBox( el ) {
 
 	}
 
-	let crs = el.getAttribute( 'crs' );
+	let crs = el.nodeName.endsWith( 'WGS84BoundingBox' ) ? 'urn:ogc:def:crs:CRS::84' : el.getAttribute( 'crs' );
 	const lowerCorner = parseTuple( el.querySelector( 'LowerCorner' ).textContent );
 	const upperCorner = parseTuple( el.querySelector( 'UpperCorner' ).textContent );
 
@@ -244,7 +244,7 @@ function parseBoundingBox( el ) {
 // parse layer <Style> tag
 function parseStyle( el ) {
 
-	const title = el.querySelector( 'Title' ).textContent;
+	const title = el.querySelector( 'Title' )?.textContent || null;
 	const identifier = el.querySelector( 'Identifier' ).textContent;
 	const isDefault = el.getAttribute( 'isDefault' ) === 'true';