2.2 add labels drawing

contribs/gmf/src/directives/featurestyle.js

@@ -70,6 +70,12 @@ gmf.FeaturestyleController = function($scope, ngeoFeatureHelper) {
    */
   this.color = undefined;
 
+  /**
+   * @type {string|undefined}
+   * @export
+   */
+  this.label = undefined;
+
   /**
    * @type {string|undefined}
    * @export
@@ -119,13 +125,15 @@ gmf.FeaturestyleController.prototype.handleFeatureSet_ = function(
     this.type = undefined;
     this.color = undefined;
     this.measure = undefined;
+    this.label = undefined;
   }
 
   if (newFeature) {
     [
       ngeo.FeatureProperties.ANGLE,
       ngeo.FeatureProperties.COLOR,
       ngeo.FeatureProperties.NAME,
+      ngeo.FeatureProperties.SHOW_LABEL,
       ngeo.FeatureProperties.OPACITY,
       ngeo.FeatureProperties.SHOW_MEASURE,
       ngeo.FeatureProperties.SIZE,
@@ -194,6 +202,15 @@ gmf.FeaturestyleController.prototype.getSetName = function(value) {
   return goog.asserts.assertString(this.getSetProperty_(ngeo.FeatureProperties.NAME, value));
 };
 
+/**
+ * @param {boolean|undefined} value A value to set or undefined for the
+ *     purpose of showing the attribute labels or not.
+ * @return {boolean} Whether to show the labels or not.
+ * @export
+ */
+gmf.FeaturestyleController.prototype.getSetShowLabel = function(value) {
+  return goog.asserts.assertBoolean(this.getSetProperty_(ngeo.FeatureProperties.SHOW_LABEL, value));
+};
 
 /**
  * @param {number|undefined} value A stroke value to set or undefined to get.

contribs/gmf/src/directives/partials/featurestyle.html

@@ -6,8 +6,54 @@
         ng-attr-placeholder="{{'Name' | translate}}"
         class="form-control"/>
   </div>
+  <div
+      ng-if="fsCtrl.type !== 'Text'"
+      class="form-group">
+        <input
+          id="gmf-featurestyle-showlabel"
+          type="checkbox"
+          ng-model="fsCtrl.getSetShowLabel"
+          ng-model-options="{getterSetter: true}"/>
+        <label
+          ng-switch="fsCtrl.type"
+          for="gmf-featurestyle-showlabel"
+          class="control-label">
+          {{'Display label' | translate}}
+        </label>
+  </div>
+  <div
+      ng-if="fsCtrl.type !== 'Text'"
+      class="form-group">
+      <input
+          id="gmf-featurestyle-showmeasure"
+          type="checkbox"
+          ng-model="fsCtrl.getSetShowMeasure"
+          ng-model-options="{getterSetter: true}"/>
+      <label
+          ng-switch="fsCtrl.type"
+          for="gmf-featurestyle-showmeasure"
+          class="control-label">
+        <span ng-switch-when="Circle">
+          {{'Display azimuth and radius' | translate}}
+        </span>
+        <span ng-switch-when="Polygon">
+          {{'Display surface' | translate}}
+        </span>
+        <span ng-switch-when="Rectangle">
+          {{'Display surface' | translate}}
+        </span>
+        <span ng-switch-when="LineString">
+          {{'Display length' | translate}}
+        </span>
+        <span ng-switch-when="Point">
+          {{'Display coordinates' | translate}}
+        </span>
+      </label>
+      <em class="text-muted">
+        ({{ fsCtrl.measure }})
+      </em>
+  </div>
 </div>
-
 <div
     ng-if="fsCtrl.feature && fsCtrl.type"
     class="form-horizontal">
@@ -105,40 +151,4 @@
     </div>
   </div>
 
-  <div
-      ng-if="fsCtrl.type !== 'Text'"
-      class="form-group">
-    <div class="col-md-12">
-      <input
-          id="gmf-featurestyle-showmeasure"
-          type="checkbox"
-          ng-model="fsCtrl.getSetShowMeasure"
-          ng-model-options="{getterSetter: true}"/>
-      <label
-          ng-switch="fsCtrl.type"
-          for="gmf-featurestyle-showmeasure"
-          class="control-label">
-        <span ng-switch-when="Circle">
-          {{'Display azimuth and radius' | translate}}
-        </span>
-        <span ng-switch-when="Polygon">
-          {{'Display surface' | translate}}
-        </span>
-        <span ng-switch-when="Rectangle">
-          {{'Display surface' | translate}}
-        </span>
-        <span ng-switch-when="LineString">
-          {{'Display length' | translate}}
-        </span>
-        <span ng-switch-when="Point">
-          {{'Display coordinates' | translate}}
-        </span>
-      </label>
-      <em class="text-muted">
-        ({{ fsCtrl.measure }})
-      </em>
-    </div>
-
-  </div>
-
 </div>

contribs/gmf/src/services/permalink.js

@@ -331,6 +331,7 @@ gmf.Permalink = function($timeout, $rootScope, $injector, ngeoDebounce,
       'isLabel': ngeo.FeatureProperties.IS_TEXT,
       'name': ngeo.FeatureProperties.NAME,
       'pointRadius': ngeo.FeatureProperties.SIZE,
+      'showLabel': ngeo.FeatureProperties.SHOW_LABEL,
       'showMeasure': ngeo.FeatureProperties.SHOW_MEASURE,
       'strokeColor': ngeo.FeatureProperties.COLOR,
       'strokeWidth': ngeo.FeatureProperties.STROKE

src/directives/drawfeature.js

@@ -312,6 +312,7 @@ ngeo.DrawfeatureController.prototype.handleDrawEnd = function(type, event) {
   feature.set(prop.ANGLE, 0);
   feature.set(prop.OPACITY, 0.2);
   feature.set(prop.SHOW_MEASURE, false);
+  feature.set(prop.SHOW_LABEL, false);
   feature.set(prop.SIZE, 10);
   feature.set(prop.STROKE, 2);
 

src/ngeo.js

@@ -129,6 +129,11 @@ ngeo.FeatureProperties = {
    * @export
    */
   NAME: 'n',
+  /**
+   * @type {string}
+   * @export
+   */
+  SHOW_LABEL: 'b',
   /**
    * @type {string}
    * @export

src/ol-ext/format/featurehash.js

@@ -713,10 +713,12 @@ ngeo.format.FeatureHash.castValue_ = function(key, value) {
     ngeo.FeatureProperties.IS_RECTANGLE,
     ngeo.FeatureProperties.IS_TEXT,
     ngeo.FeatureProperties.SHOW_MEASURE,
+    ngeo.FeatureProperties.SHOW_LABEL,
     'isCircle',
     'isRectangle',
     'isLabel',
-    'showMeasure'
+    'showMeasure',
+    'showLabel'
   ];
 
   if (ol.array.includes(numProperties, key)) {

src/services/featurehelper.js

@@ -197,61 +197,79 @@ ngeo.FeatureHelper.prototype.getStyle = function(feature) {
 
 /**
  * @param {!ol.Feature} feature Feature with linestring geometry.
- * @return {!ol.style.Style} Style.
+ * @return {!Array.<!ol.style.Style>} Style.
  * @private
  */
 ngeo.FeatureHelper.prototype.getLineStringStyle_ = function(feature) {
-
   const strokeWidth = this.getStrokeProperty(feature);
+  const showLabel = this.getShowLabelProperty(feature);
   const showMeasure = this.getShowMeasureProperty(feature);
   const color = this.getRGBAColorProperty(feature);
 
-  const options = {
+  const styles = [new ol.style.Style({
     stroke: new ol.style.Stroke({
       color,
       width: strokeWidth
     })
-  };
-
+  })];
+  //Label Style
+  const textLabelValues = [];
   if (showMeasure) {
-    options.text = this.createTextStyle_({
-      text: this.getMeasure(feature)
-    });
+    textLabelValues.push(this.getMeasure(feature));
   }
-
-  return new ol.style.Style(options);
+  if (showLabel) {
+    textLabelValues.push(this.getNameProperty(feature));
+  }
+  if (showLabel ||  showMeasure) {
+    // display both label using  \n
+    const textLabelValue = textLabelValues.join('\n');
+    styles.push(new ol.style.Style({
+      text: this.createTextStyle_({
+        text: textLabelValue
+      })
+    }));
+  }
+  return styles;
 };
 
 
 /**
  * @param {!ol.Feature} feature Feature with point geometry.
- * @return {!ol.style.Style} Style.
+ * @return {!Array.<!ol.style.Style>} Style.
  * @private
  */
 ngeo.FeatureHelper.prototype.getPointStyle_ = function(feature) {
-
   const size = this.getSizeProperty(feature);
   const color = this.getRGBAColorProperty(feature);
-
-  const options = {
+  const showLabel = this.getShowLabelProperty(feature);
+  const showMeasure = this.getShowMeasureProperty(feature);
+  const styles = [new ol.style.Style({
     image: new ol.style.Circle({
       radius: size,
       fill: new ol.style.Fill({
         color
       })
     })
-  };
-
-  const showMeasure = this.getShowMeasureProperty(feature);
-
+  })];
+  //Label Style
+  const textLabelValues = [];
   if (showMeasure) {
-    options.text = this.createTextStyle_({
-      text: this.getMeasure(feature),
-      offsetY: -(size + 10 / 2 + 4)
-    });
+    textLabelValues.push(this.getMeasure(feature));
   }
-
-  return new ol.style.Style(options);
+  if (showLabel) {
+    textLabelValues.push(this.getNameProperty(feature));
+  }
+  if (showLabel ||  showMeasure) {
+    // display both label using  \n
+    const textLabelValue = textLabelValues.join('\n');
+    styles.push(new ol.style.Style({
+      text: this.createTextStyle_({
+        text: textLabelValue,
+        offsetY: -(size + 10 / 2 + 4)
+      })
+    }));
+  }
+  return styles;
 };
 
 
@@ -299,13 +317,12 @@ ngeo.FeatureHelper.prototype.getNumber = function(feature, attrib) {
  * @private
  */
 ngeo.FeatureHelper.prototype.getPolygonStyle_ = function(feature) {
-
   const strokeWidth = this.getStrokeProperty(feature);
   const opacity = this.getOpacityProperty(feature);
   const color = this.getRGBAColorProperty(feature);
+  const showLabel = this.getShowLabelProperty(feature);
   const showMeasure = this.getShowMeasureProperty(feature);
 
-
   // fill color with opacity
   const fillColor = color.slice();
   fillColor[3] = opacity;
@@ -321,8 +338,7 @@ ngeo.FeatureHelper.prototype.getPolygonStyle_ = function(feature) {
       width: strokeWidth
     })
   })];
-
-  if (showMeasure) {
+  if (showMeasure || showLabel) {
     if (azimut !== undefined) {
       // Radius style:
       const line = this.getRadiusLine(feature, azimut);
@@ -355,14 +371,26 @@ ngeo.FeatureHelper.prototype.getPolygonStyle_ = function(feature) {
         })
       }));
     } else {
-      styles.push(new ol.style.Style({
-        text: this.createTextStyle_({
-          text: this.getMeasure(feature)
-        })
-      }));
+      //Label Style
+      const textLabelValues = [];
+      if (showMeasure) {
+        textLabelValues.push(this.getMeasure(feature));
+      }
+      if (showLabel) {
+        textLabelValues.push(this.getNameProperty(feature));
+      }
+      if (showLabel ||  showMeasure) {
+        // display both label using  \n
+        const textLabelValue = textLabelValues.join('\n');
+        styles.push(new ol.style.Style({
+          text: this.createTextStyle_({
+            text: textLabelValue,
+            offsetY: -(8 / 2 + 4)
+          })
+        }));
+      }
     }
   }
-
   return styles;
 };
 
@@ -604,7 +632,7 @@ ngeo.FeatureHelper.prototype.getHaloStyle_ = function(feature) {
 /**
  * Delete the unwanted ol3 properties from the current feature then return the
  * properties.
- * Delete also the 'ngeo_feature_type_' from the ngeo query system.
+ * Also delete the 'ngeo_feature_type_' from the ngeo query system.
  * @param {!ol.Feature} feature Feature.
  * @return {!Object.<string, *>} Filtered properties of the current feature.
  * @export
@@ -692,6 +720,20 @@ ngeo.FeatureHelper.prototype.getShowMeasureProperty = function(feature) {
   return goog.asserts.assertBoolean(showMeasure);
 };
 
+/**
+ * @param {!ol.Feature} feature Feature.
+ * @return {boolean} Show feature label.
+ * @export
+ */
+ngeo.FeatureHelper.prototype.getShowLabelProperty = function(feature) {
+  let showLabel = feature.get(ngeo.FeatureProperties.SHOW_LABEL);
+  if (showLabel === undefined) {
+    showLabel = false;
+  } else if (typeof showLabel === 'string') {
+    showLabel = (showLabel === 'true') ? true : false;
+  }
+  return goog.asserts.assertBoolean(showLabel);
+};
 
 /**
  * @param {!ol.Feature} feature Feature.