Allow registration of events for layers

[boeckMt]

Description

When a CustomLayer is used, it is possible to listen on "OpenLayers" events for the layer or the source e.g. source.on('tileloadend', () =>) Such an interface should also be available for UkisLayers (RasterLayer | VectorLayer)

Popups are also sometimes needed for several events e.g. show something on click and something different on move.

I would propose to use one Interface for all this Events because the are all bound to the layer and then remove the Layer.popup. This would be a breaking change, but then there is only one interface for events which looks nearly the same for all.

export interface ILayerMapEvent {
  event: 'click' | 'dblclick' | 'pointermove';
  popup?: Layer['popup'];
  listener?: (args?: any) => void;
}

export interface ILayerBaseEvent {
  event: 'postrender' | 'prerender' | string;
  listener: (args?: any) => void;
}

export interface ILayerSourceEvent {
  event: '<source>loadend' | '<source>loadstart' | '<source>loaderror' | string;
  listener: (args?: any) => void;
}

export interface ILayerOptions {
...
  events?: {
    map?: ILayerMapEvent[];
    layer?: ILayerBaseEvent[];
    source?: ILayerSourceEvent[];
  };
...

Relevant Package

This feature request is for @dlr-eoc/....

• @dlr-eoc/map-ol
• @dlr-eoc/services-layers

Examples

const eventLayer= new RasterLayer({
      ...
      events: {
        map: [
        { event: 'click', 
          popup: {
              dynamicPopup: {
                component: TablePopupComponent,
                getAttributes: (args: IDynamicPopupArgs) => {
                   return { data: args.properties };
                 }
              }
          } 
        }, 
        { event: 'pointermove', popup: true },
        // the dblclick is currently used to remove all open popups so we have to check how this is working together!
        { event: 'dblclick', 
          popup: {
             pupupFunktion: (obj) => { ... }
          } 
        }],
        source: [{
          event: 'tileloadstart', listener: (arg) => {
            ...
          }
        },
        {
          event: 'tileloadend', listener: (arg) => {
            ...
          }
        }]
      }
      ...
    });

// Popup only example
const vectorLayer = new VectorLayer({
      ...
      // old implementation
      popup:  true,

      // new implementation
      events: {
         map: [{ event: 'click'  popup: true }]
      }
      ...
    });

[boeckMt]

@MichaelLangbein and @voinSR what do you think about this change.

Another option (to make no breaking change) would be, to only extend the current Layer.pupup to popup?: boolean | Array<string> | popup | popup[];

[boeckMt]

I have a basic implementation now with popup and events separated like described in https://github.com/dlr-eoc/ukis-frontend-libraries/issues/85#issuecomment-851550912

https://github.com/dlr-eoc/ukis-frontend-libraries/compare/layer-events

[boeckMt]

It is not implemented as following

export interface ILayerEvent {
  event: string;
  listener: (args?: any) => void;
}

popup?: boolean | Array<string> | popup | popup[];
events?: {
    /** e.g. https://openlayers.org/en/v6.5.0/apidoc/module-ol_layer_Layer-Layer.html Fires */
    layer?: ILayerEvent[];
    /** e.g. https://openlayers.org/en/v6.5.0/apidoc/module-ol_source_Source.html Tile | Image | Raster | Vector */
    source?: ILayerEvent[];
};