Функция анимации GPS-точек между обновлениями положения

Question

Я хочу плавно изобразить переход моего точечного маркера GPS между обновлениями положения.Я ориентировался на пример «Пользовательская анимация»: https://openlayers.org/en/latest/examples/feature-animation.html и анимировал геометрию вместо стиля.

Это прекрасно работает.Единственная проблема: «оригинальная» функция положения GPS-маркера все еще видна во время анимации.Поэтому, пока анимация запущена, у меня есть два маркера: один в старом месте, другой - в новом положении ... Я пытался установить непрозрачность исходного маркера GPS на 0 до анимации, но я подозреваю, что изображениеуже "составлено" в postcompose ...

Вот что я сделал:

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