Javascript 开放层3动画

我想在Ol3中设置一个标记的动画。我用的是Ol的

动画工作，但有一个小错误，我不知道如何修复它

//main animating loop
            var moveFeature = function(event) {

                var vectorContext = event.vectorContext;

                var frameState = event.frameState;

                if (animating) {

                    var elapsedTime = frameState.time - now;

                    var now1 = new Date().getTime();

                    if((now1 - lastTime) > 100){            
                        // stop if end reached
                        if(curIndex >= coordinates.length){

                             stopAnimation(true);
                             requestData(true);
                            // console.log(" end ");
                             return;
                        }

                        var newPoint = coordinates[curIndex];
                        var lastP = newPoint;
                        if(curIndex>=1)
                            lastP = coordinates[curIndex-1];

                        if(newPoint !== null & typeof newPoint != " undefined "){
                            curPoint = ol.proj.fromLonLat(newPoint);
                            lastCourse = course;
                            // calculate azimuth between two coordinates
                            course = calcBearing(lastP,newPoint);
                            lastTime = now1;
                        }
                        curIndex++;
                        lastTime = now1;
                    }

                    //every time render marker position ?? needed ? or only when new one
                    geoMarker.getGeometry().setCoordinates(curPoint);
                    //styles.geoMarker.getImage().setRotation(course);  //rotates the feature
                    debugger;
                    lastCourse = course;
                    vectorContext.drawFeature(geoMarker, styles.geoMarker);

                    // do we need follow the bus due to rendering out of current extend =
                    calcExtend();
                }
                    // tell OL3 to continue the postcompose animation
                    map.render();

            };

我用vectorContext.drawFeature（geoMarker，styles.geoMarker）绘制marger的新位置

每次绘制新位置时，都会新生成矢量层。我不知道为什么

var vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [geoMarker]
                    //features: [pointFeature]
                }),

                style: function(feature) {
                    // hide geoMarker if animation is active
                    if (animating && feature.get('type') === 'geoMarker') {

                    // TODOBug
                        return styles[feature.get('type')];

                    }

                    return styles[feature.get('type')];

                }
            });

通过上面的例子，我得到了下面的问题。如果单击地图，标记将重复，一个标记将保持在旧位置，另一个标记将向前移动。这是个问题

当我像这样改变矢量层的代码时

var vectorLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [geoMarker]
                    //features: [pointFeature]
                }),

                style: function(feature) {
                    // hide geoMarker if animation is active
                    if (animating && feature.get('type') === 'geoMarker') {
                    debugger;
                    console.log("return null")

                    // TODOBug


                        return null;

                    }

                    return styles[feature.get('type')];

                }
            });

重复标记的问题已解决，但当动画正在进行时，标记不可单击

问题是：如何实现标记不重复，并且在动画制作时可单击