OpenLayers Coordinates – How to Get Coordinates of Drawn Features in OpenLayers

coordinatesfeaturesopenlayerspolygon

Can someone help in finding coordinates of drawn features? I am using this example OpenLayers website. I need to be able to export drawn objects as set of coordinates.

Posting the code from the resource, although it can be found here.

<!DOCTYPE html>
<html>
  <head>
    <title>Snap Interaction</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.14.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <form id="options-form" automplete="off">
      <div class="radio">
        <label>
          <input type="radio" name="interaction" value="draw" id="draw" checked>
          Draw &nbsp;
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="interaction" value="modify">
          Modify &nbsp;
        </label>
      </div>
      <div class="form-group">
        <label>Draw type &nbsp;</label>
        <select name="draw-type" id="draw-type">
          <option value="Point">Point</option>
          <option value="LineString">LineString</option>
          <option value="Polygon">Polygon</option>
        </select>
      </div>
    </form>
    <script>
      var raster = new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      });

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#ffcc33'
            })
          })
        })
      });

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

      var Modify = {
        init: function() {
          this.select = new ol.interaction.Select();
          map.addInteraction(this.select);

          this.modify = new ol.interaction.Modify({
            features: this.select.getFeatures()
          });
          map.addInteraction(this.modify);

          this.setEvents();
        },
        setEvents: function() {
          var selectedFeatures = this.select.getFeatures();

          this.select.on('change:active', function() {
            selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
          });
        },
        setActive: function(active) {
          this.select.setActive(active);
          this.modify.setActive(active);
        }
      };
      Modify.init();

      var optionsForm = document.getElementById('options-form');

      var Draw = {
        init: function() {
          map.addInteraction(this.Point);
          this.Point.setActive(false);
          map.addInteraction(this.LineString);
          this.LineString.setActive(false);
          map.addInteraction(this.Polygon);
          this.Polygon.setActive(false);
        },
        Point: new ol.interaction.Draw({
          source: vector.getSource(),
          type: /** @type {ol.geom.GeometryType} */ ('Point')
        }),
        LineString: new ol.interaction.Draw({
          source: vector.getSource(),
          type: /** @type {ol.geom.GeometryType} */ ('LineString')
        }),
        Polygon: new ol.interaction.Draw({
          source: vector.getSource(),
          type: /** @type {ol.geom.GeometryType} */ ('Polygon')
        }),
        getActive: function() {
          return this.activeType ? this[this.activeType].getActive() : false;
        },
        setActive: function(active) {
          var type = optionsForm.elements['draw-type'].value;
          if (active) {
            this.activeType && this[this.activeType].setActive(false);
            this[type].setActive(true);
            this.activeType = type;
          } else {
            this.activeType && this[this.activeType].setActive(false);
            this.activeType = null;
          }
        }
      };
      Draw.init();


      /**
       * Let user change the geometry type.
       * @param {Event} e Change event.
       */
      optionsForm.onchange = function(e) {
        var type = e.target.getAttribute('name');
        var value = e.target.value;
        if (type == 'draw-type') {
          Draw.getActive() && Draw.setActive(true);
        } else if (type == 'interaction') {
          if (value == 'modify') {
            Draw.setActive(false);
            Modify.setActive(true);
          } else if (value == 'draw') {
            Draw.setActive(true);
            Modify.setActive(false);
          }
        }
      };

      Draw.setActive(true);
      Modify.setActive(false);

      // The snap interaction must be added after the Modify and Draw interactions
      // in order for its map browser event handlers to be fired first. Its handlers
      // are responsible of doing the snapping.
      var snap = new ol.interaction.Snap({
        source: vector.getSource()
      });
      map.addInteraction(snap);
    </script>
  </body>
</html>

Best Answer

The drawn feature are added to the layer named vector. See draw interactions constructors.

// Get the array of features
var features = vector.getSource().getFeatures();

// Go through this array and get coordinates of their geometry.
features.forEach(function(feature) {
   console.log(feature.getGeometry().getCoordinates());
});
Related Question