6

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>
13

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());
});
  • Just digging up an old thread, how would you display the coordinates from the array? – cmca Sep 2 '16 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.