粒子 汽车运行-源代码示例 运行 重置

                    <!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>
    <script src='./templates/bmgl-header.js'></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    #toolbar {
        position: absolute;
        background-color: white;
        opacity: .8;
    }
</style>

<body>
    <div id="container" class="fullSize">
        <div id="slider"></div>
    </div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>

</body>
<script>

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

    var statusDisplay = document.createElement("div");
    var fuelDisplay = document.createElement("div");
    var czmlPath = "/SampleData/";
    var vehicleEntity;

    // Add a blank CzmlDataSource to hold our multi-part entity/entities.
    var dataSource = new bmgl.CzmlDataSource();
    viewer.dataSources.add(dataSource);

    // This demo shows how a single path can be broken up into several CZML streams.
    var partsToLoad = [
        {
            url: "MultipartVehicle_part1.czml",
            range: [0, 1500],
            requested: false,
            loaded: false,
        },
        {
            url: "MultipartVehicle_part2.czml",
            range: [1500, 3000],
            requested: false,
            loaded: false,
        },
        {
            url: "MultipartVehicle_part3.czml",
            range: [3000, 4500],
            requested: false,
            loaded: false,
        },
    ];

    function updateStatusDisplay() {
        var msg = "";
        partsToLoad.forEach(function (part) {
            msg += part.url + " - ";
            if (part.loaded) {
                msg += "Loaded.<br/>";
            } else if (part.requested) {
                msg += "Loading now...<br/>";
            } else {
                msg += "Not needed yet.<br/>";
            }
        });
        statusDisplay.innerHTML = msg;
    }

    // Helper function to mark a part as requested, and process it into the dataSource.
    function processPart(part) {
        part.requested = true;
        updateStatusDisplay();
        dataSource.process(czmlPath + part.url).then(function () {
            part.loaded = true;
            updateStatusDisplay();

            // Follow the vehicle with the camera.
            if (!viewer.trackedEntity) {
                viewer.trackedEntity = vehicleEntity = dataSource.entities.getById(
                    "Vehicle"
                );
            }
        });
    }

    // Load the first part up front.
    processPart(partsToLoad[0]);

    // Load a new section before the clock naturally gets there.
    // Note this can't predict when a user may fast-forward to it.
    var preloadTimeInSeconds = 100;

    viewer.clock.onTick.addEventListener(function (clock) {
        // This example uses time offsets from the start to identify which parts need loading.
        var timeOffset = bmgl.JulianDate.secondsDifference(
            clock.currentTime,
            clock.startTime
        );

        // Filter the list of parts to just the ones that need loading right now.
        // Then, process each part that needs loading.
        partsToLoad
            .filter(function (part) {
                return (
                    !part.requested &&
                    timeOffset >= part.range[0] - preloadTimeInSeconds &&
                    timeOffset <= part.range[1]
                );
            })
            .forEach(function (part) {
                processPart(part);
            });

        if (vehicleEntity) {
            var fuel = vehicleEntity.properties.fuel_remaining.getValue(
                clock.currentTime
            );
            if (bmgl.defined(fuel)) {
                fuelDisplay.textContent = "Fuel: " + fuel.toFixed(2) + " gal";
            }
        }
    });

    // Add a reset button, for convenience.
    Sandcastle.addToolbarButton("Reset demo", function () {
        // Put things back to the starting position.
        viewer.clock.currentTime = viewer.clock.startTime;
        viewer.clock.shouldAnimate = true;

        partsToLoad.forEach(function (part) {
            part.requested = false;
            part.loaded = false;
        });

        dataSource.entities.removeAll();
        processPart(partsToLoad[0]);
    });

    // Show the status display below the reset button.
    statusDisplay.style.background = "rgba(42, 42, 42, 0.7)";
    statusDisplay.style.padding = "5px 10px";
    document.getElementById("toolbar").appendChild(statusDisplay);

    // Show a multi-part custom property being read from CZML.
    fuelDisplay.style.background = "rgba(42, 42, 42, 0.7)";
    fuelDisplay.style.padding = "5px 10px";
    fuelDisplay.style.marginTop = "5px";
    document.getElementById("toolbar").appendChild(fuelDisplay); 
</script>

</html>                                                        
源码