How can i move a lineString in OpenLayer3?

Question

I have to create buttons that enable me to move and rotate the my lineString.

This is my code:

var raster = new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'sat'})});
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
var vector= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [lineFeature]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.95,
    })),
    stroke: new ol.style.Stroke({
      width: 3,
      color: [255, 0, 0, 1]
    }),
    fill: new ol.style.Fill({
      color: [0, 0, 255, 0.6]
    })
  })
})
var map = new ol.Map({
 layers: [raster,vector],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});

I have to create 4 buttons that allow me to move the lineString in the 4 direction , how can i do this?

Answer 1

You can change the geometry of your line fetaures depending on the type of move. And do the same for the rotation.

here is the html to do so:

<div  id="map"></div>
<div>
 <button id="movemeup" >move up</button> 
 <button id="movemedown">move down</button>
 <button id="movemeright">move right</button>
 <button id="movemeleft">move left</button>
 <button id="rotate">rotate</button>
</div>

and your javascript (note that I use var stepMove = 1000000; which express how many meters to move) . For the rotation I was inspired from this

   var raster = new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'sat'})});
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]])
);
var vector= new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [lineFeature]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      opacity: 0.95,
    })),
    stroke: new ol.style.Stroke({
      width: 3,
      color: [255, 0, 0, 1]
    }),
    fill: new ol.style.Fill({
      color: [0, 0, 255, 0.6]
    })
  })
});

var map = new ol.Map({
 layers: [raster,vector],
  target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
 })
});


var stepMove = 1000000;
document.getElementById('movemeup').onclick = function (){
    moveit('up')
};
document.getElementById('movemedown').onclick = function (){
    moveit('down')
};
document.getElementById('movemeright').onclick = function (){
    moveit('right')
};
document.getElementById('movemeleft').onclick = function (){
    moveit('left')
};

document.getElementById('rotate').onclick = function (){
    rotateFeat();
};


function moveit(dir){

var lineCoords = lineFeature.getGeometry().getCoordinates();
var newLineCoords = new Array();
if (dir === 'up'){
    for(var i=0;i<lineCoords.length;i++){
    newLineCoords.push([lineCoords[i][0],lineCoords[i][1]+stepMove]);
    }
} else if (dir === 'down'){
    for(var i=0;i<lineCoords.length;i++){
    newLineCoords.push([lineCoords[i][0],lineCoords[i][1]-stepMove]);
    }
} else if (dir === 'right'){
    for(var i=0;i<lineCoords.length;i++){
    newLineCoords.push([lineCoords[i][0]+stepMove,lineCoords[i][1]]);
    }
} else if (dir === 'left'){
    for(var i=0;i<lineCoords.length;i++){
    newLineCoords.push([lineCoords[i][0]-stepMove,lineCoords[i][1]]);
    }
}
console.log("newLineCoords",newLineCoords);
var lineGeom = lineFeature.getGeometry();
var newGeom = new ol.geom.LineString(newLineCoords);
lineFeature.setGeometry( newGeom );                     
}

function rotateFeat(){
var lineGeom = lineFeature.getGeometry();
var lineExtent = lineGeom.getExtent();
var center = ol.extent.getCenter(lineExtent);
console.log("center",center);
lineGeom.applyTransform(rotateTransform(45, center[0], center[1]));
}


var getRotation = function(dx, dy) {
    var rot = 0;

    if (dx == 0 && dy == 0) return 0;

    if (dy == 0)
        rot = (dx > 0) ? 0 : Math.PI;
    else if (dx == 0)
        rot = (dy > 0) ? 0.5 * Math.PI : 1.5 * Math.PI;
    else {
        var rot = Math.atan(dy/dx);
        if (dx < 0 && dy > 0) rot += Math.PI;
        if (dx < 0 && dy < 0) rot += Math.PI;
        if (dx > 0 && dy < 0) rot += 2 * Math.PI;
    }
    return rot;
};
var rotateTransform = function (deg, x, y) {
    return function(inArr, outArr, dim) {
        for (var i = 0; i < inArr.length; i+=dim) {
            var ptx     = inArr[i];
            var pty     = inArr[i+1];
            var rot     = getRotation(ptx - x, pty - y);
            var rad     = Math.sqrt(Math.pow(ptx - x, 2) + Math.pow(pty - y, 2));
            var newRot  = rot + deg / 180 * Math.PI;
            outArr[i]   = (x + rad * Math.cos(newRot));
            outArr[i+1] = (y + rad * Math.sin(newRot));
        }
        return outArr;
    };
};

end a working fiddle here