Openlayers Feature Style zIndex

Question

I have a circle, which has an animation running on it, here is a quick hacked jsFiddle to demonstrate.

http://jsfiddle.net/qpLza4a0/

I can not seem to get the zIndex property working on the circle (not the circle animation), it appears that the animation is on top of the circle.

Where should I put the zIndex property to get the circle on top?

Answer 1

The animation always runs after the placement of the marker regardless of the zIndex. So you will need to draw the marker after the animation. I stored the marker style so the event-handler can use it.

var mstyle=new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({
      color: "#fff"
    }),
    stroke: new ol.style.Stroke({
      color: "blue",
      width: 2
    }),
  }),
  zIndex: 100
});
marker.setStyle(mstyle);

And changed the postcompose event-handler to draw the marker over/after the animation.

function pulsate(map, color, feature, duration) {
        var start = new Date().getTime();

        var key = map.on('postcompose', function(event) {
            var vectorContext = event.vectorContext;
            var frameState = event.frameState;
            var flashGeom = feature.getGeometry().clone();
            var elapsed = frameState.time - start;
            var elapsedRatio = elapsed / duration;
            var radius = ol.easing.easeOut(elapsedRatio) * 35 + 5;
            var opacity = ol.easing.easeOut(1 - elapsedRatio);
            var fillOpacity = ol.easing.easeOut(0.5 - elapsedRatio)

            vectorContext.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: radius,
                    snapToPixel: false,
                    fill: new ol.style.Fill({
                          color: 'rgba(119, 170, 203, ' + fillOpacity + ')',
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(119, 170, 203, ' + opacity + ')',
                        width: 2 + opacity
                    })
                })
            }));

            vectorContext.drawGeometry(flashGeom);

            // Draw the marker (again)
            vectorContext.setStyle(mstyle);
            vectorContext.drawGeometry(feature.getGeometry());

            if (elapsed > duration) {
                ol.Observable.unByKey(key);
                pulsate(map, color, feature, duration); // recursive function
            }

            map.render();
        });
    }

Two new lines:

    vectorContext.setStyle(mstyle);
    vectorContext.drawGeometry(feature.getGeometry());

set the undisturbed marker-style and redraw the feature geometry.

See this jsFiddle ...