时间戳

首页 > 解决方案 > ol.featureAnimation.Zoom 和 ol.layer.AnimatedCluster 的 ol4 + ol-ext 问题

plugins - ol.featureAnimation.Zoom 和 ol.layer.AnimatedCluster 的 ol4 + ol-ext 问题

问题描述

当我单击集群时，功能无法正确显示，我尝试停止动画但它不起作用。是否有另一种选择显示每个功能的动画？

// 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]));

标签： pluginsopenlayers

解决方案

我有两个功能：

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.push(ft_animacion(features[i])) 行编辑为 anim_ft.push(ft_animacion(features[i] .clone() ))

我没有注意到当我使用函数 ft_animacion 时，我正在覆盖特征的样式。

推荐阅读