AW1873Bouwplanlabels

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 => {
+          items => {
-              if (items && items.length > 0) this.labelToolSettings = items[0].data.labelToolSettings;
+            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<Geometry>) => 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 {
+  getDisplayTextForFeature(feature: Feature<Geometry>, propertiesToShow: string[], overrule: style.Text = null, zoom: { min: number, current: number } = null): style.Text {
-    if (!this.labelToolSettings) return null;
+    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';
+    for (let i = 0; i < propertiesToShow.length; i++) {
-    if (this.labelToolSettings.showCropName && feature.get('cropTypeName')) displayText += feature.get('cropTypeName') + '\n';
+      let value = feature.get(propertiesToShow[i]);
-    if (this.labelToolSettings.showArea && feature.get('area')) displayText += feature.get('area') + 'ha\n';
+      switch (propertiesToShow[i]) {
-    if (this.labelToolSettings.showCentroid && this.getCentroid(feature)) displayText += this.getCentroid(feature);
+        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<Geometry>) {
+    if (overrule) {
-    return null;
+      if (overrule.getFont()) styleText.setFont(overrule.getFont());
+      if (overrule.getFill()) styleText.setFill(overrule.getFill());
+      if (overrule.getStroke()) styleText.setStroke(overrule.getStroke());
+    }
+
+    return styleText;
   }
 }