Labeling the length of each side of polygon openlayers 3

how to label each side of a polygon with the length of the side?

I try this code: http://jorix.github.io/OL-DynamicMeasure/examples/measure-dynamic.html

Note: If leave "Segments to display" to blank then to see all segments length.

but this code in openlayers 2. can anybody convert this to openlayers 3?

Solution

OpenLayers 3 does not have a built in Measure control, but you can do your own as in the example https://openlayers.org/en/v3.20.1/examples/measure.html. It is easier to display labels using a vector style than with overlays used in that example, especially if you want to break the line into segments. OpenLayers 3 had limited text styling ability, with version 4 or above you can specify a background fill to make them look very much like the overlays, but this code is OpenLayers 3:

<!DOCTYPE html>
<html>
  <head>
    <title>Measure</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      #map {
        position: relative;
      }
      #form {
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    </style>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map">
      <form id ="form" class="form-inline">
        <label>Measurement type &nbsp;</label>
          <select id="type">
            <option value="LineString">Segments (LineString)</option>
            <option value="Polygon">Sides (Polygon)</option>
          </select>
      </form>
    </div>
    <script>

      var style = new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
          color: 'rgba(0, 0, 0, 0.5)',
          lineDash: [10, 10],
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 5,
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.7)'
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          })
        })
      });

      var labelStyle = new ol.style.Style({
        text: new ol.style.Text({
          font: '14px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: 'rgba(0, 0, 0, 1)'
          }),
          stroke: new ol.style.Stroke({
            color: 'rgba(255, 255, 255, 1)',
            width: 3
          })
        })
      });

      var labelStyleCache = [];

      var wgs84Sphere = new ol.Sphere(6378137);

      var formatLength = function(line) {
        var length;
        var coordinates = line.getCoordinates();
        length = 0;
        var sourceProj = map.getView().getProjection();
        for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
          var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
          var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
          length += wgs84Sphere.haversineDistance(c1, c2);
        }
        var output;
        if (length > 100) {
          output = (Math.round(length / 1000 * 100) / 100) +
              ' ' + 'km';
        } else {
          output = (Math.round(length * 100) / 100) +
              ' ' + 'm';
        }
        return output;
      };

      var styleFunction = function (feature, drawType) {
        var styles = [style];
        var geometry = feature.getGeometry();
        var type = geometry.getType();
        var lineString;
        if (!drawType || drawType === type) {
          if (type === 'Polygon') {
            lineString = new ol.geom.LineString(geometry.getCoordinates()[0]);
          } else if (type === 'LineString') {
            lineString = geometry;
          }
        }
        if (lineString) {
          var count = 0;
          lineString.forEachSegment(function(a, b) {
            var segment = new ol.geom.LineString([a, b]);
            var label = formatLength(segment);
            if (labelStyleCache.length - 1 < count) {
              labelStyleCache.push(labelStyle.clone());
            }
            labelStyleCache[count].setGeometry(segment);
            labelStyleCache[count].getText().setText(label);
            styles.push(labelStyleCache[count]);
            count++;
          });
        }
        return styles;
      };

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      var source = new ol.source.Vector();

      var vector = new ol.layer.Vector({
        source: source,
        style: function(feature) {
          return styleFunction(feature);
        }
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [-11000000, 4600000],
          zoom: 15
        })
      });

      var typeSelect = document.getElementById('type');

      var draw; // global so we can remove it later

      function addInteraction() {
        var drawType = typeSelect.value;
        draw = new ol.interaction.Draw({
          source: source,
          type: drawType,
          style: function (feature) {
            return styleFunction(feature, drawType)
          }
        });
        map.addInteraction(draw);
      }

      typeSelect.onchange = function () {
        map.removeInteraction(draw);
        addInteraction();
      };

      addInteraction();

    </script>
  </body>
</html>