Fix measurement results for projected maps

src/components/measuretool/MeasureResult.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { Mapable } from '../../mixins/Mapable';
 import AngleUtil from '../../../src/util/Angle';
 import LineStringGeom from 'ol/geom/LineString';
 import { getArea, getLength } from 'ol/sphere.js';
@@ -23,12 +24,14 @@ const EMPTY_RESULT_TEXT = ' -- ';
 
 export default {
   name: 'wgu-measure-result',
+  mixins: [Mapable],
   props: {
     measureGeom: { type: Object },
     measureType: { type: String }
   },
   data () {
     return {
+      map: null,
       area: EMPTY_RESULT_TEXT,
       distance: EMPTY_RESULT_TEXT,
       angle: EMPTY_RESULT_TEXT
@@ -61,12 +64,13 @@ export default {
   },
   methods: {
     /**
-       * Calculates and formats the length of the given line.
-       *
-       * @param  {ol.geom.LineString} line The LineString object to calculate length for
-       */
+     * Calculates and formats the length of the given line.
+     *
+     * @param  {ol.geom.LineString} line The LineString object to calculate length for
+     */
     formatLength (line) {
-      const length = getLength(line);
+      const mapSrs = this.map.getView().getProjection().getCode();
+      const length = getLength(line, { projection: mapSrs });
       let output;
       if (length > 100) {
         output = this.$t('wgu-measuretool.lengthKm',
@@ -83,7 +87,8 @@ export default {
        * @param  {ol.geom.Polygon} polygon The Polygon object to calculate area for
        */
     formatArea (polygon) {
-      const area = getArea(polygon);
+      const mapSrs = this.map.getView().getProjection().getCode();
+      const area = getArea(polygon, { projection: mapSrs });
       let output;
       if (area > 10000) {
         output = this.$t('wgu-measuretool.areaSquareKm',

tests/unit/specs/components/measuretool/MeasureResult.spec.js

@@ -2,6 +2,8 @@ import { shallowMount } from '@vue/test-utils';
 import MeasureResult from '@/components/measuretool/MeasureResult';
 import PolygonGeom from 'ol/geom/Polygon'
 import LineStringGeom from 'ol/geom/LineString';
+import Map from 'ol/Map';
+import View from 'ol/View';
 
 describe('measuretool/MeasureResult.vue', () => {
   // Inspect the raw component options
@@ -39,7 +41,16 @@ describe('measuretool/MeasureResult.vue', () => {
     let comp;
     let vm;
     beforeEach(() => {
-      comp = shallowMount(MeasureResult);
+      const olMap = new Map({
+        view: new View({ center: [0, 0], zoom: 2 })
+      });
+      comp = shallowMount(MeasureResult, {
+        data () {
+          return {
+            map: olMap
+          }
+        }
+      });
       vm = comp.vm;
     });
 
@@ -71,7 +82,16 @@ describe('measuretool/MeasureResult.vue', () => {
   describe('watchers', () => {
     let comp;
     beforeEach(() => {
-      comp = shallowMount(MeasureResult);
+      const olMap = new Map({
+        view: new View({ center: [0, 0], zoom: 2 })
+      });
+      comp = shallowMount(MeasureResult, {
+        data () {
+          return {
+            map: olMap
+          }
+        }
+      });
     });
 
     it('watches measureGeom Area', done => {