Adds support for external imagery providers in CesiumIonOverlay

example/quantMeshOverlays.js

@@ -26,7 +26,7 @@ const params = {
 	enableCacheDisplay: false,
 	enableRendererStats: false,
 	enableTileSplitting: true,
-	mapBase: false,
+	mapBase: 3954,
 	errorTarget: 2,
 	opacity: 1.0,
 	color: '#ffffff',
@@ -114,7 +114,14 @@ function init() {
 	gui.add( params, 'enableCacheDisplay' );
 	gui.add( params, 'enableRendererStats' );
 	gui.add( params, 'enableTileSplitting' );
-	gui.add( params, 'mapBase' ).name( 'OpenStreetMap' ).onChange( updateBaseOverlay );
+	gui.add( params, 'mapBase', {
+		'Sentinel-2': 3954,
+		OpenStreetMap: 0,
+		'Google Maps Satellite': 3830183,
+		'Google Maps Roadmap': 3830184,
+		'Bing Maps Aerial': 3,
+		'Bing Maps Road': 4,
+	} ).name( 'Base map' ).onChange( updateBaseOverlay );
 	gui.add( params, 'errorTarget', 1, 30, 1 );
 
 	const washingtonFolder = gui.addFolder( 'Washington DC Layer' );
@@ -146,7 +153,7 @@ function updateBaseOverlay() {
 
 	}
 
-	if ( params.mapBase ) {
+	if ( params.mapBase === 0 ) {
 
 		baseOverlay = new XYZTilesOverlay( {
 			url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -155,7 +162,7 @@ function updateBaseOverlay() {
 	} else {
 
 		baseOverlay = new CesiumIonOverlay( {
-			assetId: '3954',
+			assetId: params.mapBase,
 			apiToken: import.meta.env.VITE_ION_KEY,
 		} );
 

src/three/plugins/images/ImageOverlayPlugin.js

@@ -2,7 +2,7 @@ import { WebGLRenderTarget, Color, SRGBColorSpace, BufferAttribute, Matrix4, Vec
 import { PriorityQueue } from '3d-tiles-renderer/core';
 import { CesiumIonAuth, GoogleCloudAuth } from '3d-tiles-renderer/core/plugins';
 import { TiledTextureComposer } from './overlays/TiledTextureComposer.js';
-import { XYZImageSource } from './sources/XYZImageSource.js';
+import { QuadKeyImageSource, XYZImageSource } from './sources/XYZImageSource.js';
 import { TMSImageSource } from './sources/TMSImageSource.js';
 import { forEachTileInBounds, getMeshesCartographicRange, getMeshesPlanarRange } from './overlays/utils.js';
 import { wrapOverlaysMaterial } from './overlays/wrapOverlaysMaterial.js';
@@ -964,14 +964,19 @@ export class ImageOverlayPlugin {
 
 		if ( ! overlay.isInitialized ) {
 
-			overlay.imageSource.fetchData = ( ...args ) => tiles
-				.downloadQueue
-				.add( { priority: - performance.now() }, () => {
+			overlay.init();
 
-					return overlay.fetch( ...args );
+			overlay.whenReady().then( () => {
 
-				} );
-			overlay.init();
+				overlay.imageSource.fetchData = ( ...args ) => tiles
+					.downloadQueue
+					.add( { priority: - performance.now() }, () => {
+
+						return overlay.fetch( ...args );
+
+					} );
+
+			} );
 
 		}
 
@@ -1612,30 +1617,71 @@ export class CesiumIonOverlay extends ImageOverlay {
 		super( options );
 
 		const { apiToken, autoRefreshToken, assetId } = options;
+		this.options = options;
 		this.assetId = assetId;
 		this.auth = new CesiumIonAuth( { apiToken, autoRefreshToken } );
-		this.imageSource = new TMSImageSource( options );
 
 		this.auth.authURL = `https://api.cesium.com/v1/assets/${ assetId }/endpoint`;
-		this.imageSource.fetchData = ( ...args ) => this.fetch( ...args );
 		this._attributions = [];
 
+		this.externalType = false;
+
 	}
 
 	init() {
 
 		this._whenReady = this
 			.auth
 			.refreshToken()
-			.then( json => {
+			.then( async ( json ) => {
 
 				this._attributions = json.attributions.map( att => ( {
 					value: att.html,
 					type: 'html',
 					collapsible: att.collapsible,
 				} ) );
 
-				this.imageSource.url = json.url;
+				if ( json.type !== 'IMAGERY' ) throw new Error( 'CesiumIonOverlay: Only IMAGERY is supported as overlay type' );
+
+				this.externalType = !! json.externalType;
+				switch ( json.externalType ) {
+
+					case 'GOOGLE_2D_MAPS':
+						this.imageSource = new XYZImageSource( {
+							...this.options,
+							url: `${json.options.url}/v1/2dtiles/{z}/{x}/{y}?session=${json.options.session}&key=${json.options.key}`,
+							tileDimension: json.options.tileWidth,
+							levels: 22, // https://developers.google.com/maps/documentation/tile/2d-tiles-overview
+						} );
+						break;
+
+					case 'BING': {
+
+						const response = await fetch(
+							`${json.options.url}/REST/v1/Imagery/Metadata/${json.options.mapStyle}?incl=ImageryProviders&key=${json.options.key}&uriScheme=https`,
+						).then( ( res ) => res.json() );
+						const metadata = response.resourceSets[ 0 ].resources[ 0 ];
+
+						this.imageSource = new QuadKeyImageSource( {
+							...this.options,
+							url: metadata.imageUrl,
+							subdomains: metadata.imageUrlSubdomains,
+							tileDimension: metadata.tileWidth,
+							levels: metadata.zoomMax,
+						} );
+						break;
+
+					}
+
+					default:
+						this.imageSource = new TMSImageSource( {
+							...this.options,
+							url: json.url,
+						} );
+
+				}
+
+				this.imageSource.fetchData = ( ...args ) => this.fetch( ...args );
 				return this.imageSource.init();
 
 			} );
@@ -1646,7 +1692,8 @@ export class CesiumIonOverlay extends ImageOverlay {
 
 	fetch( ...args ) {
 
-		return this.auth.fetch( ...args );
+		// bypass auth fetch if asset is external type to prevent CORS error due to wrong bearer token
+		return this.externalType ? super.fetch( ...args ) : this.auth.fetch( ...args );
 
 	}
 

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

@@ -49,3 +49,55 @@ export class XYZImageSource extends TiledImageSource {
 	}
 
 }
+
+// Bing Maps Tile System
+// https://learn.microsoft.com/en-us/bingmaps/articles/bing-maps-tile-system
+export class QuadKeyImageSource extends XYZImageSource {
+
+	constructor( options = {} ) {
+
+		const {
+			subdomains = [ 't0' ],
+			...rest
+		} = options;
+
+		super( rest );
+
+		this.subdomains = subdomains;
+
+	}
+
+	getUrl( x, y, level ) {
+
+		return this.url
+			.replace( /{\s*subdomain\s*}/gi, this._getSubdomain() )
+			.replace( /{\s*quadkey\s*}/gi, this._tileToQuadKey( x, y, level ) );
+
+	}
+
+	_tileToQuadKey( x, y, level ) {
+
+		let quadKey = '';
+		for ( let i = level; i > 0; i -- ) {
+
+			let digit = 0;
+			const mask = 1 << ( i - 1 );
+			if ( ( x & mask ) !== 0 ) digit += 1;
+			if ( ( y & mask ) !== 0 ) digit += 2;
+			quadKey += digit.toString();
+
+		}
+
+		return quadKey;
+
+	}
+
+	_getSubdomain() {
+
+		// Get random subdomain to circumvent browser URL request limits per domain
+		// https://learn.microsoft.com/en-us/bingmaps/rest-services/directly-accessing-the-bing-maps-tiles
+		return this.subdomains[ Math.floor( Math.random() * this.subdomains.length ) ];
+
+	}
+
+}