feat(datasource): add Cluster datasource (#374)

* feat(datasource,layer,style): add Cluster datasource and configurable style for it
infra-geo-ouverte · Jul 25, 2019 · d22d3c2 · d22d3c2
1 parent e69276e
commit d22d3c2
Show file tree

Hide file tree

Showing 14 changed files with 239 additions and 83 deletions.
diff --git a/packages/context/src/lib/share-map/shared/share-map.service.ts b/packages/context/src/lib/share-map/shared/share-map.service.ts
@@ -103,31 +103,34 @@ export class ShareMapService {
 
     let zoom = 'zoom=' + map.viewController.getZoom();
     const arrayCenter = map.viewController.getCenter('EPSG:4326') || [];
-    const long = arrayCenter[0].toFixed(5).replace(/\.([^0]+)0+$/,".$1")
-    const lat = arrayCenter[1].toFixed(5).replace(/\.([^0]+)0+$/,".$1")
+    const long = arrayCenter[0].toFixed(5).replace(/\.([^0]+)0+$/, '.$1');
+    const lat = arrayCenter[1].toFixed(5).replace(/\.([^0]+)0+$/, '.$1');
     const center = `center=${long},${lat}`.replace(/.00000/g, '');
     let context = '';
     if (this.contextService.context$.value) {
       if (this.contextService.context$.value.uri !== '_default') {
         context = 'context=' + this.contextService.context$.value.uri;
       }
       if (this.contextService.context$.value.map.view.zoom) {
-        zoom = this.contextService.context$.value.map.view.zoom === map.viewController.getZoom() ? '' : 'zoom=' + map.viewController.getZoom();
+        zoom =
+          this.contextService.context$.value.map.view.zoom ===
+          map.viewController.getZoom()
+            ? ''
+            : 'zoom=' + map.viewController.getZoom();
       }
     }
 
     let url = `${location.origin}${
       location.pathname
-    }?${context}&${zoom}&${center}&${layersUrl}&${llc}&${routingUrl}`
+    }?${context}&${zoom}&${center}&${layersUrl}&${llc}&${routingUrl}`;
 
     for (let i = 0; i < 5; i++) {
       url = url.replace(/&&/g, '&');
       url = url.endsWith('&') ? url.slice(0, -1) : url;
     }
     url = url.endsWith('&') ? url.slice(0, -1) : url;
-    url = url.replace('?&', '?')
+    url = url.replace('?&', '?');
 
     return url;
   }
-
 }
diff --git a/packages/geo/src/lib/datasource/shared/datasource.service.ts b/packages/geo/src/lib/datasource/shared/datasource.service.ts
@@ -27,7 +27,9 @@ import {
   WebSocketDataSource,
   AnyDataSourceOptions,
   MVTDataSource,
-  MVTDataSourceOptions
+  MVTDataSourceOptions,
+  ClusterDataSource,
+  ClusterDataSourceOptions
 } from './datasources';
 
 @Injectable({
@@ -86,15 +88,18 @@ export class DataSourceService {
         );
         break;
       case 'mvt':
-        dataSource = this.createMVTDataSource(
-          context as MVTDataSourceOptions
-        );
+        dataSource = this.createMVTDataSource(context as MVTDataSourceOptions);
         break;
       case 'tilearcgisrest':
         dataSource = this.createTileArcGISRestDataSource(
           context as TileArcGISRestDataSourceOptions
         );
         break;
+      case 'cluster':
+        dataSource = this.createClusterDataSource(
+          context as ClusterDataSourceOptions
+        );
+        break;
       default:
         console.error(context);
         throw new Error('Invalid datasource type');
@@ -208,9 +213,16 @@ export class DataSourceService {
         )
       );
   }
+
   private createMVTDataSource(
     context: MVTDataSourceOptions
   ): Observable<MVTDataSource> {
     return new Observable(d => d.next(new MVTDataSource(context)));
   }
+
+  private createClusterDataSource(
+    context: ClusterDataSourceOptions
+  ): Observable<ClusterDataSource> {
+    return new Observable(d => d.next(new ClusterDataSource(context)));
+  }
 }
diff --git a/packages/geo/src/lib/datasource/shared/datasources/any-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/any-datasource.interface.ts
@@ -9,6 +9,7 @@ import { CartoDataSourceOptions } from './carto-datasource.interface';
 import { ArcGISRestDataSourceOptions } from './arcgisrest-datasource.interface';
 import { TileArcGISRestDataSourceOptions } from './tilearcgisrest-datasource.interface';
 import { MVTDataSourceOptions } from './mvt-datasource.interface';
+import { ClusterDataSourceOptions } from './cluster-datasource.interface';
 
 export type AnyDataSourceOptions =
   | DataSourceOptions
@@ -21,4 +22,5 @@ export type AnyDataSourceOptions =
   | CartoDataSourceOptions
   | ArcGISRestDataSourceOptions
   | TileArcGISRestDataSourceOptions
-  | MVTDataSourceOptions;
+  | MVTDataSourceOptions
+  | ClusterDataSourceOptions;
diff --git a/packages/geo/src/lib/datasource/shared/datasources/any-datasource.ts b/packages/geo/src/lib/datasource/shared/datasources/any-datasource.ts
@@ -10,6 +10,7 @@ import { ArcGISRestDataSource } from './arcgisrest-datasource';
 import { TileArcGISRestDataSource } from './tilearcgisrest-datasource';
 import { WebSocketDataSource } from './websocket-datasource';
 import { MVTDataSource } from './mvt-datasource';
+import { ClusterDataSource } from './cluster-datasource';
 
 export type AnyDataSource =
   | DataSource
@@ -23,4 +24,5 @@ export type AnyDataSource =
   | ArcGISRestDataSource
   | TileArcGISRestDataSource
   | WebSocketDataSource
-  | MVTDataSource;
+  | MVTDataSource
+  | ClusterDataSource;
diff --git a/packages/geo/src/lib/datasource/shared/datasources/cluster-datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/cluster-datasource.interface.ts
@@ -0,0 +1,11 @@
+import olSourceVector from 'ol/source/Vector';
+
+import { FeatureDataSource } from './feature-datasource';
+import { FeatureDataSourceOptions } from './feature-datasource.interface';
+
+export interface ClusterDataSourceOptions extends FeatureDataSourceOptions {
+  // type?: 'cluster';
+  distance?: number;
+  source?: FeatureDataSource;
+  ol?: olSourceVector;
+}
diff --git a/packages/geo/src/lib/datasource/shared/datasources/cluster-datasource.ts b/packages/geo/src/lib/datasource/shared/datasources/cluster-datasource.ts
@@ -0,0 +1,21 @@
+import olSourceCluster from 'ol/source/Cluster';
+
+import { uuid } from '@igo2/utils';
+
+import { FeatureDataSource } from './feature-datasource';
+import { ClusterDataSourceOptions } from './cluster-datasource.interface';
+
+export class ClusterDataSource extends FeatureDataSource {
+  public options: ClusterDataSourceOptions;
+  public ol: olSourceCluster;
+
+  protected createOlSource(): olSourceCluster {
+    this.options.format = this.getSourceFormatFromOptions(this.options);
+    this.options.source = super.createOlSource();
+    return new olSourceCluster(this.options);
+  }
+
+  protected generateId() {
+    return uuid();
+  }
+}
diff --git a/packages/geo/src/lib/datasource/shared/datasources/datasource.interface.ts b/packages/geo/src/lib/datasource/shared/datasources/datasource.interface.ts
@@ -1,6 +1,4 @@
 import olSource from 'ol/source/Source';
-
-import { DataSource } from './datasource';
 import { DownloadOptions } from '../../../download/shared/download.interface';
 
 export interface DataSourceOptions {
@@ -15,7 +13,8 @@ export interface DataSourceOptions {
     | 'arcgisrest'
     | 'tilearcgisrest'
     | 'websocket'
-    | 'mvt';
+    | 'mvt'
+    | 'cluster';
   legend?: DataSourceLegendOptions;
   optionsFromCapabilities?: boolean;
   // title: string;

diff --git a/packages/geo/src/lib/datasource/shared/datasources/index.ts b/packages/geo/src/lib/datasource/shared/datasources/index.ts
@@ -24,5 +24,7 @@ export * from './websocket-datasource';
 export * from './websocket-datasource.interface';
 export * from './mvt-datasource';
 export * from './mvt-datasource.interface';
+export * from './cluster-datasource';
+export * from './cluster-datasource.interface';
 export * from './any-datasource';
 export * from './any-datasource.interface';
diff --git a/packages/geo/src/lib/layer/shared/clusterParam.ts b/packages/geo/src/lib/layer/shared/clusterParam.ts
@@ -0,0 +1,5 @@
+export interface ClusterParam {
+    clusterRange?: Array<number>; // utiliser lorsqu'on veux une symbologie active pour une source cluster.
+    clusterIcon?: string;
+    clusterScale?: number;
+}
diff --git a/packages/geo/src/lib/layer/shared/layer.service.ts b/packages/geo/src/lib/layer/shared/layer.service.ts
@@ -16,7 +16,8 @@ import {
   ArcGISRestDataSource,
   TileArcGISRestDataSource,
   WebSocketDataSource,
-  MVTDataSource
+  MVTDataSource,
+  ClusterDataSource
 } from '../../datasource';
 
 import { DataSourceService } from '../../datasource/shared/datasource.service';
@@ -62,7 +63,8 @@ export class LayerService {
       layerOptions.source.options.optionsFromCapabilities
     ) {
       layerOptions = ObjectUtils.mergeDeep(
-        (layerOptions.source.options as any)._layerOptionsFromCapabilities || {},
+        (layerOptions.source.options as any)._layerOptionsFromCapabilities ||
+          {},
         layerOptions || {}
       );
     }
@@ -80,13 +82,16 @@ export class LayerService {
       case WFSDataSource:
       case ArcGISRestDataSource:
       case WebSocketDataSource:
+      case ClusterDataSource:
         layer = this.createVectorLayer(layerOptions as VectorLayerOptions);
         break;
       case WMSDataSource:
         layer = this.createImageLayer(layerOptions as ImageLayerOptions);
         break;
       case MVTDataSource:
-        layer = this.createVectorTileLayer(layerOptions as VectorTileLayerOptions);
+        layer = this.createVectorTileLayer(
+          layerOptions as VectorTileLayerOptions
+        );
         break;
       default:
         break;
@@ -131,11 +136,24 @@ export class LayerService {
     if (layerOptions.source instanceof ArcGISRestDataSource) {
       const source = layerOptions.source as ArcGISRestDataSource;
       style = source.options.params.style;
-
     } else if (layerOptions.styleByAttribute) {
       const serviceStyle = this.styleService;
-      layerOptions.style = (feature) => {
-        return serviceStyle.createStyleByAttribute(feature, layerOptions.styleByAttribute);
+      layerOptions.style = feature => {
+        return serviceStyle.createStyleByAttribute(
+          feature,
+          layerOptions.styleByAttribute
+        );
+      };
+      return new VectorLayer(layerOptions);
+    }
+
+    if (layerOptions.source instanceof ClusterDataSource) {
+      const serviceStyle = this.styleService;
+      layerOptions.style = feature => {
+        return serviceStyle.createClusterStyle(
+          feature,
+          layerOptions.clusterParam
+        );
       };
       return new VectorLayer(layerOptions);
     }
@@ -147,16 +165,21 @@ export class LayerService {
     return new VectorLayer(layerOptionsOl);
   }
 
-  private createVectorTileLayer(layerOptions: VectorTileLayerOptions): VectorTileLayer {
+  private createVectorTileLayer(
+    layerOptions: VectorTileLayerOptions
+  ): VectorTileLayer {
     let style;
     if (layerOptions.style !== undefined) {
       style = this.styleService.createStyle(layerOptions.style);
     }
 
     if (layerOptions.styleByAttribute) {
       const serviceStyle = this.styleService;
-      layerOptions.style = (feature) => {
-        return serviceStyle.createStyleByAttribute(feature, layerOptions.styleByAttribute);
+      layerOptions.style = feature => {
+        return serviceStyle.createStyleByAttribute(
+          feature,
+          layerOptions.styleByAttribute
+        );
       };
       return new VectorTileLayer(layerOptions);
     }

diff --git a/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts b/packages/geo/src/lib/layer/shared/layers/vector-layer.interface.ts
@@ -8,11 +8,15 @@ import { FeatureDataSource } from '../../../datasource/shared/datasources/featur
 import { WFSDataSource } from '../../../datasource/shared/datasources/wfs-datasource';
 import { ArcGISRestDataSource } from '../../../datasource/shared/datasources/arcgisrest-datasource';
 import { WebSocketDataSource } from '../../../datasource/shared/datasources/websocket-datasource';
+import { ClusterDataSource } from '../../../datasource/shared/datasources/cluster-datasource';
 
 import { FeatureDataSourceOptions } from '../../../datasource/shared/datasources/feature-datasource.interface';
 import { WFSDataSourceOptions } from '../../../datasource/shared/datasources/wfs-datasource.interface';
 import { ArcGISRestDataSourceOptions } from '../../../datasource/shared/datasources/arcgisrest-datasource.interface';
 import { WebSocketDataSourceOptions } from '../../../datasource/shared/datasources/websocket-datasource.interface';
+import { ClusterDataSourceOptions } from '../../../datasource/shared/datasources/cluster-datasource.interface';
+
+import { ClusterParam } from '../clusterParam';
 
 import { StyleByAttribute } from '../stylebyattribute';
 
@@ -21,18 +25,21 @@ export interface VectorLayerOptions extends LayerOptions {
     | FeatureDataSource
     | WFSDataSource
     | ArcGISRestDataSource
-    | WebSocketDataSource;
+    | WebSocketDataSource
+    | ClusterDataSource;
   sourceOptions?:
     | FeatureDataSourceOptions
     | WFSDataSourceOptions
     | ArcGISRestDataSourceOptions
-    | WebSocketDataSourceOptions;
+    | WebSocketDataSourceOptions
+    | ClusterDataSourceOptions;
   style?: { [key: string]: any } | olStyle | olStyle[];
   browsable?: boolean;
   exportable?: boolean;
   ol?: olLayerVector;
   animation?: VectorAnimation;
   styleByAttribute?: StyleByAttribute;
+  clusterParam?: ClusterParam;
 }
 
 export interface VectorAnimation {

diff --git a/packages/geo/src/lib/layer/shared/layers/vector-layer.ts b/packages/geo/src/lib/layer/shared/layers/vector-layer.ts
@@ -8,16 +8,13 @@ import { FeatureDataSource } from '../../../datasource/shared/datasources/featur
 import { WFSDataSource } from '../../../datasource/shared/datasources/wfs-datasource';
 import { ArcGISRestDataSource } from '../../../datasource/shared/datasources/arcgisrest-datasource';
 import { WebSocketDataSource } from '../../../datasource/shared/datasources/websocket-datasource';
+import { ClusterDataSource } from '../../../datasource/shared/datasources/cluster-datasource';
 
 import { Layer } from './layer';
 import { VectorLayerOptions } from './vector-layer.interface';
 
 export class VectorLayer extends Layer {
-  public dataSource:
-    | FeatureDataSource
-    | WFSDataSource
-    | ArcGISRestDataSource
-    | WebSocketDataSource;
+  public dataSource: FeatureDataSource | WFSDataSource | ArcGISRestDataSource | WebSocketDataSource | ClusterDataSource;
   public options: VectorLayerOptions;
   public ol: olLayerVector;
 

diff --git a/packages/geo/src/lib/layer/shared/layers/vectortile-layer.ts b/packages/geo/src/lib/layer/shared/layers/vectortile-layer.ts
@@ -7,8 +7,7 @@ import { Layer } from './layer';
 import { VectorTileLayerOptions } from './vectortile-layer.interface';
 
 export class VectorTileLayer extends Layer {
-  public dataSource:
-    | MVTDataSource;
+  public dataSource: MVTDataSource;
   public options: VectorTileLayerOptions;
   public ol: olLayerVectorTile;
 
@@ -19,11 +18,8 @@ export class VectorTileLayer extends Layer {
   protected createOlLayer(): olLayerVectorTile {
     const olOptions = Object.assign({}, this.options, {
       source: this.options.source.ol as olSourceVectorTile
-
     });
 
     return new olLayerVectorTile(olOptions);
   }
 }
-
-