Javascript Openlayers功能样式zIndex

我有一个圆圈，上面运行着一个动画，下面是一个快速黑客攻击的JSFIDLE来演示

我似乎无法使

zIndex

属性在圆上工作（不是圆动画），似乎动画位于圆的顶部

---

我应该将

zIndex

属性放在哪里才能将圆放在顶部？

无论zIndex是什么，动画总是在标记放置之后运行。因此，需要在动画之后绘制标记。我存储了标记样式，以便事件处理程序可以使用它

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);

并更改了postcompose事件处理程序，以在动画上方/之后绘制标记

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();
        });
    }

两条新线路：

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

设置未受干扰的标记样式并重新绘制要素几何图形

---

请参见……

Hi@peter，谢谢您的回复。虽然这很好，但有一个小问题，就是这个圆在JSFIDLE上画了两次。这有可能吗？我只是在摆弄半径属性，它工作得很好！：-）谢谢