How to drag features in Open Layers 3?

Question

In the OL3 examples I can drag objects and drop on the map, but I want to move/resize/rotate things that are already on the map like ol.geom.Point and other ol.geom objects. What is the OL3 way do do this?

Example in OL2:

OpenLayers.Control.DragFeature(layer)

Very good question. It doesn't seem to have been implemented yet. — John Powell, Jul 08 '14 at 08:57

score 11 · Answer 1 · edited Apr 09 '18 at 06:45

11

Not sure why the example on OL3 website is so complicated. Dragging vector objects can be easily achieved using new ol.interaction.Modify.

Here is a simpler working example: jsFiddle

In short, if you marker was:

var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));

You can define modify interaction as :

var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([pointFeature]),
    style: null
});

map.addInteraction(dragInteraction);

You can then get a event for getting the new location of marker after drag like so:

pointFeature.on('change',function(){
            console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
},pointFeature);

edited Apr 09 '18 at 06:45

Matthew

1,630
1
14
19

answered Aug 18 '15 at 20:56

Shaunak

17,377
5
53
84

yes and it seams the translate interaction works but slightly different there is one of them that steal works on version 4 too. http://tsauerwein.github.io/ol3/animation-flights/examples/translate-features.html – MSS Feb 13 '18 at 06:21
Works perfectly! Great job. Thank you – Oscar R Aug 29 '19 at 10:00

score -1 · Answer 2 · answered Jul 21 '14 at 14:32

-1

Take a look at the modify interaction (example). Though rotation is not yet supported.

answered Jul 21 '14 at 14:32

tsauerwein

5,841
3
36
49

MSS · Answer 3 · 2018-02-16T14:20:44.603

I have create a simple lib that add drag interaction to openlayers 4 by slightly changing this official example: https://openlayers.org/en/latest/examples/custom-interactions.htm

you can find the lib here : https://gist.github.com/kingofnull/0ad644be69d8dd43c05721022ca5c3a5

and you should simply add it this way:

var map = new ol.Map({
  interactions: ol.interaction.defaults().extend([new ol.interaction.Drag(),])
});

Update

I test the translate and it works in openlayer 4 and there is no need for a custom interaction. keep it in mind if you going to combine it with modify interaction you should add it before modify. here is my final code:

var map = new ol.Map({...});
var featureDrager = new ol.interaction.Translate();
var modify = new ol.interaction.Modify({...});
map.addInteraction(featureDrager);
map.addInteraction(modify);

How to drag features in Open Layers 3?

3 Answers3

Update