[英]Openlayers Feature Style zIndex
我有一个圆圈,上面有一个动画,这里有一个快速入侵的jsFiddle来演示。
我似乎无法使zIndex
属性在圆上工作(而不是圆形动画),看起来动画位于圆圈的顶部。
我应该在哪里放置zIndex
属性以获得最上面的圆圈?
无论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());
设置未受干扰的标记样式并重绘要素几何。
看到这个jsFiddle ......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.