飞行的热气球-源代码示例 运行 重置

                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

<body>
    <div id="container"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
</body>
<script>

    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {
        terrainId: 'bigemap.9af15d8e',
        vrButton: true,
    });

    // Click the VR button in the bottom right of the screen to switch to VR mode.

    viewer.scene.globe.enableLighting = true;
    viewer.scene.globe.depthTestAgainstTerrain = true;

    // Follow the path of a plane. See the interpolation Sandcastle example.
    bmgl.Math.setRandomNumberSeed(3);

    var start = bmgl.JulianDate.fromDate(new Date(2015, 2, 25, 16));
    var stop = bmgl.JulianDate.addSeconds(
        start,
        360,
        new bmgl.JulianDate()
    );

    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = bmgl.ClockRange.LOOP_STOP;
    viewer.clock.multiplier = 1.0;
    viewer.clock.shouldAnimate = true;

    function computeCirclularFlight(lon, lat, radius) {
        var property = new bmgl.SampledPositionProperty();
        var startAngle = bmgl.Math.nextRandomNumber() * 360.0;
        var endAngle = startAngle + 360.0;

        var increment =
            (bmgl.Math.nextRandomNumber() * 2.0 - 1.0) * 10.0 + 45.0;
        for (var i = startAngle; i < endAngle; i += increment) {
            var radians = bmgl.Math.toRadians(i);
            var timeIncrement = i - startAngle;
            var time = bmgl.JulianDate.addSeconds(
                start,
                timeIncrement,
                new bmgl.JulianDate()
            );
            var position = bmgl.Cartesian3.fromDegrees(
                lon + radius * 1.5 * Math.cos(radians),
                lat + radius * Math.sin(radians),
                bmgl.Math.nextRandomNumber() * 500 + 1800
            );
            property.addSample(time, position);
        }
        return property;
    }

    var longitude = 104.111;
    var latitude = 31.1110;
    var radius = 0.03;

    var modelURI =
        "/templates/glb/bmglBalloon.glb";
    var entity = viewer.entities.add({
        availability: new bmgl.TimeIntervalCollection([
            new bmgl.TimeInterval({
                start: start,
                stop: stop,
            }),
        ]),
        position: computeCirclularFlight(longitude, latitude, radius),
        model: {
            uri: modelURI,
            minimumPixelSize: 64,
        },
    });

    entity.position.setInterpolationOptions({
        interpolationDegree: 2,
        interpolationAlgorithm: bmgl.HermitePolynomialApproximation,
    });

    // Set initial camera position and orientation to be when in the model's reference frame.
    var camera = viewer.camera;
    camera.position = new bmgl.Cartesian3(0.25, 0.0, 0.0);
    camera.direction = new bmgl.Cartesian3(1.0, 0.0, 0.0);
    camera.up = new bmgl.Cartesian3(0.0, 0.0, 1.0);
    camera.right = new bmgl.Cartesian3(0.0, -1.0, 0.0);

    viewer.scene.postUpdate.addEventListener(function (scene, time) {
        var position = entity.position.getValue(time);
        if (!bmgl.defined(position)) {
            return;
        }

        var transform;
        if (!bmgl.defined(entity.orientation)) {
            transform = bmgl.Transforms.eastNorthUpToFixedFrame(position);
        } else {
            var orientation = entity.orientation.getValue(time);
            if (!bmgl.defined(orientation)) {
                return;
            }

            transform = bmgl.Matrix4.fromRotationTranslation(
                bmgl.Matrix3.fromQuaternion(orientation),
                position
            );
        }

        // Save camera state
        var offset = bmgl.Cartesian3.clone(camera.position);
        var direction = bmgl.Cartesian3.clone(camera.direction);
        var up = bmgl.Cartesian3.clone(camera.up);

        // Reset the camera state to the saved state so it appears fixed in the model's frame.
        bmgl.Cartesian3.clone(offset, camera.position);
        bmgl.Cartesian3.clone(direction, camera.direction);
        bmgl.Cartesian3.clone(up, camera.up);
        bmgl.Cartesian3.cross(direction, up, camera.right);
    });
    //设置相机位置 
    viewer.camera.setView( {
        destination  : bmgl.Cartesian3.fromDegrees( 104.153, 31.089, 30000 )
    } );

    // Add a few more balloons flying with the one the viewer is in.
    var numBalloons = 12;
    for (var i = 0; i < numBalloons; ++i) {
        var balloonRadius =
            (bmgl.Math.nextRandomNumber() * 2.0 - 1.0) * 0.01 + radius;
        var balloon = viewer.entities.add({
            availability: new bmgl.TimeIntervalCollection([
                new bmgl.TimeInterval({
                    start: start,
                    stop: stop,
                }),
            ]),
            position: computeCirclularFlight(
                longitude,
                latitude,
                balloonRadius
            ),
            model: {
                uri: modelURI,
                minimumPixelSize: 64,
            },
        });

        balloon.position.setInterpolationOptions({
            interpolationDegree: 2,
            interpolationAlgorithm: bmgl.HermitePolynomialApproximation,
        });
    }


</script>

</html>                                                                                                                                
源码