How to rotate feature in openlayer 3?

Question

Need to find a way to rotate a feature in openlayer3 while editing a feature.

Like in openlayer2 https://github.com/openlayers/openlayers/blob/master/examples/rotate-features.html

function rotateFeature(feature, angle, origin) {
        feature.geometry.rotate(angle, origin);
        feature.layer.drawFeature(feature);

}

Answer 1

Basically, all you have to do is to call the rotate function for you polygon, as shown in the code below:

    var vectorSource = new ol.source.Vector({});
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'http://localhost/map_cache.php?z={z}&x={x}&y={y}'
          })
        }),
        new ol.layer.Vector({
            source: vectorSource
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });
    var marker = new ol.geom.Polygon([[
        ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'),
        ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
        ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')
    ]]);
    var featureMarker = new ol.Feature({
        name: 'Marker',
        geometry: marker,
    });
    vectorSource.addFeature(featureMarker);

    //Here is the code for rotating:
    marker.rotate(Math.PI / 2.0, ol.proj.transform([-16,-22], 'EPSG:4326', 'EPSG:3857'));
    //////////////////////////////////////////////////
    map.on('click', function(evt)
    {
        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        console.log(lonlat);
    });

I have created an example to rotate a feature: Gist with code

Answer 2

The rotate feature is built in and turned on by default. You can rotate your map by pressing alt + shift and moving your mouse on the map. A button should appear to revert back the rotation back to 0 degrees.

http://openlayers.org/en/v3.9.0/apidoc/ol.control.html