Cannot get drawn polygons and lines in openlayers 3 vector layer

Question

I wrote a code that supposed to get the feature that is just created on a vector layer.

<select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
</select>

//is actually empty    
var sourceVector = new ol.source.Vector({});

layerVector = new ol.layer.Vector({
    id: 'myLayer',
    source: sourceVector,
    style:cStyle // I set a style, I just dont iclude it for brevity
});

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

function addInteraction() {
    draw = new ol.interaction.Draw({
        source: sourceVector,
        type: typeSelect.value
    });
    map.addInteraction(draw);
}

 //when something is selected by the dropdown
 //remove the previous interaction and reset it
typeSelect.onchange = function(e) {
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();

    //when drawing is finished, get coords and print them
    draw.on('drawend',
    function(evt) { 
        var justNowFeature = evt.feature;
        var featureGeom = justNowFeature.getGeometry().getCoordinates();
        console.log("FEATURESGEOJSON  "+featureGeom );
    }
);

This also works for getting the geometry type

var featureGeom = justNowFeature.getGeometry().getType();

And actually all I want to save is the type and the coordinates, so I am fine.

Except, this only works for Points. If I choose Polygon or LineString, it does not print anything in the console, and I dont get any errors, it just not work.

Any solutions?

Thank you

pavlos pavlos · Accepted Answer · 2015-10-30T18:24:32

you need to place 'drawend' event initilisation within the addInteraction function. Check the fiddle here. fiddle here When initialising 'drawend' event no draw interaction exist. Firebug though should inform you that "draw" is undefined

this is your code. I have made some comments in CAPITALS to explain.

<select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
</select>

//is actually empty    
var sourceVector = new ol.source.Vector({});

layerVector = new ol.layer.Vector({
    id: 'myLayer',
    source: sourceVector,
    style:cStyle // I set a style, I just dont iclude it for brevity
});

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

function addInteraction() {
    draw = new ol.interaction.Draw({
        source: sourceVector,
        type: typeSelect.value
    });
    map.addInteraction(draw);
}

 //when something is selected by the dropdown
 //remove the previous interaction and reset it
typeSelect.onchange = function(e) {
    //HERE YOU REMOVE THE INTERCATION AND THUS ALL LISTENERS 
    //ASIGNED TO IT REMOVED
    // SO YOU NEED TO REASIGN THE LISTENERS AS THIS IS A BRAND NEW INTERACTION
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();

    //when drawing is finished, get coords and print them
    //HERE YOU JUST ASIGN THE LISTENER AT STARTUP. 
    //THIS HAPPENS ONCE AND NOT EACH TIME YOU 
   // ADD BACK THE INTERACTION
    draw.on('drawend',
    function(evt) { 
        var justNowFeature = evt.feature;
        var featureGeom = justNowFeature.getGeometry().getCoordinates();
        console.log("FEATURESGEOJSON  "+featureGeom );
    }
);

Cannot get drawn polygons and lines in openlayers 3 vector layer

1 Answers