ol4 + ol-ext проблема с ol.featureAnimation.Zoom и ol.layer.AnimatedCluster

Question

Когда я нажал на кластер, функции не отображаются правильно, я попытался остановить анимацию, но она не сработала. Есть ли другой способ показать анимацию для каждой функции?

// Cluster Source
clusterSource = new ol.source.Cluster({
    distance: distanceFt,
    source: new ol.source.Vector()
});
// Animated cluster layer
clusterLayer = new ol.layer.AnimatedCluster({
    name: 'Cluster',
    source: clusterSource,
    animationDuration: 700, //$("#animatecluster").prop('checked') ? 700 : 0,
    // Cluster style
    style: getStyle
});

// Transparent style to handle click on animation
    var transparent = [0, 0, 0, 0.01];
var filltransparent = [0, 0, 0, 0];
var transparentStyle =
[new ol.style.Style(
        {
            image: new ol.style.RegularShape({ radius: 10, radius2: 5, points: 5, fill: new ol.style.Fill({ color: transparent }) }),
            stroke: new ol.style.Stroke({ color: transparent, width: 2 }),
            fill: new ol.style.Fill({ color: filltransparent })
        })
];
// animation
var animacion = new ol.featureAnimation.Zoom({
    fade: ol.easing.easeOut,
    duration: 2000,
    easing: ol.easing["easeOut"],
    repeat: 100,
    hiddenStyle: transparentStyle
});

ft_animados[idx] = vector_anim.animateFeature(anim_ft[i], animacion(anim_ft[i]));

Answer 1

У меня есть две функции:

function ft_animacion(f) {
    //var style = f.getStyle();
    var efecto = new ol.style.Style({
        image: new ol.style["Circle"]({
            radius: 30,
            points: 4,
            stroke: new ol.style.Stroke({ color: 'red', width: 2 })
        })
    });
    f.setStyle(efecto);
    return f;
}

function addFeatures(ffs, centrar) {
    // some code lines
    for (var i = 0; i < ffs.length; i++) {
        features[i] = new ol.Feature();
        features[i].setProperties(ffs[i]);
        var geometry = new ol.geom.Point(transform([parseFloat(ffs[i].lon), parseFloat(ffs[i].lat)]));
        features[i].setGeometry(geometry);
        if (ffs[i].content.ind) {
            if (ffs[i].content.ind.includes("Pendiente")) {
                anim_ft.push(ft_animacion(features[i]));
            }
        }
    }
// some code lines
}

Я решаю свою проблему с помощью feature.clone (). Поэтому отредактируйте строку anim_ft.pu sh (ft_animacion (features [i])) в anim_ft.pu sh (ft_animacion (features [i] .clone () ))

Я не заметил, что когда я использовал функцию ft_animacion, я переписывал стиль функции.