Drag and drop multiple selected functions - OpenLayers

Question

I know that I can easily allow the user to select multiple functions / geometries in OpenLayers, but then I want the user to easily drag / move all the selected functions at the same time.

Using the ModifyFeature control ModifyFeature it only moves one function at a time ... is there a way to easily extend this control (or something works) to move all selected objects at that level?

Answer 1

Ok, skip the ModifyFeature control and just connect to the SelectFeature control to track the selected functions, and then use DragControl to control the selected points at the same time.

Example management instance:

 var drag = new OpenLayers.Control.DragFeature(vectors, { onStart: startDrag, onDrag: doDrag, onComplete: endDrag }); var select = new OpenLayers.Control.SelectFeature(vectors, { box: true, multiple: true, onSelect: addSelected, onUnselect: clearSelected }); 

Example event handling functions:

 /* Keep track of the selected features */ function addSelected(feature) { selectedFeatures.push(feature); } /* Clear the list of selected features */ function clearSelected(feature) { selectedFeatures = []; } /* Feature starting to move */ function startDrag(feature, pixel) { lastPixel = pixel; } /* Feature moving */ function doDrag(feature, pixel) { for (f in selectedFeatures) { if (feature != selectedFeatures[f]) { var res = map.getResolution(); selectedFeatures[f].geometry.move(res * (pixel.x - lastPixel.x), res * (lastPixel.y - pixel.y)); vectors.drawFeature(selectedFeatures[f]); } } lastPixel = pixel; } /* Featrue stopped moving */ function endDrag(feature, pixel) { for (f in selectedFeatures) { f.state = OpenLayers.State.UPDATE; } } 

Answer 2

Hm ...

I tried the code above and could not get it to work. Two questions: 1) To move each function, you need to use the starting position of this function and add a “drag and drop vector” from any function that DragControl moves by itself (i.e., the parameter of the toDrag function). 2) Since the native DragFeatures code sets lastPixel = pixel before calling onDrag, calling the move () line will move this function to (0,0).

My code looks something like this:

 var lastPixels; function startDrag(feature, pixel) { // save hash with selected features start position lastPixels = []; for( var f=0; f<wfs.selectedFeatures.length; f++){ lastPixels.push({ fid: layer.selectedFeatures[f].fid, lastPixel: map.getPixelFromLonLat( layer.selectedFeatures[f].geometry.getBounds().getCenterLonLat() ) }); } } function doDrag(feature, pixel) { /* because DragFeatures own handler overwrites dragSelected.lastPixel with pixel before this is called, calculate drag vector from movement of "feature" */ var g = 0; while( lastPixels[g].fid != feature.fid ){ g++; } var lastPixel = lastPixels[g].lastPixel; var currentCenter = map.getPixelFromLonLat( feature.geometry.getBounds().getCenterLonLat() ); var dragVector = { dx: currentCenter.x - lastPixel.x, dy: lastPixel.y - currentCenter.y }; for( var f=0; f<layer.selectedFeatures.length; f++){ if (feature != layer.selectedFeatures[f]) { // get lastpixel of this feature lastPixel = null; var h = 0; while( lastPixels[h].fid != layer.selectedFeatures[f].fid ){ h++; } lastPixel = lastPixels[h].lastPixel; var newPixel = new OpenLayers.Pixel( lastPixel.x + dragVector.dx, lastPixel.y - dragVector.dy ); // move() moves polygon feature so that centre is at location given as parameter layer.selectedFeatures[f].move(newPixel); } } } 

Answer 3

I had a similar problem, and I decided to override it with the DragFeature moveFeature function and placing this.lastPixel = pixel inside the for loop, which applies the transition to all the functions in my layer vector. Until I moved this.lastPixel = pixel inside the loop, all functions except those that were dragged were madly distorted.

  `OpenLayers.Control.DragFeature.prototype.moveFeature = function (pixel) { var res = this.map.getResolution(); for (var i = 0; i < vector.features.length; i++) { var feature = vector.features[i]; feature .geometry.move(res * (pixel.x - this.lastPixel.x), res * (this.lastPixel.y - pixel.y)); this.layer.drawFeature(feature ); this.lastPixel = pixel; } this.onDrag(this.feature, pixel); }; 

`