Openlayers Feature Style 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); 

ポストコンポジションイベントハンドラを変更して、アニメーションの上または下にマーカーを描画しました。

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