Openlayers 特征样式 zIndex

Question

我有一个圆圈，上面有一个动画，这里有一个快速破解的 jsFiddle 来演示。

http://jsfiddle.net/qpLza4a0/

我似乎无法让 zIndex 属性在圆圈上工作（不是圆圈动画），看起来动画在圆圈的顶部。

我应该将zIndex 属性放在哪里才能让圆圈位于顶部？

Answer 1

无论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());

设置不受干扰的标记样式并重新绘制特征几何。

见this jsFiddle...