feat: update demo-maps projection example for use of layer.nativeBbox and bbox

Author: boeckMt

CHANGELOG.md

@@ -58,6 +58,7 @@
 * **@dlr-eoc/ngx-ukis-ui-clarity:**
 - New UKIS library for ui-clarity related things was added.
 - It includes all components of `@dlr-eoc/layer-control`, `@dlr-eoc/map-tools`, `@dlr-eoc/user-info` [Issue #267](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/267).
+- Adjust `LayerentryComponent` and `LayerentryGroupComponent` to use `nativeBbox` of types `services-layers`.
 
 * **@dlr-eoc/ngx-ukis-utilities:**
 - New UKIS library for angular utilities was added.
@@ -66,6 +67,7 @@
 
 * **@dlr-eoc/map-ol:**
 - Remove dependency on @cds/core [Issue #267](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/267).
+- Use `nativeBbox` of types `services-layers` to create `olLayerOptions.extent` for layers. Use it also in `CustomLayer` to create `olLayerOptions.extent` and for olLayerGroups. 
 
 * **@dlr-eoc/services-layers:**
 - Add `properties` attribute to Layer type

projects/demo-maps/src/app/route-components/route-example-projection/route-map2.component.html

@@ -46,6 +46,7 @@
     <clr-vertical-nav-group-children class="padding title-ellipsis">
       <button class="btn btn-primary" (click)="setExtent()">set Extent (Antarctic)</button>
       <button class="btn btn-primary" (click)="setNewProjection()">set Projection and bbox (Antarctic)</button>
+      <button class="btn btn-primary" (click)="addLayer()">Add Swiss GeoJSON Layer</button>
     </clr-vertical-nav-group-children>
   </clr-vertical-nav-group>
 </clr-vertical-nav>

projects/demo-maps/src/app/route-components/route-example-projection/route-map2.component.ts

@@ -8,6 +8,7 @@ import { ClarityIcons, layersIcon, mapIcon, compassIcon } from '@cds/core/icon';
 import { ClrVerticalNavModule, ClrStandaloneCdkTrapFocus, ClrNavigationModule, ClrIconModule } from '@clr/angular';
 import { LayerControlComponent, ProjectionSwitchComponent, MousePositionComponent, MapNavigatorComponent } from '@dlr-eoc/ngx-ukis-ui-clarity';
 import { ExtentHelperComponent } from "../../components/extent-helper/extent-helper.component";
+import { delay } from 'rxjs/operators';
 ClarityIcons.addIcons(...[layersIcon, mapIcon, compassIcon]);
 
 @Component({
@@ -53,7 +54,17 @@ export class RouteMap2Component implements OnInit {
       units: 'm'
     }
 
-    this.projections = [EPSG_3857_Def, EPSG_3995_Def, EPSG_3031_Def, SwissCH1903, ESRI_53034];
+    const ETRS89_UTM_37N: IProjDef = {
+      code: 'EPSG:25837',
+      proj4js: '+proj=utm +zone=37 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs',
+      title: 'UTM zone 37N',
+      extent: [-4861198.58, 3680548.11, 489848.43, 9660688.94],
+      worldExtent: [-16.1, 33.26, 38.01, 84.73],
+      global: false,
+      units: 'm'
+    }
+
+    this.projections = [EPSG_3857_Def, EPSG_3995_Def, EPSG_3031_Def, SwissCH1903, ESRI_53034, ETRS89_UTM_37N];
     this.addOverlays();
     /** 
        * set map extent or IMapState (zoom, center...) with the MapStateService 
@@ -65,12 +76,11 @@ export class RouteMap2Component implements OnInit {
 
 
   ngOnInit(): void {
-    this.mapStateSvc.getMapState().subscribe(state => {
-      console.log('MapState change', state);
-    });
-
-    this.mapSvc.projectionChange.subscribe(proj => {
+    this.mapStateSvc.getProjection().pipe(delay(300)).subscribe(proj => {
       console.log('Map Proj change', proj);
+      if (proj.epsg === 'EPSG:21781') {
+        this.addLayer();
+      }
     });
   }
 
@@ -137,10 +147,94 @@ export class RouteMap2Component implements OnInit {
           }
         ]
       },
-      visible: true
+      visible: true,
+      bbox: [12.122762285148893, 45.75982471322655, 22.585503751196956, 52.936158926509194]
+    });
+
+    const vectorLayerPolar = new VectorLayer({
+      id: 'geojson_test_PolarDEM',
+      name: 'GeoJSON Vector Layer (PolarDEM)',
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "coordinates": [
+                [
+                  [
+                    -56.610291493162265,
+                    -63.14567134729959
+                  ],
+                  [
+                    -65.55445992781995,
+                    -65.42656926101324
+                  ],
+                  [
+                    -73.57228421370289,
+                    -70.01891446525254
+                  ],
+                  [
+                    -79.9666203974736,
+                    -72.86460180838449
+                  ],
+                  [
+                    -83.04719665248149,
+                    -74.13173444180848
+                  ],
+                  [
+                    -55.69191893422601,
+                    -75.70732872975574
+                  ],
+                  [
+                    -59.942004469019835,
+                    -72.39072889158679
+                  ],
+                  [
+                    -61.35730570181974,
+                    -67.91201652998802
+                  ],
+                  [
+                    -56.610291493162265,
+                    -63.14567134729959
+                  ]
+                ]
+              ],
+              "type": "Polygon"
+            }
+          }
+        ]
+      },
+      visible: true,
+      bbox: [-85.02702775046276, -75.78913027273286, -49.34343400046277, -62.95113726720521],
+      nativeBbox: {
+        epsg: 'EPSG:3031',
+        bbox: [-2788223.8152697003, 180971.96438660682, -1093301.5018768182, 1969824.701551262]
+      }
     });
 
-    const overlays = [osm_layer, gufLayer, vectorLayer];
+    const TanDEMPolarDEM = new RasterLayer({
+      type: 'wms',
+      url: 'https://geoservice.dlr.de/eoc/elevation/wms',
+      name: 'TanDEM-X PolarDEM Antarctica',
+      id: 'TDM_POLARDEM90_ANT_HSC',
+      params: {
+        layers: 'TDM_POLARDEM90_ANT_HSC'
+      },
+      visible: false,
+      description: 'A hillshade generated from the TanDEM-X PolarDEM 90m elevation layer. This shading represents a combination slope and oblique shading.',
+      attribution: 'PolarDEM Data &copy; DLR/EOC licensed for <a href="https://geoservice.dlr.de/resources/licenses/polardem90/License_for_the_Utilization_of_TanDEM-X-PolarDEM_90m_for_Scientific_Use.pdf">scientific use</a>',
+      legendImg: '',
+      bbox: [-180, -90, 180, -56.22686667234951],
+      nativeBbox: {
+        epsg: 'EPSG:3031',
+        bbox: [-2699955, -2532555, 2799855, 2398455]
+      }
+    })
+
+    const overlays = [osm_layer, gufLayer, vectorLayer, TanDEMPolarDEM, vectorLayerPolar];
     overlays.map(layer => this.layersSvc.addLayer(layer, 'Layers'));
   }
 
@@ -160,4 +254,70 @@ export class RouteMap2Component implements OnInit {
     this.mapStateSvc.setProjection(proJ.code, 'user', { fitToNativeBbox: nativeBbox });
   }
 
+  addLayer() {
+    const vectorLayerSwiss = new VectorLayer({
+      id: 'geojson_test_Swiss',
+      name: 'GeoJSON Vector Layer (Swiss)',
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "coordinates": [
+                [
+                  [
+                    9.476989243125104,
+                    47.48067255204134
+                  ],
+                  [
+                    8.536024138082581,
+                    47.36586953083
+                  ],
+                  [
+                    7.229985139825061,
+                    47.13551220276787
+                  ],
+                  [
+                    6.119337802724459,
+                    46.182699028304654
+                  ],
+                  [
+                    6.926613876449522,
+                    46.41361480319924
+                  ],
+                  [
+                    8.07839630011074,
+                    46.7458325561617
+                  ],
+                  [
+                    9.333016440167455,
+                    47.111021589561204
+                  ],
+                  [
+                    9.476989243125104,
+                    47.48067255204134
+                  ]
+                ]
+              ],
+              "type": "Polygon"
+            }
+          }
+        ]
+      },
+      visible: true,
+      bbox: [6.121699327190461, 46.05823590807236, 9.496699327190466, 47.5945721328394],
+      nativeBbox: {
+        epsg: 'EPSG:21781',
+        bbox: [495592.4002543411, 97816.18720803942, 758272.4757513476, 272596.3306093862]
+      }
+    });
+
+    if (!this.layersSvc.getLayerById(vectorLayerSwiss.id)) {
+      this.layersSvc.addLayer(vectorLayerSwiss, 'Layers');
+    }
+  }
+
 }