support multi layers for GEE maps

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#4e0663",
+        "titleBar.activeBackground": "#280333",
+        "titleBar.activeForeground": "#e7e7e7",
+        "activityBar.activeBackground": "#4e0663",
+        "activityBar.activeBorder": "#785f07",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#785f07",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "statusBar.background": "#280333",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#4e0663",
+        "titleBar.inactiveBackground": "#28033399",
+        "titleBar.inactiveForeground": "#e7e7e799",
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#4e0663",
+        "statusBarItem.remoteBackground": "#280333",
+        "statusBarItem.remoteForeground": "#e7e7e7"
+    },
+    "peacock.color": "#280333"
+}

angular.json

@@ -210,5 +210,8 @@
       }
     }
   },
-  "defaultProject": "imagery-tester"
-}
+  "defaultProject": "imagery-tester",
+  "cli": {
+    "analytics": false
+  }
+}

imagery-cesium/maps/cesium-map/cesium-map.ts

@@ -26,7 +26,7 @@ import { IPixelPositionMovement, IPixelPosition } from '../../models/map-events'
 declare const Cesium: any;
 
 Cesium.buildModuleUrl.setBaseUrl('assets/Cesium/');
-Cesium.BingMapsApi.defaultKey = 'AnjT_wAj_juA_MsD8NhcEAVSjCYpV-e50lUypkWm1JPxVu0XyVqabsvD3r2DQpX-';
+// Cesium.BingMapsApi.defaultKey = 'AnjT_wAj_juA_MsD8NhcEAVSjCYpV-e50lUypkWm1JPxVu0XyVqabsvD3r2DQpX-';
 
 export const CesiumMapName = 'CesiumMap';
 

imagery-ol/mapSourceProviders/open-layers-GEE-source-provider.ts

@@ -1,33 +1,41 @@
-import XYZ from 'ol/source/XYZ';
+import XYZ from "ol/source/XYZ";
 import {
 	CacheService,
 	ImageryCommunicatorService,
 	ImageryMapSource,
-	IMapSettings, IMapSourceProvidersConfig,
-	MAP_SOURCE_PROVIDERS_CONFIG
-} from '@ansyn/imagery';
-import { IMAGE_PROCESS_ATTRIBUTE, OpenLayersMapSourceProvider } from './open-layers.map-source-provider';
-import { OpenLayersMap } from '../maps/open-layers-map/openlayers-map/openlayers-map';
-import { OpenLayersDisabledMap } from '../maps/openlayers-disabled-map/openlayers-disabled-map';
-import { HttpClient } from '@angular/common/http';
-import { Inject } from '@angular/core';
+	IMapSettings,
+	IMapSourceProvidersConfig,
+	MAP_SOURCE_PROVIDERS_CONFIG,
+} from "@ansyn/imagery";
+import {
+	IMAGE_PROCESS_ATTRIBUTE,
+	OpenLayersMapSourceProvider,
+} from "./open-layers.map-source-provider";
+import { OpenLayersMap } from "../maps/open-layers-map/openlayers-map/openlayers-map";
+import { OpenLayersDisabledMap } from "../maps/openlayers-disabled-map/openlayers-disabled-map";
+import { HttpClient } from "@angular/common/http";
+import { Inject } from "@angular/core";
 
-​
-export const OpenLayerGEESourceProviderSourceType = 'GEE';
-​
+export const OpenLayerGEESourceProviderSourceType = "GEE";
 @ImageryMapSource({
 	sourceType: OpenLayerGEESourceProviderSourceType,
-	supported: [OpenLayersMap, OpenLayersDisabledMap]
+	supported: [OpenLayersMap, OpenLayersDisabledMap],
 })
 export class OpenLayerGEESourceProvider extends OpenLayersMapSourceProvider {
-
 	layerData: any;
 
-	constructor(protected httpClient: HttpClient,
-				protected cacheService: CacheService,
-				protected imageryCommunicatorService: ImageryCommunicatorService,
-				@Inject(MAP_SOURCE_PROVIDERS_CONFIG) protected mapSourceProvidersConfig: IMapSourceProvidersConfig) {
-		super(cacheService, imageryCommunicatorService, mapSourceProvidersConfig);
+	constructor(
+		protected httpClient: HttpClient,
+		protected cacheService: CacheService,
+		protected imageryCommunicatorService: ImageryCommunicatorService,
+		@Inject(MAP_SOURCE_PROVIDERS_CONFIG)
+		protected mapSourceProvidersConfig: IMapSourceProvidersConfig
+	) {
+		super(
+			cacheService,
+			imageryCommunicatorService,
+			mapSourceProvidersConfig
+		);
 	}
 
 	async create(metaData: IMapSettings): Promise<any> {
@@ -38,23 +46,50 @@ export class OpenLayerGEESourceProvider extends OpenLayersMapSourceProvider {
 		const extent = this.createExtent(metaData);
 		const source = this.createSource(metaData);
 		const tileLayer = this.createLayer(source, extent);
-		tileLayer.set(IMAGE_PROCESS_ATTRIBUTE, this.getImageLayer(source, extent));
+		tileLayer.set(
+			IMAGE_PROCESS_ATTRIBUTE,
+			this.getImageLayer(source, extent)
+		);
 		return Promise.resolve(tileLayer);
 	}
-
+	/**
+	 * this function was modified to use multiple layers with a single source, currently working clunky layer
+	 * should be checked with the correct GEE server
+	 * supports Angular 12
+	 * @param metaData
+	 * @returns
+	 */
 	createSource(metaData: IMapSettings): any {
 		const config = { ...this.config, ...metaData.data.config };
-		const geeDefs = JSON.parse(this.layerData.replace(/([\[\{,])\s*(\w+)\s*:/g, '$1 "$2":'));
+		const geeDefs = JSON.parse(
+			this.layerData.replace(/([\[\{,])\s*(\w+)\s*:/g, '$1 "$2":')
+		);
+		const urls = [];
+		geeDefs.layers.forEach((layer) => {
+			urls.push(
+				config.serverUrl +
+					`/query?request=` +
+					layer.requestType +
+					`&channel=` +
+					layer.id +
+					`&version=` +
+					layer.version +
+					`&x={x}&y={y}&z={z}`
+			);
+		});
+
 		const source = new XYZ({
-			url: config.serverUrl + `/query?request=` + geeDefs.layers[0].requestType + `&channel=` + geeDefs.layers[0].id + `&version=` + geeDefs.layers[0].version + `&x={x}&y={y}&z={z}`,
-			crossOrigin: 'anonymous',
-			minZoom: 1
+			urls: urls,
+			crossOrigin: "anonymous",
+			minZoom: 1,
 		});
 		return source;
 	}
 
 	getLayersData(serverURL: string): Promise<any> {
 		const fileUrl = serverURL + `/query?request=Json&is2d=t`;
-		return this.httpClient.get(fileUrl, { responseType: 'text' }).toPromise();
+		return this.httpClient
+			.get(fileUrl, { responseType: "text" })
+			.toPromise();
 	}
 }

imagery-ol/mapSourceProviders/open-layers.map-source-provider.ts

@@ -18,6 +18,9 @@ export abstract class OpenLayersMapSourceProvider<CONF = any> extends BaseMapSou
 		const extent = this.createExtent(metaData);
 		const source = this.createSource(metaData);
 		const tileLayer = this.createLayer(source, extent);
+		if (metaData.data["sourceUrl"]) {
+			source.setUrl(metaData.data["sourceUrl"]);
+		}
 		// if (metaData.data.overlay) {
 			// for image process;
 		tileLayer.set(IMAGE_PROCESS_ATTRIBUTE, this.getImageLayer(source, extent));