Openlayers 3-绘制后修改多边形

Question

I am trying to make a polygon editable after it is drawn with ol.interaction.Draw.
When I instantiate ol.interaction.Modify I get a "b.attachEvent is not a function" error.
This is the code:

drawPolygon.on("drawend",function(p)
{
    setTimeout(function()
    {
        modifyPoligon = new ol.interaction.Modify({
            features: vectorSource.getFeatures()
        });
    },200);
}

I also use a timeout because in the drawend call the Feature is still not in the layer, is there a better way to get a callback after the feature is drawn and on the layer?

Answer 1

Not sure if suits your case but here's a fiddle with a similar approach: https://jsfiddle.net/ko822xjw/

// Create a draw interaction and add it to the map:
drawInteraction = new ol.interaction.Draw({ source:vectorSource, type:"Polygon" });
map.addInteraction(drawInteraction);
// set listener on "drawend":
drawInteraction.on('drawend', function(e) {
  // get drawn feature:
  var feature = e.feature;
  // remove draw interaction:
  map.removeInteraction(drawInteraction);
  // Create a select interaction and add it to the map:
  selectInteraction = new ol.interaction.Select();
  map.addInteraction(selectInteraction);
  // select feature:
  selectInteraction.getFeatures().push(feature);
  // do something after drawing (e.g. saving):
  // ...
  // Create a modify interaction and add to the map:
  modifyInteraction = new ol.interaction.Modify({ features: selectInteraction.getFeatures() });
  map.addInteraction(modifyInteraction);
  // set listener on "modifyend":
  modifyInteraction.on('modifyend', function(evt) {
    // get features:
    var collection = evt.features;
    // There's only one feature, so get the first and only one:
    var featureClone = collection.item(0).clone();        
    // do something after modifying (e.g. saving):
    // ...
  });        
});

Answer 2

It could be as simple as:

var
    features = new ol.Collection(),
    modify = new ol.interaction.Modify({
        features: features
    }),
    vectorSource = new ol.source.Vector({
        features: features
    }),
    vectorLayer = new ol.layer.Vector({
        source: vectorSource
    }),
    map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.MapQuest({layer: 'osm'})
            }),
            vectorLayer
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    }),
    drawPolygon = new ol.interaction.Draw({
        features: features,
        type: 'Polygon'
    })
;
map.addInteraction(modify);
map.addInteraction(drawPolygon);

http://jsfiddle.net/jonataswalker/r2g1atty/