4

My problem seems simple but I cannot find any questions that successfully solve it. I want to draw a circle using ol.interaction.Draw, and access the feature that is created immediately.

My code as of now is:

var radiusSelectInteraction = new ol.interaction.Draw({
    source: circleLayer.getSource(),
    type: 'Circle',
    features: circleFeatures
});

radiusSelectInteraction.on('drawend', function () {
    circleFeatures.forEach(function(feature) {
        ....
    });
});

My problem with this is that it doesn't give me the feature that is currently being drawn. If I don't clear the vector, it will show the first circle on the drawend event of the second one I draw. I only plan on allowing 1 circle at a time so I need to access the feature on end of drawing or on end of feature add.

I tried something like this instead of drawend:

radiusSelectInteraction.on('drawstart', function () {
    circleLayer.getSource().once('addFeature', handleAddFeature);
});

function handleAddFeature(evt) {
    var feature = evt.feature;
    ....
}

but it was never triggering the handleAddFeature event like it was supposed to. Did I do it wrong or is there a better way to achieve this?

3

Best solution I've found so far is to use the current feature embedded in the event:

var radiusSelectInteraction = new ol.interaction.Draw({
    source: circleLayer.getSource(),
    type: 'Circle',
    features: circleFeatures
});

radiusSelectInteraction.on('drawend', function (event) {
    var feature = event.feature;
    var features = circleLayer.getSource().getFeatures();
    features = features.concat(feature);
    features.forEach(function() {
        ....
    });
});

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.