Extend example by custom measure styles

camptocamp · Jan 22, 2018 · 364fba3 · 364fba3
1 parent bf4c508
commit 364fba3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/contribs/gmf/apps/mobile_alt/index.html b/contribs/gmf/apps/mobile_alt/index.html
@@ -37,6 +37,7 @@
         gmf-mobile-measurelength
         gmf-mobile-measurelength-active="mainCtrl.measureLengthActive"
         gmf-mobile-measurelength-precision="2"
+        gmf-mobile-measurelength-sketchstyle="::mainCtrl.customMeasureStyle"
         gmf-mobile-measurelength-map="::mainCtrl.map">
       </div>
       <div
@@ -46,6 +47,7 @@
         gmf-mobile-measurepoint-coordinateDecimals="2"
         gmf-mobile-measurepoint-layersconfig="::mainCtrl.elevationLayersConfig"
         gmf-mobile-measurepoint-map="::mainCtrl.map"
+        gmf-mobile-measurepoint-sketchstyle="::mainCtrl.customMeasureStyle"
         gmf-mobile-measurepoint-format="'{x} / {y}'">
       </div>
       <button class="gmf-mobile-nav-trigger gmf-mobile-nav-left-trigger"

diff --git a/contribs/gmf/apps/mobile_alt/js/controller.js b/contribs/gmf/apps/mobile_alt/js/controller.js
@@ -16,6 +16,7 @@ goog.require('gmf.AbstractMobileController');
 goog.require('ngeo.proj.EPSG2056');
 /** @suppress {extraRequire} */
 goog.require('ngeo.proj.EPSG21781');
+goog.require('ol.style.Style');
 
 
 /**
@@ -58,6 +59,32 @@ app.AlternativeMobileController = function($scope, $injector) {
    */
   this.searchCoordinatesProjections = ['EPSG:21781', 'EPSG:2056', 'EPSG:4326'];
 
+
+  /**
+   * @type {ol.style.Style}
+   * @export
+   */
+  this.customMeasureStyle = new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 128, 128, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: 'rgba(255, 0, 0, 0.5)',
+      lineDash: [10, 10],
+      width: 2
+    }),
+    image: new ol.style.RegularShape({
+      stroke: new ol.style.Stroke({
+        color: 'rgba(255, 0, 0, 0.7)',
+        width: 2
+      }),
+      points: 4,
+      radius: 8,
+      radius2: 0,
+      angle: 0
+    })
+  });
+
 };
 ol.inherits(app.AlternativeMobileController, gmf.AbstractMobileController);