首页 / 浏览问题 / 三维GIS / 问题详情
vue中态势推演Cannot set property 'xx' of null
Zzy
19EXP 2020年07月20日

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的原因是因为异步加载机制

1个回答

您好,态势推演只能创建一次,想要控制态势推演显示隐藏可以通过设置PlottingLayer.visibility =true/false来实现。
6,077EXP 2020年07月23日
老师您好,你的意思是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联系您
...