openlayers5- distance measurement and area measurement

Upgrade to the latest version openlayers5.2, re-write the measurement methods, the official website which has achieved good code examples, but the project is not very appropriate based on the introduction of direct examples of modular development vue, the official website of the official website of the examples and can have continuous measurement, and the project needs to be measured in a way, so it is necessary to make some improvements to the official website of example, look at this mark, there are friends who also need to thank not directly take O ( ¯)¯ ) O
renderings are as follows:

Achieve Measure.js

import Draw from 'ol/interaction/Draw'
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

import {
  unByKey
} from 'ol/Observable.js';
import Overlay from 'ol/Overlay';
import {
  getArea,
  getLength
} from 'ol/sphere.js';
import View from 'ol/View';
import {
  LineString,
  Polygon
} from 'ol/geom.js';
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style
} from 'ol/style.js';
export default{

  measure(map, measureType) {
    /**
     * Currently drawn feature.
     * @type {module:ol/Feature~Feature}
     */
    var sketch;


    /**
     * The help tooltip element.
     * @type {Element}
     */
    var helpTooltipElement;


    /**
     * Overlay to show the help messages.
     * @type {module:ol/Overlay}
     */
    var helpTooltip;


    /**
     * The measure tooltip element.
     * @type {Element}
     */
    var measureTooltipElement;


    /**
     * Overlay to show the measurement.
     * @type {module:ol/Overlay}
     */
    var measureTooltip;


    / ** 
     * When the Message to The Show User IS A Polygon Drawing. 
     * @Type {String} 
     * / 
    var continuePolygonMsg = 'click continue to draw polygons'; 


    / ** 
     * When the Message to The Show User IS A Line Drawing. 
     * @ {String} type 
     * / 
    var continueLineMsg = 'click to continue drawing line'; 

    createMeasureTooltip (); 
    createHelpTooltip (); 

    / ** 
     * Move the Handle pointer. 
     * @param {Module1: OL / MapBrowserEvent} ~ MapBrowserEvent of The EVT Event. 
     * / 
    pointerMoveHandler function = var (EVT) { 
      IF (evt.dragging) { 
        return; 
      }
      / ** @type {String} * / 
      var helpmsg = 'click start drawing';

      if (sketch) {
        var geom = (sketch.getGeometry());
        if (geom instanceof Polygon) {
          helpMsg = continuePolygonMsg;
        } else if (geom instanceof LineString) {
          helpMsg = continueLineMsg;
        }
      }

      helpTooltipElement.innerHTML = helpMsg;
      helpTooltip.setPosition(evt.coordinate);

      helpTooltipElement.classList.remove('hidden');
    };

    map.on('pointermove', pointerMoveHandler);

    map.getViewport().addEventListener('mouseout', function () {
      helpTooltipElement.classList.add('hidden');
    });

    var draw;
    var formatLength = function (line) {
      var length = getLength(line);
      var output;
      if (length > 100) {
        output = (Math.round(length / 1000 * 100) / 100) +
          ' ' + 'km';
      } else {
        output = (Math.round(length * 100) / 100) +
          ' ' + 'm';
      }
      return output;
    };
    var formatArea = function (polygon) {
      var area = getArea(polygon);
      var output;
      if (area > 10000) {
        output = (Math.round(area / 1000000 * 100) / 100) +
          ' ' + 'km<sup>2</sup>';
      } else {
        = Output (Math.round (Area * 100) / 100) + 
        of the type: of the type, 
        style: new new style ({ 
          the Fill:
          ' ' + 'm<sup>2</sup>';
      }
      Output return; 
    }; 
    var Source; 
    // var Layer; 
    // Get vectorlayer layer is deposited feature. map initialization of the well can be added 
    for (the let layerTmp of map.getLayers () getArray ().) { 
      IF (layerTmp.get ( "name") == "Feature") { 
        // Layer = layerTmp; 
        // layerTmp .setSource (null) 
        Source layerTmp.getSource = (); 
      } 
    } 

    function addInteraction () { 
      var type = (MeasureType == 'Area' 'Polygon': 'the LineString'?); 
      Draw the Draw new new = ({ 
        Source: Source, 
            Color: 'RGBA (255, 255, 255, 0.2)' 
          }), 
          Stroke: the Stroke new new ({
            color: 'rgba(0, 0, 0, 0.5)',
            lineDash: [10, 10],
            width: 2
          }),
          image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.7)'
            }),
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            })
          })
        })
      });
      map.addInteraction(draw);

      var listener;
      draw.on('drawstart',
        function (evt) {
          // set sketch
          sketch = evt.feature;

          /** @type {module:ol/coordinate~Coordinate|undefined} */
          var tooltipCoord = evt.coordinate;

          listener = sketch.getGeometry().on('change', function (evt) {
            var geom = evt.target;
            var output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            measureTooltipElement.innerHTML = output;
            measureTooltip.setPosition(tooltipCoord);
          });
        }, this);

      draw.on('drawend',
        function () {
          measureTooltipElement.className = 'tooltip tooltip-static';
          measureTooltip.setOffset([0, -7]);
          // unset sketch
          sketch = null;
          // unset tooltip so that a new one can be created
          measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
          map.un('pointermove', pointerMoveHandler);
          map.removeInteraction(draw);
          helpTooltipElement.classList.add('hidden');
        }, this);
    }

    function createHelpTooltip() {
      if (helpTooltipElement) {
        helpTooltipElement.parentNode.removeChild(helpTooltipElement);
      }
      helpTooltipElement = document.createElement('div');
      helpTooltipElement.className = 'tooltip hidden';
      helpTooltip = new Overlay({
        element: helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left'
      });
      map.addOverlay(helpTooltip);
    }

    function createMeasureTooltip() {
      if (measureTooltipElement) {
        measureTooltipElement.parentNode.removeChild(measureTooltipElement);
      }
      measureTooltipElement = document.createElement('div');
      measureTooltipElement.className = 'tooltip tooltip-measure';
      measureTooltip = new Overlay({
        element: measureTooltipElement,
        offset: [0, -15],
        positioning: 'bottom-center'
      });
      map.addOverlay(measureTooltip);
    }
    // 量测调用
    addInteraction();
  }
}

The above code official network reconfiguration example, may have many measurements.
If only we want to make a measurement at drawendadding event

map.un('pointermove', pointerMoveHandler);
map.removeInteraction(draw);
helpTooltipElement.classList.add('hidden');

Changed

draw.on('drawend',
        function () {
          measureTooltipElement.className = 'tooltip tooltip-static';
          measureTooltip.setOffset([0, -7]);
          // unset sketch
          sketch = null;
          // unset tooltip so that a new one can be created
          measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
          map.un('pointermove', pointerMoveHandler);
          map.removeInteraction(draw);
          helpTooltipElement.classList.add('hidden');
        }, this);
    }

It can be.

transfer

Then directly

import Measure from "./Measure";

...
 Measure.measure(this.map, type);
...

You can call it, typeis LineStringwhen the distance measurement, areawhen the measurement area

Link: https: //www.jianshu.com/p/f00da34bb4da