From 9facbe76c85c5ac60fd370c239a073bfcfe7c026 Mon Sep 17 00:00:00 2001 From: Peter Bastiani Date: Tue, 22 Aug 2023 13:16:37 +0200 Subject: [PATCH] AW1873Bouwplanlabels --- .../item-vector-source.component.ts | 49 +++++++++++++------ 1 file changed, 34 insertions(+), 15 deletions(-) diff --git a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts index 726fe6b..fdec33c 100644 --- a/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-vector-source/item-vector-source.component.ts @@ -1,4 +1,4 @@ -import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy } from '@angular/core'; +import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken, OnDestroy, LOCALE_ID } from '@angular/core'; import { LayerVectorComponent, SourceVectorComponent, MapComponent } from 'ngx-openlayers'; import { ItemService, ItemTypeService, IItem, IItemType, FolderService } from '@farmmaps/common'; @@ -19,6 +19,7 @@ import { IStyles } from '../../../models/style.cache'; import { FeatureIconService } from '../../../services/feature-icon.service'; import { Subscription } from 'rxjs'; import { getCenter } from 'ol/extent'; +import { formatNumber } from '@angular/common'; @Component({ selector: 'fm-map-item-source-vector', @@ -42,8 +43,9 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements private stylesCache: IStyles = {}; private labelToolSettings = { showFieldName: true, showCropName: true, showArea: false, showCentroid: false }; private sub: Subscription; + private propertiesToShow: string[] = []; - constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService, private folderService: FolderService) { + constructor(@Host() private layer: LayerVectorComponent, private itemService: ItemService, private map: MapComponent, private itemTypeService: ItemTypeService, private featureIconService$: FeatureIconService, private folderService: FolderService, @Inject(LOCALE_ID) private locale: string) { super(layer); this._format = new GeoJSON(); } @@ -83,9 +85,15 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements this.sub = this.folderService.getFolder('my_settings').subscribe( userSettingsRoot => { this.itemService.getChildItemList(userSettingsRoot.code, 'vnd.farmmaps.itemtype.settings.general').subscribe( - items => { - if (items && items.length > 0) this.labelToolSettings = items[0].data.labelToolSettings; + items => { + if (items && items.length > 0) { + this.propertiesToShow = []; + if (items[0].data.labelToolSettings.showFieldName) this.propertiesToShow.push('name'); + if (items[0].data.labelToolSettings.showCropName) this.propertiesToShow.push('cropTypeName'); + if (items[0].data.labelToolSettings.showArea) this.propertiesToShow.push('area'); + if (items[0].data.labelToolSettings.showCentroid) this.propertiesToShow.push('centroid'); } + } ) }); this.strategy = loadingstrategy.bbox; @@ -146,7 +154,7 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements color: fillColor }), geometry: (feature: Feature) => this.geometry(feature), - text: this.getTextForCropField(feature) + text: this.getDisplayTextForFeature(feature, this.propertiesToShow) }); } else { key = 'file'; @@ -206,23 +214,34 @@ export class ItemVectorSourceComponent extends SourceVectorComponent implements } } - getTextForCropField(feature): style.Text { - if (!this.labelToolSettings) return null; + getDisplayTextForFeature(feature: Feature, propertiesToShow: string[], overrule: style.Text = null, zoom: { min: number, current: number } = null): style.Text { + if (!propertiesToShow) return null; + if (propertiesToShow.length <= 0) return null; + if (zoom && zoom.current > zoom.min) return null; + let displayText = ''; - if (this.labelToolSettings.showFieldName) displayText += feature.get('name') + '\n'; - if (this.labelToolSettings.showCropName && feature.get('cropTypeName')) displayText += feature.get('cropTypeName') + '\n'; - if (this.labelToolSettings.showArea && feature.get('area')) displayText += feature.get('area') + 'ha\n'; - if (this.labelToolSettings.showCentroid && this.getCentroid(feature)) displayText += this.getCentroid(feature); + for (let i = 0; i < propertiesToShow.length; i++) { + let value = feature.get(propertiesToShow[i]); + switch (propertiesToShow[i]) { + case "area": value = formatNumber(value, this.locale, '0.1-2') + 'ha'; break; + case "centroid": value = feature.getGeometry() ? getCenter(feature.getGeometry().getExtent()) : null; break; + } + displayText += value + (i < propertiesToShow.length ? '\n': ''); + } - return new style.Text({ + const styleText = new style.Text({ font: '13px Calibri,sans-serif', fill: new style.Fill({ color: '#ffffff' }), stroke: new style.Stroke({ color: '#000000', width: 2 }), text: displayText }); - } - private getCentroid(feature: Feature) { - return null; + if (overrule) { + if (overrule.getFont()) styleText.setFont(overrule.getFont()); + if (overrule.getFill()) styleText.setFill(overrule.getFill()); + if (overrule.getStroke()) styleText.setStroke(overrule.getStroke()); + } + + return styleText; } } \ No newline at end of file