Блог

Я хочу плавно изобразить переход моей функции точки 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]) amp;amp; (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 во время анимации.
Есть идеи?

Установка пустого стиля при запуске и сброс исходного по завершении работает с примером 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]) amp;amp; (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();
        }
    }