Updated the map-context to accept OGCAPI layer type

geonetwork · May 6, 2024 · 479a656 · 479a656
1 parent c5cfc95
commit 479a656
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 61 deletions.
diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html
@@ -16,9 +16,15 @@
 </div>
 
 <ng-container *ngFor="let layer of layers">
-  <div *ngIf="shouldDisplayLayer(layer)" class="flex items-center justify-between my-2 layer-item-tree">
+  <div
+    *ngIf="shouldDisplayLayer(layer)"
+    class="flex items-center justify-between my-2 layer-item-tree"
+  >
     <div class="flex flex-col items-start w-full">
-      <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap" [title]="layer.name">
+      <p
+        class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap"
+        [title]="layer.name"
+      >
         {{ layer.name }}
       </p>
       <div class="flex justify-between items-center w-full">

diff --git a/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts b/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts
@@ -1,11 +1,22 @@
-import { Component, OnInit, Output, EventEmitter, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { OgcApiEndpoint } from '@camptocamp/ogc-client';
-import { Subject, debounceTime } from 'rxjs';
-import { MapContextLayerModel, MapContextLayerTypeEnum } from '../map-context/map-context.model';
-import { TranslateModule } from '@ngx-translate/core';
-import { DropdownChoice, UiInputsModule } from '@geonetwork-ui/ui/inputs';
-import { CommonModule } from '@angular/common';
-import { MapLayer } from '../+state/map.models';
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  Input,
+  ChangeDetectorRef,
+} from '@angular/core'
+import { OgcApiEndpoint } from '@camptocamp/ogc-client'
+import { Subject, debounceTime } from 'rxjs'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../map-context/map-context.model'
+import { TranslateModule } from '@ngx-translate/core'
+import { DropdownChoice, UiInputsModule } from '@geonetwork-ui/ui/inputs'
+import { CommonModule } from '@angular/common'
+import { MapLayer } from '../+state/map.models'
 
 @Component({
   selector: 'gn-ui-add-layer-from-ogc-api',
@@ -15,92 +26,112 @@ import { MapLayer } from '../+state/map.models';
   imports: [CommonModule, TranslateModule, UiInputsModule],
 })
 export class AddLayerFromOgcApiComponent implements OnInit {
-  @Input() ogcUrl: string;
-  @Output() layerAdded = new EventEmitter<MapLayer>();
+  @Input() ogcUrl: string
+  @Output() layerAdded = new EventEmitter<MapLayer>()
 
-  urlChange = new Subject<string>();
-  loading = false;
-  layers: any[] = [];
-  errorMessage: string | null = null;
-  selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {};
+  urlChange = new Subject<string>()
+  loading = false
+  layers: any[] = []
+  errorMessage: string | null = null
+  selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.urlChange.pipe(debounceTime(700)).subscribe(() => {
-      this.loadLayers();
-    });
+      this.loadLayers()
+    })
   }
 
   async loadLayers() {
-    this.errorMessage = null;
+    this.errorMessage = null
     try {
-      this.loading = true;
+      this.loading = true
       if (!this.ogcUrl.trim()) {
-        this.layers = [];
-        return;
+        this.layers = []
+        return
       }
-      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl);
-      this.layers = await ogcEndpoint.allCollections;
-      this.setDefaultLayerTypes();
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      this.layers = await ogcEndpoint.allCollections
+      this.setDefaultLayerTypes()
     } catch (error) {
-      const err = error as Error;
-      this.layers = [];
-      this.errorMessage = 'Error loading layers: ' + err.message;
+      const err = error as Error
+      this.layers = []
+      this.errorMessage = 'Error loading layers: ' + err.message
     } finally {
-      this.loading = false;
-      this.changeDetectorRef.markForCheck();
+      this.loading = false
+      this.changeDetectorRef.markForCheck()
     }
   }
 
   setDefaultLayerTypes() {
     this.layers.forEach((layer) => {
-      const choices = this.getLayerChoices(layer);
+      const choices = this.getLayerChoices(layer)
       if (choices.length > 0) {
-        this.selectedLayerTypes[layer.name] = choices[0].value;
+        this.selectedLayerTypes[layer.name] = choices[0].value
       }
-    });
+    })
   }
 
   getLayerChoices(layer: any) {
-    const choices = [];
+    const choices = []
     if (layer.hasRecords) {
-      choices.push({ label: 'Records', value: 'record' });
+      choices.push({ label: 'Records', value: 'record' })
     }
     if (layer.hasFeatures) {
-      choices.push({ label: 'Features', value: 'features' });
+      choices.push({ label: 'Features', value: 'features' })
     }
     if (layer.hasVectorTiles) {
-      choices.push({ label: 'Vector Tiles', value: 'vectorTiles' });
+      choices.push({ label: 'Vector Tiles', value: 'vectorTiles' })
     }
     if (layer.hasMapTiles) {
-      choices.push({ label: 'Map Tiles', value: 'mapTiles' });
+      choices.push({ label: 'Map Tiles', value: 'mapTiles' })
     }
-    return choices;
+    return choices
   }
 
   shouldDisplayLayer(layer: any) {
-    return layer.hasRecords || layer.hasFeatures || layer.hasVectorTiles || layer.hasMapTiles;
+    return (
+      layer.hasRecords ||
+      layer.hasFeatures ||
+      layer.hasVectorTiles ||
+      layer.hasMapTiles
+    )
   }
 
   onLayerTypeSelect(layerName: string, selectedType: any) {
-    this.selectedLayerTypes[layerName] = selectedType ? selectedType : this.getLayerChoices(layerName)[0]?.value;
+    this.selectedLayerTypes[layerName] = selectedType
+      ? selectedType
+      : this.getLayerChoices(layerName)[0]?.value
   }
 
   async addLayer(layer: string, layerType: any) {
     try {
       console.log(layerType)
-      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl);
-      const layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer);
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      let layerUrl
+
+      if (layerType === 'vectorTiles') {
+        layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+      } else if (layerType === 'mapTiles') {
+        layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
+          outputFormat: 'json',
+        })
+      }
+
+      // const layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {outputFormat: 'json'})
       const layerToAdd: MapContextLayerModel = {
         name: layer,
         url: layerUrl,
         type: MapContextLayerTypeEnum.OGCAPI,
-      };
-      this.layerAdded.emit({ ...layerToAdd, title: layer });
+        layerType: layerType,
+      }
+      this.layerAdded.emit({ ...layerToAdd, title: layer })
     } catch (error) {
-      const err = error as Error;
-      console.error('Error adding layer:', err.message);
+      const err = error as Error
+      console.error('Error adding layer:', err.message)
     }
   }
 }
diff --git a/libs/feature/map/src/lib/map-context/map-context.model.ts b/libs/feature/map/src/lib/map-context/map-context.model.ts
@@ -38,6 +38,7 @@ export interface MapContextLayerOgcapiModel {
   type: 'ogcapi'
   url: string
   name: string
+  layerType: 'feature' | 'vectorTiles' | 'mapTiles' | 'record'
 }
 
 interface LayerXyzModel {

diff --git a/libs/feature/map/src/lib/map-context/map-context.service.ts b/libs/feature/map/src/lib/map-context/map-context.service.ts
@@ -25,6 +25,10 @@ import WMTS from 'ol/source/WMTS'
 import { Geometry } from 'ol/geom'
 import Feature from 'ol/Feature'
 import { WfsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
+import OGCVectorTile from 'ol/source/OGCVectorTile.js'
+import { MVT } from 'ol/format'
+import VectorTileLayer from 'ol/layer/VectorTile'
+import OGCMapTile from 'ol/source/OGCMapTile.js'
 
 export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
   type: MapContextLayerTypeEnum.XYZ,
@@ -78,14 +82,28 @@ export class MapContextService {
     const style = this.styleService.styles.default
     switch (type) {
       case MapContextLayerTypeEnum.OGCAPI:
-        return new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: layerModel.url,
-          }),
-          style,
-        })
-
+        if (layerModel.layerType === 'vectorTiles') {
+          return new VectorTileLayer({
+            source: new OGCVectorTile({
+              url: layerModel.url,
+              format: new MVT(),
+            }),
+          })
+        } else if (layerModel.layerType === 'mapTiles') {
+          return new TileLayer({
+            source: new OGCMapTile({
+              url: layerModel.url,
+            }),
+          })
+        } else {
+          return new VectorLayer({
+            source: new VectorSource({
+              format: new GeoJSON(),
+              url: layerModel.url,
+            }),
+            style,
+          })
+        }
       case MapContextLayerTypeEnum.XYZ:
         return new TileLayer({
           source: new XYZ({

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "@angular/router": "16.1.7",
     "@bartholomej/ngx-translate-extract": "^8.0.2",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@camptocamp/ogc-client": "^1.1.0-RC.3",
+    "@camptocamp/ogc-client": "^1.1.1-dev.a0aadb6",
     "@geospatial-sdk/geocoding": "^0.0.5-alpha.2",
     "@ltd/j-toml": "~1.35.2",
     "@messageformat/core": "^3.0.1",