3

Have you an idea of animate function to shake a feature when it's added to the map ?

I've found only this animation from openlayers 3 samples: Animate feature example openlayers 3

1

I think it should suffice to animate the feature yourself. I will try to demonstrate below together with some pseudo-code, since I haven't played around with vector layers on OL3 yet.

Since you have the addFeature event, you can make use of that:

source.on('addfeature', function(e) {
  animateStart(e.feature);
});

Then you can perform a simple animation along the lines of:

var frameCount = 0;
var timeOutHandle = null;
var initialGeometry = null;

function animateStart(_oFeature) {
    initialGeometry = _oFeature.Geometry;    //assuming this exists
    timeOutHandle = window.setInterval(function (feature) {
        if (frameCount==5) {   //assume 5 frames
            window.clearTimeout(timeOutHandle);
            feature.Geometry = initialGeometry;
            frameCount = 0;
            return;
        }
        else {
            //you need the resolution for the animation to be meaningful for any zoom level
            var resolution = map.getView().getResolution();
            if (frameCount % 2 == 0) {
                //move each point in geometry to the west - assume pseudo-code here
                for (var pt in feature.Geometry.Points) {
                    pt[0] -= resolution * 8;    //this 8 can be something that you try and choose
                }
                //maybe refresh/redraw layer?
            }
            else {
                //move each point in geometry to the east - assume pseudo-code here
                for (var pt in feature.Geometry.Points) {
                    pt[0] += resolution * 8;
                }
                //maybe refresh/redraw layer?
            }
            frameCount++;
        }
    } (_oFeature), 100);
}

Again I should emphasize that this is pretty much pseudo-code, but it should point you in the right direction.

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.