在位置更新之间对 GPS 点要素进行动画处理

Question

我想平滑地描述我的 GPS 标记点特征在位置更新之间的过渡。我以"自定义动画"示例为方向：https://openlayers.org/en/latest/examples/feature-animation.html 并动画几何体而不是样式。

这非常有效。唯一的问题："原始"GPS标记位置功能在动画过程中仍然可见。因此，在动画运行时，我有两个标记：一个在旧位置，一个在动画到新位置...... 我尝试在动画之前将原始 GPS 标记的不透明度设置为 0，但我怀疑，图像在后期合成时已经"合成"了......

这是我所做的：

function flash(feature) {
var start = new Date().getTime();
if ((oldGPSGeometry === undefined) || (feature.getGeometry() === undefined))
return;
var oldCoordinates = oldGPSGeometry.getFirstCoordinate();
var newCoordinates = feature.getGeometry().getFirstCoordinate();
if ((oldCoordinates[0] == newCoordinates[0]) && (oldCoordinates[1] == newCoordinates[1]))
return;
var featureStyle = feature.getStyle().clone();
var listenerKey = map.on('postcompose', animate);
function animate(event) {
var vectorContext = event.vectorContext;
var frameState = event.frameState;
var elapsed = frameState.time - start;
var elapsedRatio = elapsed / animationDuration;
var curCoor = [elapsedRatio * (newCoordinates[0] - oldCoordinates[0]) + oldCoordinates[0], elapsedRatio * (newCoordinates[1] - oldCoordinates[1]) + oldCoordinates[1]];
var flashGeom = new ol.geom.Point(curCoor);
vectorContext.setStyle(featureStyle);
vectorContext.drawGeometry(flashGeom);
if (elapsed > animationDuration) {
ol.Observable.unByKey(listenerKey);
return;
}
map.render();
}
}

我想在动画过程中"隐藏"原始GPS点功能。 有什么想法吗？

Answer 1

在开始时设置空样式并在完成时重置原始样式适用于 OpenLayers 示例

function flash(feature) {
var start = new Date().getTime();
if ((oldGPSGeometry === undefined) || (feature.getGeometry() === undefined))
return;
var oldCoordinates = oldGPSGeometry.getFirstCoordinate();
var newCoordinates = feature.getGeometry().getFirstCoordinate();
if ((oldCoordinates[0] == newCoordinates[0]) && (oldCoordinates[1] == newCoordinates[1]))
return;
var featureStyle = feature.getStyle();
feature.setStyle([]);
var listenerKey = map.on('postcompose', animate);
function animate(event) {
var vectorContext = event.vectorContext;
var frameState = event.frameState;
var elapsed = frameState.time - start;
var elapsedRatio = elapsed / animationDuration;
var curCoor = [elapsedRatio * (newCoordinates[0] - oldCoordinates[0]) + oldCoordinates[0], elapsedRatio * (newCoordinates[1] - oldCoordinates[1]) + oldCoordinates[1]];
var flashGeom = new ol.geom.Point(curCoor);
vectorContext.setStyle(featureStyle);
vectorContext.drawGeometry(flashGeom);
if (elapsed > animationDuration) {
ol.Observable.unByKey(listenerKey);
feature.setStyle(featureStyle);
return;
}
map.render();
}
}