Added custom fetchOptions management for overlays, added a proxyUrl parameter

src/three/plugins/images/ImageOverlayPlugin.d.ts

@@ -21,6 +21,8 @@ export class ImageOverlay {
 	color: number | Color;
 	opacity: number;
 	frame?: Matrix4 | null;
+	proxyUrl?: string;
+	fetchOptions?: any;
 
 }
 
@@ -72,7 +74,6 @@ export class WMSTilesOverlay extends ImageOverlay {
 		levels?: number,
 		transparent?: boolean,
 		contentBoundingBox?: [ number, number, number, number ],
-
 		color: number | Color,
 		opacity: number,
 		frame?: Matrix4 | null,

src/three/plugins/images/ImageOverlayPlugin.js

@@ -961,7 +961,7 @@ export class ImageOverlayPlugin {
 	_initOverlay( overlay ) {
 
 		const { tiles } = this;
-		overlay.imageSource.fetchOptions = tiles.fetchOptions;
+
 		if ( ! overlay.isInitialized ) {
 
 			overlay.imageSource.fetchData = ( ...args ) => tiles
@@ -1401,14 +1401,29 @@ class ImageOverlay {
 
 	}
 
+	get fetchOptions() {
+
+		return this.imageSource.fetchOptions;
+
+	}
+
+	set fetchOptions( v ) {
+
+		this.imageSource.fetchOptions = v;
+
+	}
+
 	constructor( options = {} ) {
 
 		const {
 			opacity = 1,
 			color = 0xffffff,
 			frame = null,
+			preprocessURL = null,
 		} = options;
 		this.imageSource = null;
+
+		this.preprocessURL = preprocessURL;
 		this.opacity = opacity;
 		this.color = new Color( color );
 		this.frame = frame !== null ? frame.clone() : null;
@@ -1428,9 +1443,16 @@ class ImageOverlay {
 
 	}
 
-	fetch( ...args ) {
+	// Apply proxy prefix and merge options
+	fetch( url, options = {} ) {
+
+		if ( this.preprocessURL ) {
+
+			url = this.preprocessURL( url );
+
+		}
 
-		return fetch( ...args );
+		return fetch( url, options );
 
 	}
 

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

@@ -38,9 +38,10 @@ export class GeoJSONImageSource extends TiledImageSource {
 		strokeStyle = 'white',
 		strokeWidth = 2,
 		fillStyle = 'rgba( 255, 255, 255, 0.5 )',
+		...rest
 	} = {} ) {
 
-		super();
+		super( rest );
 		this.geojson = geojson;
 		this.url = url;
 		this.tileDimension = tileDimension;

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

@@ -6,9 +6,12 @@ export class TMSImageSource extends TiledImageSource {
 
 	constructor( options = {} ) {
 
-		const { url = null } = options;
+		const {
+			url = null,
+			...rest
+		} = options;
 
-		super();
+		super( rest );
 
 		this.tileSets = null;
 		this.extension = null;

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

@@ -7,11 +7,16 @@ import * as THREE from 'three';
 // Goes here or in "TilingScheme"?
 export class TiledImageSource extends DataCache {
 
-	constructor() {
+	constructor( options = {} ) {
 
 		super();
+
+		const {
+			fetchOptions = {}
+		} = options;
+
 		this.tiling = new TilingScheme();
-		this.fetchOptions = {};
+		this.fetchOptions = fetchOptions;
 		this.fetchData = ( ...args ) => fetch( ...args );
 
 	}

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

@@ -18,9 +18,10 @@ export class WMSImageSource extends TiledImageSource {
 			transparent = false,
 			levels = 18,
 			tileDimension = 256,
+			...rest
 		} = options;
 
-		super();
+		super( rest );
 		this.url = url;
 		this.layer = layer;
 		this.crs = crs;
@@ -140,7 +141,6 @@ export class WMSImageSource extends TiledImageSource {
 			REQUEST: 'GetMap',
 			VERSION: version,
 			LAYERS: layer,
-			STYLES: styles,
 			[ crsParam ]: crs,
 			BBOX: bboxParam.join( ',' ),
 			WIDTH: tileDimension,
@@ -149,6 +149,14 @@ export class WMSImageSource extends TiledImageSource {
 			TRANSPARENT: transparent ? 'TRUE' : 'FALSE',
 		} );
 
+		// Only add STYLES if it's defined (not null or undefined)
+		// This is a WMS-specific parameter, and giving it an unexpected value can lead to errors
+		if ( styles !== null && styles !== undefined ) {
+
+			params.set( 'STYLES', styles );
+
+		}
+
 		return new URL( '?' + params.toString(), this.url ).toString();
 
 	}

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

@@ -5,17 +5,18 @@ export class WMTSImageSource extends TiledImageSource {
 
 	constructor( options = {} ) {
 
-		super();
-
 		const {
 			capabilities = null,
 			layer = null,
 			tileMatrixSet = null,
 			style = null,
 			url = null,
 			dimensions = {},
+			...rest
 		} = options;
 
+		super( rest );
+
 		this.capabilities = capabilities;
 		this.layer = layer;
 		this.tileMatrixSet = tileMatrixSet;

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

@@ -5,14 +5,15 @@ export class XYZImageSource extends TiledImageSource {
 
 	constructor( options = {} ) {
 
-		super();
-
 		const {
 			levels = 20,
 			tileDimension = 256,
 			url = null,
+			...rest
 		} = options;
 
+		super( rest );
+
 		this.tileDimension = tileDimension;
 		this.levels = levels;
 		this.url = url;