feat(geo.layer.style): styleByAttribute with regex (#401)

* feat(geo.layer.style) styleByAttribute with regex * fix(geo.layer.style.service) text label fonctional * feat(geo.layer.style) styleByAttribute with multiple feature's attributes * fix(geo.layer.feature) give a ID to feature to fix getinfo * fix(geo.layer.style) fix style with numeric attributes and add label to regular shape * Update feature.utils.ts * Update stylebyattribute.ts
infra-geo-ouverte · Sep 11, 2019 · 6ea3d20 · 6ea3d20
1 parent e6e53a2
commit 6ea3d20
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/packages/geo/src/lib/feature/shared/feature.utils.ts b/packages/geo/src/lib/feature/shared/feature.utils.ts
@@ -3,6 +3,7 @@ import * as olproj from 'ol/proj';
 import * as olstyle from 'ol/style';
 import OlFeature from 'ol/Feature';
 import OlFormatGeoJSON from 'ol/format/GeoJSON';
+import { uuid } from '@igo2/utils';
 
 import {
   EntityKey,
@@ -102,7 +103,7 @@ export function featureFromOl(
 
   const title = olFeature.get('_title');
   const mapTitle = olFeature.get('_mapTitle');
-  const id = olFeature.getId();
+  const id = olFeature.getId() ? olFeature.getId() : uuid();
 
   return {
     type: FEATURE,

diff --git a/packages/geo/src/lib/layer/shared/style.service.ts b/packages/geo/src/lib/layer/shared/style.service.ts
@@ -31,8 +31,8 @@ export class StyleService {
   }
 
   private getOlKey(key: any) {
-    let olKey = key.toLowerCase();
-    switch (olKey) {
+    let olKey;
+    switch (key.toLowerCase()) {
       case 'circle':
       case 'regularshape':
       case 'icon':
@@ -42,14 +42,20 @@ export class StyleService {
         break;
     }
 
-    return olKey;
+    return olKey || key;
   }
 
   private getOlCls(key: any) {
     let olCls = olstyle[key.charAt(0).toUpperCase() + key.slice(1)];
     if (key === 'regularshape') {
       olCls = olstyle.RegularShape;
     }
+    if (key === 'backgroundFill') {
+      olCls = olstyle.Fill;
+    }
+    if (key === 'backgroundStroke') {
+      olCls = olstyle.Stroke;
+    }
 
     return olCls;
   }
@@ -65,11 +71,14 @@ export class StyleService {
     const icon = styleByAttribute.icon;
     const scale = styleByAttribute.scale;
     const size = data.length;
-    const label = styleByAttribute.label;
+    const label = styleByAttribute.label.attribute || styleByAttribute.label;
+    const labelStyle = this.parseStyle('text',styleByAttribute.label.style) || new olstyle.Text();
+    labelStyle.setText(this.getLabel(feature, label));
     const baseStyle = styleByAttribute.baseStyle;
     if (type === 'circle') {
       for (let i = 0; i < size; i++) {
-        if (feature.get(attribute) === data[i]) {
+        const val = feature.get(attribute) || "";
+        if (val === data[i] || val.toString().match(data[i])) {
           if (icon) {
             style = [
               new olstyle.Style({
@@ -91,7 +100,8 @@ export class StyleService {
                 fill: new olstyle.Fill({
                   color: fill ? fill[i] : 'black'
                 })
-              })
+              }),
+              text: labelStyle
             })
           ];
           return style;
@@ -115,7 +125,8 @@ export class StyleService {
       }
     } else if (type === 'regular') {
       for (let i = 0; i < size; i++) {
-        if (feature.get(attribute) === data[i]) {
+        const val = feature.get(attribute) || "";
+        if (val === data[i] || val.toString().match(data[i])) {
           style = [
             new olstyle.Style({
               stroke: new olstyle.Stroke({
@@ -125,12 +136,7 @@ export class StyleService {
               fill: new olstyle.Fill({
                 color: fill ? fill[i] : 'rgba(255,255,255,0.4)'
               }),
-              text: new olstyle.Text({
-                text: feature.get(label),
-                stroke: new olstyle.Stroke({
-                  color: 'black'
-                })
-              })
+              text: labelStyle
             })
           ];
           return style;
@@ -220,4 +226,21 @@ export class StyleService {
     }
     return style;
   }
+
+  getLabel(feature, labelMatch): string {
+    let label = labelMatch;
+    const labelToGet = Array.from(labelMatch.matchAll(/\$\{([^\{\}]+)\}/g))
+
+    labelToGet.forEach(v => {
+      label = label.replace(v[0], feature.get(v[1]));
+    });
+
+    // Nothing done? check feature's attribute
+    if (labelToGet.length === 0 && label === labelMatch) {
+      label = feature.get(labelMatch) || labelMatch;
+    }
+
+    return label;
+
+  }
 }
diff --git a/packages/geo/src/lib/layer/shared/stylebyattribute.ts b/packages/geo/src/lib/layer/shared/stylebyattribute.ts
@@ -10,6 +10,6 @@ export interface StyleByAttribute {
     radius?: Array<number>;
     icon?: Array<string>;
     scale?: Array<number>;
-    label?: string;
+    label?: string | { [key: string]: any } | olStyle | olStyle[];
     baseStyle?: { [key: string]: any } | olStyle | olStyle[];
 }