animate flight after globe is viewable

CesiumJS
1

Hello,

I'm overlaying an image on the globe using the code below and would like to animate rotating and zooming to that image location after the globe is viewable. What's the best way to do that? Right now I'm using setTimeout() but I'm not sure that's a clean way to do that. Any help would be greatly appreciated.

    var widget = new Cesium.CesiumWidget('cesiumContainer');

    var scene = widget.scene;
    scene.initializeFrame();
    var primitives = scene.getPrimitives();
    var ellipsoid = widget.centralBody.getEllipsoid();

    var imgPolygon = primitives.add(new Cesium.Polygon({
        positions : ellipsoid.cartographicArrayToCartesianArray([
        Cesium.Cartographic.fromDegrees(98.6, 3.49),
        Cesium.Cartographic.fromDegrees(97.95, 3.58),
        Cesium.Cartographic.fromDegrees(97.86, 2.929999999),
        Cesium.Cartographic.fromDegrees(98.509999999, 2.83)
        ]),
        material : new Cesium.Material({
            fabric : {
                type : 'Image',
                uniforms : {
                    image : 'browse.png'
                }
            }
        })
    }));

    setTimeout(function() {
        var destination = Cesium.Cartographic.fromDegrees(98.275391, 3.19223, 80000.0);
        var flight = Cesium.CameraFlightPath.createAnimationCartographic(scene, {
            destination : destination
        });
        scene.getAnimations().add(flight);
    }, 10000);

Thanks,

Gerald

2

Hi Gerald,

The globe loads progressively and I don’t believe we provide events on its progress so using setTimeout is reasonable; however, the globe loads based on the viewer’s position so it will not load detailed terrain/imagery until the viewer is close to it.

Regards,

Patrick