1

I created two external controls for my OpenLayers 3 map: Rotate Left and Rotate Right. I already stored the last dragged/clicked feature in a global variable, yet I'm struggling to retrieve the actual rotation of the feature to "add" or "substract" degrees to it.

Here is what the code of my "Rotate Right" button looks like:

var evt = lastEvent;
if (evt == "") {
    return false;
} else {
    var coordX = evt.coordinate[0];
    var coordY = evt.coordinate[1];

    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            return feature;
        });

    var layer = map.forEachFeatureAtPixel(evt.pixel,
        function(feature, layer) {
            return layer;
        });

    // This is where I need to get the feature's rotation value.
    var rotation = Math.random() * 10 + 1;
    var origin = new ol.geom.Point(coordX, coordY);
    feature.setStyle(new ol.style.Style({
        image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
            anchor: [0.5, 0.5],
            rotation: rotation,
            anchorXUnits: 'fraction',
            anchorYUnits: 'fraction',
            src: 'https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-128.png'
        }))
    }));
}

I've been browsing through the API documentation and the examples but I can't seem to find a way to access the feature's rotation value once it's already drawn on the layer.

1

I don't if the reason that you couldn't find anything in the documentation, was because you didn't un-clicked the "Stable only" in the upper right corner of the API documentation.

Try this:

var _feature; // your feature
var _style = _feature.getStyle();
var _imagestyle = _style.getImage();
var rotation = _imagestyle.getRotation();

I haven't testet it, but give it a try.

  • You're right, I was only browsing the stable version of the API. I've concatenated your code in your simple line: YourFeatureVariable.getStyle().getImage().getRotation() – Jeff Noel Jan 16 '15 at 16:38
0

I found an alternate way for those who don't want to run unstable code.

Since it's possible to store whatever data we want in the feature (ie.: the name property), why not add the rotation value as a property too? This worked for me:

Object initialization

/* When you create the ol.Feature object, add some properties to store the rotation.

var iconFeature = new ol.Feature({
     geometry: new ol.geom.Point([400, 500]),
     name: 'House 1',
     lotNumber: 54872142,
     rotationValue: 0, /* This one right here */
     opacityValue: 0.5 /* Added this one too, you get the idea */
});

Value modification

var feature = map.forEachFeatureAtPixel(evt.pixel,

function(feature, layer) {
        return feature;
    });
var layer = map.forEachFeatureAtPixel(evt.pixel,

    function(feature, layer) {
        return layer;
    });

/* Magic happens here */
var rotation = feature['o']['rotationValue'] + 0.1;

var origin = new ol.geom.Point(coordX, coordY);
var opacity = feature['o']['opacityValue'];
feature['o']['rotationValue'] = rotation;
feature.setStyle(new ol.style.Style({
    image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 0.5],
        rotation: rotation,
        opacity: opacity,
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: 'https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-128.png'
    }))
}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.