打开第3层动画

Question

我想在Ol3中为标记设置动画。我使用了Ol的这个example。

动画有效，但有一点虫子，我不知道如何解决它。

//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的新pos;

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

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

                }
            });

通过上面的这个例子，我在地图上遇到了以下问题。如果单击地图，则标记重复，一个标记停留在旧位置，另一个标记移动为空。这是一个问题。

当我像这样更改vectorlayer的代码时。

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

                }
            });

解决了重复标记的问题，但是当动画处于progess状态时，标记无法点击。

问题是：我如何实现标记不会重复，并且在动画时可点击???