OpenLayers 3 How to register Feature Modified event as "featuremodified" in OpenLayer 2

Question

I need to implement Undo / Redo using OpenLayers 3 editing (as shown in http://dev.openlayers.org/examples/modify-feature.html for OpenLayers 2).

To track changes in the geometry of objects, I have to control the memory stack, which will contain the modified geometric definitions of functions when interacting with the user. I know that OpenLayers 3 provides observable objects. Therefore, for changes, you can observe ol.Feature or ol.Feature.getGeometry() , but I'm looking for explicit events emitted by ol.interaction.Modify that should notify me when the interaction starts or ends the editing operation of the vector (just like "beforefeaturemodified" and "featuremodified" events in OpenLayers 2).

A handler that observes the observed geometry or function changes can be used for this purpose, but it is too expensive because the geometry of the function to be changed changes with every pixel movement.

I went through the official documentation in OpenLayers 3, but could not find the various events provided by OpenLayers 2. In most cases, the documentation only mentions a change event. I wonder if such events are not considerations for the Openlayer 3 architecture. If so, any suggestions, how can I extend the existing ol.interaction.Modify to include custom events? thanks.

Answer 1

Starting with OpenLayers 3.7.0, ol.interaction.Modify emits modifystart and modifyend . Documentation: http://openlayers.org/en/v3.7.0/apidoc/ol.ModifyEvent.html

An example that randomly makes a decision after each modification, whether it should be saved or changed ( http://jsfiddle.net/rbha7f83/1/ ):

 var select = new ol.interaction.Select({ style: overlayStyle }); // The modify interaction does not listen to geometry change events. // Changing the feature coordinates will make the modify interaction // unaware of the actual feature coordinates. // A possible fix: Maintain a collection used by Modify, so we can reload // the features manually. This collection will always contain the same // features as the select interaction. var selectSource = new ol.Collection(); select.on('select', function (evt) { evt.selected.forEach(function (feature) { selectSource.push(feature); }); evt.deselected.forEach(function (feature) { selectSource.remove(feature); }); }); var modify = new ol.interaction.Modify({ features: selectSource, // use our custom collection style: overlayStyle }); var map = new ol.Map({ interactions: ol.interaction.defaults().extend([select, modify]), layers: [layer], target: 'map', view: new ol.View({ center: [0, 1000000], zoom: 2 }) }); var originalCoordinates = {}; modify.on('modifystart', function (evt) { evt.features.forEach(function (feature) { originalCoordinates[feature] = feature.getGeometry().getCoordinates(); }); }); modify.on('modifyend', function (evt) { evt.features.forEach(function (feature) { if (feature in originalCoordinates && Math.random() > 0.5) { feature.getGeometry().setCoordinates( originalCoordinates[feature] ); delete originalCoordinates[feature]; // remove and re-add the feature to make Modify reload it geometry selectSource.remove(feature); selectSource.push(feature); } }); }) 

Note that events are generated before and after each interaction. By dragging a vertex and then clicking on a vertex to delete it (both on the same function), two modifystart and modifyend events are modifyend .