Question

vue中态势推演，初始化地图为三维模型，点击态势推演按钮后v-if由false变为true，对地图进行destory(),点击创建动画，可以成功，这时候，播放、暂停等功能正常。然后再点击隐藏态势后，v-if变为false。再想进行第二次观看效果----即点击态势显示，这时候点击创建动画后，会报Uncaught (in promise) TypeError: Cannot set property 'startTime' of null错误请问老师这是为什么，既然第一次可以成功，那么第二次为什么会出现错误。

var geoJGSZ = null;
                var geoTFXS = null;
                var geoLJXS = null;
                var geoTFXS2 = null;
                var geoZYSS = null;
                var geoLJZY = null;
                var geoZYSS2 = null;
                var geoJC = null;
                var geoSJ = null;
                var geoLJJL = null;
                var geoJGJL = null;

                var pointsJGSZ = [];
                pointsJGSZ[0] = new Cesium.PlotPoint3D(13.0486416724835, 47.827217402435, 0);
                pointsJGSZ[1] = new Cesium.PlotPoint3D(13.0484530291208, 47.8273069046719, 0);
                pointsJGSZ[2] = new Cesium.PlotPoint3D(13.0498576145008, 47.8282734633643, 0);
                pointsJGSZ[3] = new Cesium.PlotPoint3D(13.0513393769035, 47.8287206684327, 0);
                pointsJGSZ = this.MoveSymbol(pointsJGSZ);
                window.console.log("111--"+this.plottingLayer)
                window.console.log("111--"+this.animationManager)
                this.plottingLayer.createSymbol(22, 1004, pointsJGSZ, (even) =>{
                    geoJGSZ = even.feature;
                    var goAnimationJGSZ = this.animationManager.createGOAnimation(Cesium.GOAnimationType.ANIMATION_GROW, "JGSZ", geoJGSZ);//进攻警力生长动画
                    goAnimationJGSZ.startTime = 0;//动画开始时间
                    goAnimationJGSZ.duration = 5;//动画播放时长

                });

                var pointsTFXS = [];
                pointsTFXS[0] = new Cesium.PlotPoint3D(13.0523705219875, 47.828610443775, 0);
                pointsTFXS[1] = new Cesium.PlotPoint3D(13.0528881926318, 47.8282317961645, 0);
                pointsTFXS = this.MoveSymbol(pointsTFXS);
                this.plottingLayer.createSymbol(22, 1003, pointsTFXS,(even) =>{
                    geoTFXS = even.feature;
                    geoTFXS.symbolStyle.lineColor = {red: 1, green: 1, blue: 0, alpha: 1};//"#ffff00"
                    var goAnimationTFXS = this.animationManager.createGOAnimation(Cesium.GOAnimationType.ANIMATION_SHOW, "TFXS1", geoTFXS);//逃犯显隐动画
                    goAnimationTFXS.showEffect = false;//是否有显隐特效
                    goAnimationTFXS.finalDisplay = true; //最终显示状态，默认不显示
                    goAnimationTFXS.startTime = 0;
                    goAnimationTFXS.duration = 6;

                    var goAnimationTFXS1 = this.animationManager.createGOAnimation(Cesium.GOAnimationType.ANIMATION_GROW, "TFSZ1", geoTFXS);//逃犯生长动画
                    goAnimationTFXS1.startTime = 5;
                    goAnimationTFXS1.duration = 6;
                    goAnimationTFXS1.startScale = 1;//生长动画开始比例
                    goAnimationTFXS1.endScale = 0;//生长动画结束比例
                });

之前出现animationManager  undefined的原因是因为异步加载机制

Answer 1

您好，态势推演只能创建一次，想要控制态势推演显示隐藏可以通过设置PlottingLayer.visibility =true/false来实现。

Comments

老师您好，你的意思是InitPlot(viewer, serverUrl) 这个方法，只能创建一次就够了，不能每次查看态势的时候都再InitPlot。还是creatAnimation() 这个方法，只能创建一次就够了

---

您好，creatAnimation()这个方法只创建一次就够了，也就是说创建动画那个按钮只点击一次

---

但是那个创建动画不是一个按钮事件吗，只要点击了那个按钮，不是就执行了里面的方法吗

---

我的意思就是只点击一次，只执行一次

---

我的代码是有一个按钮控制态势推演事件的显示和隐藏。第一次点击按钮，加载到态势场景，可以剪辑场景里的创建动画按钮，这时候是成功的。但是我再点击按钮，切换到别的场景。再点击按钮切换回到态势推演的场景，这时候点击创建动画按钮会报错。

---

您那边切换到其他场景之后原先的动画就都被清除了吗？您可以这样来实现，一个创建动画的按钮，两个控制显示隐藏的按钮，还有一个切换到其他场景的按钮，创建动画的按钮只在最开始的时候点击一次，把动画创建出来之后就不再用它，之后就通过另外两个按钮来控制显隐。

---

这个方法估计行不通，我之前创建动画后，如果切换到别的场景，我使用了

this.animationManager.reset();
this.animationManager.removeAllGOAnimation();即官方示例中清除动画里面的方法，但是我再下次切换回态势场景后，会出现Error in v-on handler: "TypeError: Cannot read property 'length' of null"

---

那您那边切换到其他场景的时候就不清除动画，就只是将它隐藏了，下次切换回态势场景的时候再给他显示出来，也不用在创建一次动画

---

这个方法行不通，这个plottingLayer.visibility =true/false再一开始可以控制显示和隐藏，但是当我把态势场景切换到CBD场景后，再切换回来，点击新加的按钮设置plottingLayer.visibility =true(不进行创建动画)，不会出现动画

---

这个时候再次只有点击创建动画，才能出现动画，但是控制台会报错，播放、暂停听按钮不可用，又出现之前的问题了。

---

您那边跳转的时候是刷新页面了吗？可以不用刷新页面，用S3MTilesLayer .visible=false/true来控制图层的显隐

---

没有页面跳转，CBM场景和态势场景的切换，我是使用viewer.destory()方法，这两个场景每次切换都会把之前的viewer销毁，再重新创建viewer

---

viewer.destory()是释放对象所占的资源，使用之后原先创建的态势动画就被清除了，这边的话可以不用摧毁viewer，而是通过控制图层的显隐来切换。具体可以参考范例http://support.supermap.com.cn:8090/webgl/examples/editor.html#S3MTiles_BIM

---

如果原先创建的动画被清除了，那么我重新创建动画，应该不会出现问题，但是现在出现这个问题了

---

因为每次切换图层的时候，摧毁容器，再重新创建新的容器，那些plottingLayer，animationManager也重新赋值给了全局变量。所以destory方法应该不是关键。后面我需要进行三维和二维地图的切换，是两个div容器，三维切换到二维地图，需要使用destory方法。

---

那按照您这么说的话就可以在跳转的时候同时刷新页面，清除之前创建的所有，跳转完成之后再重新创建动画，也就是说每次跳转页面刷新一次就创建一次动画。

---

刷新页面不是一个好方法。在一个页面中通过按钮执行调用多个事件才符合实际情况，不可能通过刷新页面来达到效果的。

---

我整个思路是：

1.打开页面，初始化创建三维CBD  viewer（控制台无报错）
2.点击页面中按钮（用于控制态势推演的显示和隐藏），先把CBD的viewer用destory（）方法摧毁掉。再重新创建态势推演的viewer。（控制台无报错）
3.点击态势推演页面中创建动画按钮，成功创建动画，这时候，播放、暂停、停止等按钮事件正常。（控制台无报错）
4.想把态势场景隐藏，即点击按钮，把态势的viewer摧毁，再重新创建CBD的viewer。（控制台无报错）
5.又想查看态势场景，即再次点击按钮，把CBD的viewer给destory，创建态势推演的viewer。（控制台无报错）
6.点击创建动画按钮，这时候会出现Cannot set property 'xx' of null报错，播放、暂停、停止等按钮事件都失效（控制台会出现报错）

再创建态势viewer的时候都会进行态势推演的初始化方法InitPlot（官方示例中），并且把plottingLayer，animationManager也重新赋值给了全局变量。只部分代码一直没报错

---

那您在从CBD场景返回态势场景的时候执行以下删除所有动画操作，再重新创建动画（每次返回态势场景的时候有且只创建一次），function deleteAllAnimation() {
            if (0 === animationManager._goAnimations.length) {
                return;
            }
            animationManager.reset();
            animationManager.removeAllGOAnimation();
            //animationManager.removeGOAnimation()
        }

这时再执行播放等操作。我这边进行上述操作时控制台未出现报错情况，且播放等按钮功能正常。

---

执行这个方法会出现Error in v-on handler: "TypeError: Cannot read property 'length' of null"，这个上面说过了

---

或者老师，我把这用qq压缩发给您，帮忙看一下。我好像有您的qq：3442484410，感觉说也说不清楚。

---

QQ联系您