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事件处理程序，以在动画上/之后绘制标记。

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

1 个答案: