Prerelease wuekis sprint

CHANGELOG.md

@@ -9,6 +9,10 @@
   - removeLayerByKey() not working on layergroups (recursive).
   - addLayer(), addLayers() and setLayers() don't set the filtertype on layergroup children (recursive).
   - `updateLayerParamsWith` now also works with GeojsonLayers: [issue 51](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/51)
+* **@dlr-eoc/map-three:**
+  - regarding three-version 125: `Geometry` is now deprecated, replaced with `BufferGeometry`
+
+
 
 ### Features
 * **@dlr-eoc/layer-control:**:
@@ -21,6 +25,7 @@
   - now allows for angular-components in popups. In any Ukis-Layer, just add a `dynamicPopup` field to the `popup` property.
     If the popup-component requires any `@Input`'s, provide these with `getAttributes(args: IPopupArgs)`. 
     Addresses [Issue #14](https://github.com/dlr-eoc/ukis-frontend-libraries/issues/14)
+  - added basic functionality for WMS-layers to map-ol. As for now, `VectorLayers` of type `wfs` do not have any dedicated own methods or properties. All wfs-specific methods, like CQL-filters, are simply red from the layer's `url` property.
 * **@dlr-eoc/utils-maps:**:
   - created new custom renderer `InterpolationRenderer`.
     - Takes a vector-source (or a clustered vector-source) and does inverse-distance-interpolation on every pixel between the data points.
@@ -34,7 +39,9 @@
     - Original implementation remains as a wrapper for backwards-compatibility.
     - Added method `describeProcess`
     - Added ability to overwrite data-decoding with a user-provided method, for cases where a unconventional mime-type or encoding has been used.
-  - Expose WmsService [Pull #70](https://github.com/dlr-eoc/ukis-frontend-libraries/pull/70).
+    - Expose WmsService [Pull #70](https://github.com/dlr-eoc/ukis-frontend-libraries/pull/70).
+* **@dlr-eoc/utils-maps:**
+  - updated all custom renderers to implement the method `renderDeclutter` that is required as of ol6.5.
 
 ### Refactoring
 * **@dlr-eoc/map-ol:** 

projects/demo-maps/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { SunlightComponent } from './components/sunlight/sunlight.component';
 import { InterpolationSettingsComponent } from './components/interpolation-settings/interpolation-settings.component';
 import { RouteMap8Component } from './route-components/route-example-threejs/route-example-threejs.component';
 import { TablePopupComponent } from './components/table-popup/table-popup.component';
+import { ServicesOgcModule } from '@dlr-eoc/services-ogc';
 import { ExampleGroupActionComponent } from './components/example-group-action/example-group-action.component';
 
 @NgModule({
@@ -75,7 +76,8 @@ import { ExampleGroupActionComponent } from './components/example-group-action/e
     LayerControlModule,
     MapToolsModule,
     OwcControlModule,
-    HttpClientModule
+    HttpClientModule,
+    ServicesOgcModule
   ],
   providers: [AlertService, ProgressService],
   bootstrap: [AppComponent]

projects/demo-maps/src/app/route-components/route-example-custom-layers/customRenderers/threejs_renderer.ts

@@ -3,8 +3,8 @@ import { FrameState } from 'ol/PluggableMap';
 import LayerRenderer from 'ol/renderer/Layer';
 import VectorLayer from 'ol/layer/Vector';
 import { Polygon as  olPolygonGeometry } from 'ol/geom';
-import { WebGLRenderer, PerspectiveCamera, Scene, Mesh, Renderer, DirectionalLight, MeshPhongMaterial,
-    Geometry as tGeometry, Vector3, Shape, ExtrudeGeometry, Color } from 'three';
+import { WebGLRenderer, PerspectiveCamera, Scene, Mesh, Renderer,
+    DirectionalLight, MeshPhongMaterial, Vector3, Shape, ExtrudeGeometry, Color, BufferGeometry } from 'three';
 import { heightAboveWidth, zoom2width } from '@dlr-eoc/map-three';
 
 
@@ -127,7 +127,7 @@ export class ThreeJsRenderer extends LayerRenderer<VectorLayer> {
         return meshes;
     }
 
-    private fGeom2tGeom(fGeom: olPolygonGeometry, height: number): tGeometry {
+    private fGeom2tGeom(fGeom: olPolygonGeometry, height: number): BufferGeometry {
         const coords = fGeom.getCoordinates()[0];
         const shape = new Shape();
         shape.moveTo(coords[0][0], coords[0][1]);

projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.html

@@ -42,6 +42,8 @@
       <button class="btn btn-primary" (click)="removeAllLayers()">remove All Layers</button>
       <button class="btn btn-primary" (click)="setExtent()">set Extent</button>
 
+      <button class="btn btn-primary" (click)="parseCapabilities()">Parse WMS capabilities</button>
+
     </clr-vertical-nav-group-children>
   </clr-vertical-nav-group>
 

projects/demo-maps/src/app/route-components/route-example-layers/route-map.component.ts

@@ -11,6 +11,7 @@ import olStyle from 'ol/style/Style';
 import olFill from 'ol/style/Fill';
 import olCircleStyle from 'ol/style/Circle';
 import olStroke from 'ol/style/Stroke';
+import { WmsService } from '@dlr-eoc/services-ogc';
 
 @Component({
   selector: 'app-route-map',
@@ -26,7 +27,8 @@ export class RouteMapComponent implements OnInit {
   constructor(
     public layersSvc: LayersService,
     public mapStateSvc: MapStateService,
-    public mapSvc: MapOlService) {
+    public mapSvc: MapOlService,
+    private wmsSvc: WmsService) {
 
     this.controls = {
       attribution: true,
@@ -47,6 +49,13 @@ export class RouteMapComponent implements OnInit {
     this.mapStateSvc.setExtent([-14, 33, 40, 57]);
   }
 
+  parseCapabilities() {
+    this.wmsSvc.getCapabilities('https://geoservice.dlr.de/eoc/land/wms').subscribe(caps => {
+      const layer = this.wmsSvc.getLayerFromCapabilities('AGRODE_S2_EVI_P1M', caps);
+      console.log(layer);
+    });
+  }
+
   addBaseLayers() {
     const TransparentBackground = new VectorLayer({
       name: 'Transparenter Hintergrund',
@@ -389,6 +398,14 @@ export class RouteMapComponent implements OnInit {
       }
     });
 
+    const wfsLayer = new VectorLayer({
+      id: 'WfsLayer',
+      name: 'WFS Layer',
+      type: 'wfs',
+      url: "https://ahocevar.com/geoserver/wfs?service=WFS&request=GetFeature&outputFormat=application/json&version=1.1.0&srsname=EPSG:3857&typenames=usa:states&cql_filter=STATE_NAME='Pennsylvania'",
+      bbox: [-83.1005859375, 38.37611542403604, -72.50976562499999, 43.03677585761058]
+    });
+
     const eocBasemap = new EocBasemapTile();
     eocBasemap.cssClass = 'hide';
 
@@ -416,6 +433,13 @@ export class RouteMapComponent implements OnInit {
       layers: [TDM90DEMLayer, vectorLayer2, eocLiteoverlay]
     });
 
+    const groupVector = new LayerGroup({
+      id: 'group_3',
+      name: 'Test Group Vector-Data',
+      expanded: false,
+      layers: [vectorLayer, vectorLayer3, wfsLayer]
+    });
+
     const hillshade = new HillshadeTile({
       popup: {
         pupupFunktion: (obj) => {
@@ -438,7 +462,7 @@ export class RouteMapComponent implements OnInit {
       }
     });
 
-    const overlays = [gufLayer, hillshade, groupLayer2, vectorLayer, vectorLayer3, groupLayer, vectorLayerCluster];
+    const overlays = [gufLayer, hillshade, groupVector, groupLayer2, groupLayer, vectorLayerCluster];
     overlays.map(layer => {
       if (layer instanceof Layer) {
         this.layersSvc.addLayer(layer, 'Layers');

projects/map-ol/src/lib/map-ol.component.ts

@@ -8,7 +8,7 @@ import { MapStateService } from '@dlr-eoc/services-map-state';
 import { Subscription } from 'rxjs';
 import { skip } from 'rxjs/operators';
 import { MapOlService, Tgroupfiltertype } from './map-ol.service';
-import { LayersService, WmtsLayertype, Layer, WmsLayertype, WmtsLayer, WmsLayer, CustomLayer, VectorLayer, GeojsonLayertype } from '@dlr-eoc/services-layers';
+import { LayersService, WmtsLayertype, Layer, WmsLayertype, WmtsLayer, WmsLayer, CustomLayer, VectorLayer, GeojsonLayertype, WfsLayertype } from '@dlr-eoc/services-layers';
 
 import Map from 'ol/Map';
 import { getUid as olGetUid } from 'ol/util';
@@ -234,11 +234,27 @@ export class MapOlComponent implements OnInit, AfterViewInit, AfterViewChecked,
       case GeojsonLayertype:
         this.updateGeojsonLayerParamsWith(oldLayer as any, newLayer as VectorLayer);
         break;
+      case WfsLayertype:
+        this.updateWfsLayerParamsWith(oldLayer as any, newLayer as VectorLayer);
+        break;
       default:
         break;
     }
   }
 
+  private updateWfsLayerParamsWith(oldLayer: olVectorLayer, newLayer: VectorLayer) {
+
+    // step 1: update style
+    if (newLayer.options && newLayer.options.style !== oldLayer.getStyle()) {
+      oldLayer.setStyle(newLayer.options.style);
+    }
+
+    // step 2: update source
+    if (oldLayer.getSource().getUrl() !== newLayer.url) {
+      oldLayer.getSource().setUrl(newLayer.url);
+    }
+  }
+
   /**
    * TODO: set all other props of GeoJsonLayer.options and GeoJsonLayer.cluster (see: IVectorLayerOptions)
    */

projects/map-ol/src/lib/map-ol.service.ts

@@ -44,7 +44,7 @@ import { Options as olProjectionOptions } from 'ol/proj/Projection';
 import { transformExtent, get as getProjection, transform } from 'ol/proj';
 import { register as olRegister } from 'ol/proj/proj4';
 import proj4 from 'proj4';
-import { extend as olExtend, getWidth as olGetWidth, getHeight as olGetHeight, getTopLeft as olGetTopLeft } from 'ol/extent';
+import { extend as olExtend, getWidth as olGetWidth, getHeight as olGetHeight, getTopLeft as olGetTopLeft, Extent } from 'ol/extent';
 import { DEFAULT_MAX_ZOOM, DEFAULT_TILE_SIZE } from 'ol/tilegrid/common';
 import { easeOut } from 'ol/easing.js';
 
@@ -63,6 +63,7 @@ import { Options as DragBoxOptions } from 'ol/interaction/DragBox';
 import { getUid as olGetUid } from 'ol/util';
 import { Subject } from 'rxjs';
 import { flattenLayers } from '@dlr-eoc/utils-maps';
+import OverlayPositioning from 'ol/OverlayPositioning';
 
 
 export declare type Tgroupfiltertype = 'baselayers' | 'layers' | 'overlays' | 'Baselayers' | 'Overlays' | 'Layers';
@@ -567,7 +568,7 @@ export class MapOlService {
    * This function resets/adds all olLayers of a type with the new UKIS-Layers
    *
    * if only one group of them map is used and setLayers is called then the map flickers!
-   * this is because of all layers are new created and the have all new ol_uid's
+   * this is because all layers are newly created and each get new ol_uid's
    */
   public setUkisLayers(layers: Array<Layer>, filtertype: Tgroupfiltertype) {
     const lowerType = filtertype.toLowerCase() as Tgroupfiltertype;
@@ -644,6 +645,9 @@ export class MapOlService {
       case 'geojson':
         newOlLayer = this.create_geojson_layer(newLayer as VectorLayer);
         break;
+      case 'wfs':
+        newOlLayer = this.create_wfs_layer(newLayer as VectorLayer);
+        break;
       case 'custom':
         newOlLayer = this.create_custom_layer(newLayer as CustomLayer);
         break;
@@ -698,7 +702,7 @@ export class MapOlService {
     }
 
     if (l.bbox) {
-      layeroptions.extent = transformExtent(l.bbox, WGS84, this.map.getView().getProjection().getCode());
+      layeroptions.extent = transformExtent(l.bbox.slice(0, 4) as [number, number, number, number], WGS84, this.getProjection().getCode());
     }
 
     if (l.maxResolution) {
@@ -790,7 +794,7 @@ export class MapOlService {
     }
 
     if (l.bbox) {
-      layeroptions.extent = transformExtent(l.bbox, WGS84, this.map.getView().getProjection().getCode());
+      layeroptions.extent = transformExtent(l.bbox.slice(0, 4) as [number, number, number, number], WGS84, this.getProjection().getCode());
     }
     const newlayer = new olTileLayer(layeroptions);
     return newlayer;
@@ -887,7 +891,7 @@ export class MapOlService {
       }
 
       if (l.bbox) {
-        layeroptions.extent = transformExtent(l.bbox, WGS84, this.map.getView().getProjection().getCode());
+        layeroptions.extent = transformExtent(l.bbox.slice(0, 4) as [number, number, number, number], WGS84, this.getProjection().getCode());
       }
 
       return new olTileLayer(layeroptions);
@@ -897,6 +901,38 @@ export class MapOlService {
     }
   }
 
+  private create_wfs_layer(l: VectorLayer): olVectorLayer {
+
+    const url = new URL(l.url);
+    // making sure that srsname is set to current projection
+    url.searchParams.set('srsname', this.EPSG);
+    // note that we don't need to adjust the bbox. contrary to wms'es, in a wfs,
+    // a bbox may use another projection than the srsname.
+
+    const wfsSource = new olVectorSource({
+      format: new olGeoJSON(),
+      url: url.toString()
+    });
+
+    const styling = l.options?.style || undefined;
+
+    const layeroptions: any = {
+      type: 'wfs',
+      filtertype: l.filtertype,
+      name: l.name,
+      id: l.id,
+      visible: l.visible,
+      legendImg: l.legendImg,
+      opacity: l.opacity || 1,
+      zIndex: 1,
+      source: wfsSource,
+      style: styling
+    };
+
+    const wfs = new olVectorLayer(layeroptions);
+
+    return wfs;
+  }
 
   private create_geojson_layer(l: VectorLayer) {
     let olSource;
@@ -953,7 +989,7 @@ export class MapOlService {
     }
 
     if (l.bbox) {
-      layeroptions.extent = transformExtent(l.bbox, WGS84, this.map.getView().getProjection().getCode());
+      layeroptions.extent = transformExtent(l.bbox.slice(0, 4) as [number, number, number, number], WGS84, this.getProjection().getCode());
     }
 
     if (l.cluster) {
@@ -1064,7 +1100,7 @@ export class MapOlService {
       }
 
       if (l.bbox) {
-        const extent = transformExtent(l.bbox, WGS84, this.map.getView().getProjection().getCode());
+        const extent = transformExtent(l.bbox.slice(0, 4) as [number, number, number, number], WGS84, this.getProjection().getCode());
         layer.setExtent(extent);
       }
 
@@ -1425,7 +1461,7 @@ export class MapOlService {
         autoPanAnimation: {
           duration: 250
         },
-        positioning: 'bottom-center',
+        positioning: OverlayPositioning.BOTTOM_CENTER,
         stopEvent: true,
         insertFirst: false,
       };
@@ -1603,7 +1639,7 @@ export class MapOlService {
    */
   public setExtent(extent: TGeoExtent, geographic?: boolean, fitOptions?: any): TGeoExtent {
     const projection = (geographic) ? getProjection(WGS84) : getProjection(this.EPSG);
-    const transfomExtent = transformExtent(extent, projection, this.map.getView().getProjection().getCode());
+    const transfomExtent = transformExtent(extent.slice(0, 4) as [number, number, number, number], projection, this.getProjection().getCode());
     const newFitOptions = {
       size: this.map.getSize(),
       // padding: [100, 200, 100, 100] // Padding (in pixels) to be cleared inside the view. Values in the array are top, right, bottom and left padding. Default is [0, 0, 0, 0].
@@ -1619,7 +1655,7 @@ export class MapOlService {
   /** ol.Coordinate xy */
   public setCenter(center: number[], geographic?: boolean): number[] {
     const projection = (geographic) ? getProjection(WGS84) : getProjection(this.EPSG);
-    const transfomCenter = transform(center, projection, this.map.getView().getProjection().getCode());
+    const transfomCenter = transform(center, projection, this.getProjection().getCode());
     // console.log('set center in svc', transfomCenter)
     // console.log(this.map.getView().getCenter())
     this.map.getView().setCenter(transfomCenter);
@@ -1629,7 +1665,7 @@ export class MapOlService {
   /** USED in map-ol.component */
   public getCenter(geographic?: boolean): any {
     const dstProjection = (geographic) ? getProjection(WGS84) : getProjection(this.EPSG);
-    const srcProjection = getProjection(this.map.getView().getProjection().getCode());
+    const srcProjection = getProjection(this.getProjection().getCode());
     const transfomCenter = transform(this.map.getView().getCenter(), srcProjection, dstProjection);
     return transfomCenter;
   }
@@ -1646,7 +1682,7 @@ export class MapOlService {
     });
     if (geographic) {
       const projection = getProjection(WGS84);
-      const transfomExtent = transformExtent(extent, this.map.getView().getProjection().getCode(), projection);
+      const transfomExtent = transformExtent(extent, this.getProjection().getCode(), projection);
       return (transfomExtent as TGeoExtent);
     } else {
       return extent;
@@ -1661,7 +1697,7 @@ export class MapOlService {
   public getCurrentExtent(geographic?: boolean): TGeoExtent {
     const projection = (geographic) ? getProjection(WGS84) : getProjection(this.EPSG);
     const extent = this.map.getView().calculateExtent();
-    const transfomExtent = transformExtent(extent, this.map.getView().getProjection().getCode(), projection);
+    const transfomExtent = transformExtent(extent, this.getProjection().getCode(), projection);
     return (transfomExtent as TGeoExtent);
   }
 

projects/services-layers/src/lib/types/Layers.ts

@@ -141,7 +141,13 @@ export interface ILayerDimensions extends IAnyObject {
 }
 
 export interface ILayerIntervalAndPeriod {
+  /**
+   * Example: "2016-01-01T00:00:00.000Z/2018-01-01T00:00:00.000Z"
+   */
   interval: string;
+  /**
+   * Example: "P1Y"
+   */
   periodicity: string;
 }
 
@@ -318,7 +324,7 @@ export class VectorLayer extends Layer implements IVectorLayerOptions {
   data?: any;
   url?: string;
   subdomains?: Array<string>;
-  /** vector options like style, pointToLayer... depends on the map-library, e.g.:
+  /** vector options like style, pointToLayer... depend on the map-library, e.g.:
    * iconUrl: string - to specify icon for points
    * rotationPropName: string - property containing rotation angle in degrees
    */