From e5dcbfd5d9f5c12823db42213563d5678a24a63d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A9reck=20Lynch?= <50959537+drekss@users.noreply.github.com> Date: Mon, 4 May 2020 16:59:22 -0400 Subject: [PATCH] feat(import): import cluster (#616) * commit 03-13 * commit cluster style into import feature Co-authored-by: drekss --- .../lib/import-export/shared/import.utils.ts | 79 +++++++++---------- .../lib/map/shared/mapOffline.directive.ts | 45 +++++++---- 2 files changed, 66 insertions(+), 58 deletions(-) diff --git a/packages/geo/src/lib/import-export/shared/import.utils.ts b/packages/geo/src/lib/import-export/shared/import.utils.ts index 393b697cba..903acd4ad8 100644 --- a/packages/geo/src/lib/import-export/shared/import.utils.ts +++ b/packages/geo/src/lib/import-export/shared/import.utils.ts @@ -12,6 +12,9 @@ import { QueryableDataSourceOptions } from '../../query/shared/query.interfaces' import { StyleService } from '../../layer/shared/style.service'; import { StyleByAttribute } from '../../layer/shared/vector-style.interface'; import { StyleListService } from '../style-list/style-list.service'; +import { ClusterParam } from '../../layer/shared/clusterParam'; +import { ClusterDataSource } from '../../datasource/shared/datasources/cluster-datasource'; +import { ClusterDataSourceOptions } from '../../datasource/shared/datasources/cluster-datasource.interface'; export function addLayerAndFeaturesToMap(features: Feature[], map: IgoMap, layerTitle: string): VectorLayer { const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection)); @@ -55,66 +58,58 @@ export function addLayerAndFeaturesStyledToMap(features: Feature[], map: IgoMap, styleListService: StyleListService, styleService: StyleService): VectorLayer { const olFeatures = features.map((feature: Feature) => featureToOl(feature, map.projection)); let style; + let distance: number; if (styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute')) { const styleByAttribute: StyleByAttribute = styleListService.getStyleList(layerTitle.toString() + '.styleByAttribute'); - const styleBy = feature => { + style = feature => { return styleService.createStyleByAttribute( feature, styleByAttribute ); }; - style = styleBy; - } else if (styleListService.getStyleList(layerTitle.toString() + '.style')) { - const radius = styleListService.getStyleList(layerTitle.toString() + '.style.radius'); + } else if (styleListService.getStyleList(layerTitle.toString() + '.clusterStyle')) { + const clusterParam: ClusterParam = styleListService.getStyleList(layerTitle.toString() + '.clusterParam'); + distance = styleListService.getStyleList(layerTitle.toString() + '.distance'); - const stroke = new olStyle.Stroke({ - color: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.color'), - width: styleListService.getStyleList(layerTitle.toString() + '.style.stroke.width') - }); + const baseStyle = styleService.createStyle(styleListService.getStyleList(layerTitle.toString() + '.clusterStyle')); - const fill = new olStyle.Fill({ - color: styleListService.getStyleList(layerTitle.toString() + '.style.fill.color') - }); + style = feature => { + return styleService.createClusterStyle( + feature, + clusterParam, + baseStyle + ); + }; + + } else if (styleListService.getStyleList(layerTitle.toString() + '.style')) { + + style = styleService.createStyle(styleListService.getStyleList(layerTitle.toString() + '.style')); - style = new olStyle.Style({ - stroke, - fill, - image: new olStyle.Circle({ - radius: radius ? radius : 5, - stroke, - fill - }) - }); } else { - const radius = styleListService.getStyleList('default.style.radius'); - const stroke = new olStyle.Stroke({ - color: styleListService.getStyleList('default.style.stroke.color'), - width: styleListService.getStyleList('default.style.stroke.width') - }); + style = styleService.createStyle(styleListService.getStyleList('default.style')); - const fill = new olStyle.Fill({ - color: styleListService.getStyleList('default.style.fill.color') - }); + } + let source; - style = new olStyle.Style({ - stroke, - fill, - image: new olStyle.Circle({ - radius: radius ? radius : 5, - stroke, - fill - }) - }); + if (styleListService.getStyleList(layerTitle.toString() + '.clusterStyle')) { + const sourceOptions: ClusterDataSourceOptions & QueryableDataSourceOptions = { + distance, + type: 'cluster', + queryable: true + }; + source = new ClusterDataSource(sourceOptions); + source.ol.source.addFeatures(olFeatures); + } else { + const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = { + queryable: true + }; + source = new FeatureDataSource(sourceOptions); + source.ol.addFeatures(olFeatures); } - const sourceOptions: FeatureDataSourceOptions & QueryableDataSourceOptions = { - queryable: true - }; - const source = new FeatureDataSource(sourceOptions); - source.ol.addFeatures(olFeatures); const layer = new VectorLayer({ title: layerTitle, diff --git a/packages/geo/src/lib/map/shared/mapOffline.directive.ts b/packages/geo/src/lib/map/shared/mapOffline.directive.ts index b66ae01066..70a3aef809 100644 --- a/packages/geo/src/lib/map/shared/mapOffline.directive.ts +++ b/packages/geo/src/lib/map/shared/mapOffline.directive.ts @@ -8,6 +8,10 @@ import { XYZDataSourceOptions } from '../../datasource/shared/datasources/xyz-da import { MVTDataSourceOptions } from '../../datasource/shared/datasources/mvt-datasource.interface'; import { ClusterDataSourceOptions } from '../../datasource/shared/datasources/cluster-datasource.interface'; import { Layer } from '../../layer/shared/layers/layer'; +import { ClusterDataSource } from '../../datasource/shared/datasources/cluster-datasource'; +import { MVTDataSource } from '../../datasource/shared/datasources/mvt-datasource'; +import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource'; +import { XYZDataSource } from '../../datasource/shared/datasources/xyz-datasource'; @Directive({ selector: '[igoMapOffline]' @@ -85,15 +89,16 @@ export class MapOfflineDirective implements AfterViewInit { let sourceOptions; const layerList = this.map.layers$.value; layerList.forEach(layer => { - if (layer.options.sourceOptions.type === 'mvt') { + if (layer.options.source instanceof MVTDataSource) { sourceOptions = (layer.options.sourceOptions as MVTDataSourceOptions); layer.ol.getSource().clear(); - } else if (layer.options.sourceOptions.type === 'xyz') { + } else if (layer.options.source instanceof XYZDataSource) { sourceOptions = (layer.options.sourceOptions as XYZDataSourceOptions); - } else if (layer.options.sourceOptions.type === 'vector') { - sourceOptions = (layer.options.sourceOptions as FeatureDataSourceOptions); - } else if (layer.options.sourceOptions.type === 'cluster') { + } else if (layer.options.source instanceof ClusterDataSource) { sourceOptions = (layer.options.sourceOptions as ClusterDataSourceOptions); + console.log(layer); + } else if (layer.options.source instanceof FeatureDataSource) { + sourceOptions = (layer.options.sourceOptions as FeatureDataSourceOptions); } else { if (this.networkState.connection === false || this.offlineButtonState.connection === false) { layer.ol.setMaxResolution(0); @@ -104,18 +109,26 @@ export class MapOfflineDirective implements AfterViewInit { } } - if (sourceOptions.pathOffline && this.networkState.connection === false || - sourceOptions.pathOffline && this.offlineButtonState.connection === false) { - if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') { - return; + if (sourceOptions) { + if (sourceOptions.pathOffline && this.networkState.connection === false || + sourceOptions.pathOffline && this.offlineButtonState.connection === false) { + if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') { + return; + } + layer.ol.getSource().setUrl(sourceOptions.pathOffline); + } else if (sourceOptions.pathOffline && this.networkState.connection === false || + sourceOptions.pathOffline && this.offlineButtonState.connection === true) { + if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') { + return; + } + layer.ol.getSource().setUrl(sourceOptions.url); + } else { + if (this.networkState.connection === false || this.offlineButtonState.connection === false) { + layer.ol.setMaxResolution(0); + } else if (this.networkState.connection === true || this.offlineButtonState.connection === true) { + layer.ol.setMaxResolution(Infinity); } - layer.ol.getSource().setUrl(sourceOptions.pathOffline); - } else if (sourceOptions.pathOffline && this.networkState.connection === false || - sourceOptions.pathOffline && this.offlineButtonState.connection === true) { - if (sourceOptions.type === 'vector' || sourceOptions.type === 'cluster') { - return; - } - layer.ol.getSource().setUrl(sourceOptions.url); + } } else { if (this.networkState.connection === false || this.offlineButtonState.connection === false) { layer.ol.setMaxResolution(0);