Drag and Drop Feature in Openlayers 3

问题

What is the equivalent for the OpenLayers 2 "OpenLayers.Control.DragFeature" functionality. I need to add an Icon to a map, that is moveable with the mouse. When dropping I need to catch the event. In OpenLayers 2, the described functionality is:

new OpenLayers.Control.DragFeature(this.MarkersLayer, {     
    onComplete: function(feature, pixel) { /* here comes the action after dropping the marker */ }}

Does anyone has an idea how this can be accomplished with OpenLayers 3?

回答1:

OpenLayers 3 now includes an example that show how to implement a "drag feature" interaction. See http://openlayers.org/en/master/examples/drag-features.html.

So, the OpenLayers 3 library still doesn't provide a "drag feature" interaction, but it provides the extension points making it possible to implement such an interaction at the application level.

Note that you will have to use the "master" branch of OpenLayers 3 to implement your own "drag feature" interaction as in the example. The other option is to wait for 3.1.0, which should be out pretty soon.

回答2:

If someone is still interested in an answer to this question, the following code should achieve the requested requirements (cause I struggled with this type of problem for a while):

// Create the icon feature
var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([lng, lat])
});

// Set the style for the icon feature 
iconFeature.setStyle(new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 35],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 1,
        src: markerGraphics
    }))
}));

// Create the vector layer with it's source
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [iconFeature]
    })
});

// Drag and drop feature
var dragInteraction = new ol.interaction.Modify({
    features: new ol.Collection([iconFeature]),
    style: null,
    pixelTolerance: 20
});

// Add the event to the drag and drop feature
dragInteraction.on('modifyend',function(){
    callYourFunction();
},iconFeature);

// Add the vector layer and the refering drag and drop interaction
map.addLayer(vectorLayer);
map.addInteraction(dragInteraction);

Based on the modify event, it is possible to append the listener to the drag and drop interaction instead of the layer/icon feature. With this solution, it is possible to execute a function after the drag of a layer/icon stopped (acts like 'dragend' known from OpenLayers 2).

回答3:

There is none. You also cant draw circles and round polygones either. viva la OL2

来源：https://stackoverflow.com/questions/26347278/drag-and-drop-feature-in-openlayers-3

标签

OpenLayers

openlayers-3