Openlayers 要素样式 zIndex

Question

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

我似乎无法让 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 事件处理程序以绘制标记 over/after 动画。

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...

Openlayers 要素样式 zIndex

Openlayers Feature Style zIndex

javascript

openlayers-3