[GIS] Taking draw features as GeoJSON after completed drawing

openlayers

this is source code which ı have copied from openlayers documents.
https://openlayers.org/en/latest/examples/draw-features.html

     <!DOCTYPE html>
    <html>
      <head>
        <title>Draw Features</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
        <!-- 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/v4.5.0/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <form class="form-inline">
          <label>Geometry type &nbsp;</label>
          <select id="type">
            <option value="Point">Point</option>
            <option value="LineString">LineString</option>
            <option value="Polygon">Polygon</option>
            <option value="Circle">Circle</option>
            <option value="None">None</option>
          </select>
        </form>
        <script>
          var raster = new ol.layer.Tile({
            source: new ol.source.OSM()
          });

          var source = new ol.source.Vector({wrapX: false});

          var vector = new ol.layer.Vector({
            source: source
          });

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

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

          var draw; // global so we can remove it later
          function addInteraction() {
            var value = typeSelect.value;
            if (value !== 'None') {
              draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
              });
              map.addInteraction(draw);
            }
          }


          /**
           * Handle change event.
           */
          typeSelect.onchange = function() {
            map.removeInteraction(draw);
            addInteraction();
          };

          addInteraction();
        </script>
      </body>
    </html>

draw.on("drawend",function(){

  //How to catch draw features as Geojson in this method.


});

How do I take draw features as GeoJson after completed drawing?

Best Answer

You have the feature drawn within the event of the 'drawend' caption. Check the following snip:

draw.on("drawend",function(e){
      var writer = new ol.format.GeoJSON();
      //pass the feature as an array
      var geojsonStr = writer.writeFeatures([e.feature]);
      alert(geojsonStr)
    });

UPDATE

Dont forget to asign the drawend event within the addInteraction function. Otherwise it wont work as each time you change the geometry type you create a brand new interaction with no event asigned to it. So your code should be :

var draw; // global so we can remove it later
    function addInteraction() {
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source: source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
            });
            map.addInteraction(draw);
           draw.on("drawend",function(e){
           var writer = new ol.format.GeoJSON();
           //pass the feature as an array
           var geojsonStr = writer.writeFeatures([e.feature]);
           alert(geojsonStr)
    });
   }

You may also consider to remove the existing interaction before adding to new one. I am not sure whether you add multiple draw interactions each time you change the geometry type. This is a tip though and it wouldnt change your functionality.

Related Question