Openlayers Feature Style zIndex

Question

Ich habe einen Kreis, auf dem eine Animation läuft, hier ist ein schnell gehacktes jsFiddle zu demonstrieren.

http://jsfiddle.net/qpLza4a0/

ich nicht die zIndex Eigenschaft arbeitet auf dem Kreis scheinen zu bekommen (nicht die Kreis-Animation), scheint es, dass die Animation auf der Oberseite des Kreises ist.

Wo sollte ich die zIndex Eigenschaft setzen, um den Kreis oben zu bekommen?

Answer 1

Die Animation wird immer nach dem Platzieren des Markers unabhängig vom zIndex ausgeführt. Sie müssen also den Marker nach der Animation zeichnen. Ich habe den Markierungsstil gespeichert, damit der Event-Handler ihn verwenden kann.

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

Und änderte den Postcompose-Event-Handler, um den Marker über/nach der Animation zu zeichnen.

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

Zwei neue Linien:

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

stellen Sie den ungestörten Marker-Stil und die Feature-Geometrie neu zu zeichnen.

Siehe this jsFiddle ...