0

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?

1

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.

  • it only work when ı draw point. Why ? – vahitdurmus Dec 1 '17 at 13:08
  • This is not normal.I just test it and it works fine with any type of geometry. Can you provide your code. – pavlos Dec 1 '17 at 14:28
  • ı have added. please look over. – vahitdurmus Dec 1 '17 at 14:57
  • I have updated my answer. – pavlos Dec 1 '17 at 15:06
  • glad to help my friend – pavlos Dec 1 '17 at 21:27
0
    <!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();

    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);
    });

</script>

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.