飞行轨迹-源代码示例 运行 重置

                    <!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <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>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
                #toolbar{
            position: absolute;
            top:15px;
            left:20px;
            z-index: 99;
            width: 150px;
        }
        #toolbar select {
            display: inline-block;
            position: relative;
            background: #303336;
            border: 1px solid #444;
            color: #edffff;
            fill: #edffff;
            border-radius: 4px;
            padding: 5px 12px;
            margin: 2px 3px;
            cursor: pointer;
            overflow: hidden;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #toolDiv {
            left: 10px;
            top: 10px;
            margin-bottom: 10px;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>part_test</title>
</head>
<body>
<div id="toolbar">
    <div id="toolDiv">
        <select data-bind="options: selection, value: selectValue"> </select>
    </div>
    <button onclick="ViewToDown()">视角向下</button>
    <button onclick="ViewToSide()">侧面视角</button>
    <button onclick="ViewToAircraft()">第一视角</button>
</div>
<div id='container'></div>

<script>
 bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite',timeline:true});
    var entity = undefined;
    viewer.scene.globe.enableLighting = true;
    viewer.scene.globe.depthTestAgainstTerrain = true;
    //Set bounds of our simulation time
    var start = bmgl.JulianDate.fromDate(new Date(2015, 2, 25, 16));
    var stop = bmgl.JulianDate.addSeconds(start, 360, new bmgl.JulianDate());

    //Make sure viewer is at the desired time.
    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = bmgl.ClockRange.LOOP_STOP; //Loop at the end
    viewer.clock.multiplier = 10;
    //Set timeline to simulation bounds
    viewer.timeline.zoomTo(start, stop);
    //Generate a random circular pattern with varying heights.
    function computeCirclularFlight(lon, lat, radius) {
        var property = new bmgl.SampledPositionProperty();
        for (var i = 0; i <= 360; i += 45) {
            var radians = bmgl.Math.toRadians(i);
            var time = bmgl.JulianDate.addSeconds(start, i, new bmgl.JulianDate());
            var position = bmgl.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), bmgl.Math.nextRandomNumber() * 500 + 8750);
            property.addSample(time, position);
            //Also create a point for each sample we generate.
            viewer.entities.add({
                position: position,
                point: {
                    pixelSize: 8,
                    color: bmgl.Color.TRANSPARENT,
                    outlineColor: bmgl.Color.YELLOW,
                    outlineWidth: 3
                }
            });
        }
        return property;
    }

    //Compute the entity position property.
    var position = computeCirclularFlight(86.93047, 27.986914, 0.03);
    viewer.camera.flyTo({
        destination: bmgl.Cartesian3.fromDegrees(86.93047, 27.986914, 20000)
    });

    //Actually create the entity
    entity = viewer.entities.add({
        //Set the entity availability to the same interval as the simulation time.
        availability: new bmgl.TimeIntervalCollection([new bmgl.TimeInterval({
            start: start,
            stop: stop
        })]),

        //Use our computed positions
        position: position,
        //Automatically compute orientation based on position movement.
        orientation: new bmgl.VelocityOrientationProperty(position),
        //Load the Cesium plane model to represent the entity
        model: {
            uri: '/bmgl/obj/plane.glb',
            minimumPixelSize: 64,
            scale:50,
        },

        //Show the path as a pink line sampled in 1 second increments.
        path: {
            resolution: 1,
            material: new bmgl.PolylineGlowMaterialProperty({
                glowPower: 0.1,
                color: bmgl.Color.YELLOW
            }),
            width: 10
        }
    });

    var viewModel = {
        selection: ["折线", "光滑线", "Hermite光滑线"],
        selectValue: 0
    };

    bmgl.knockout.track(viewModel);

    /*给viewModel中的所有属性进行监测*/
    var toolbar = document.getElementById('toolbar');
    bmgl.knockout.applyBindings(viewModel, toolbar);

    bmgl.knockout.getObservable(viewModel, 'selectValue').subscribe(
        function (newValue) {
            var that = this;
            if (newValue == '折线') {
                entity.position.setInterpolationOptions({
                    interpolationDegree: 1,
                    interpolationAlgorithm: bmgl.LinearApproximation
                });
            } else if (newValue == '光滑线') {
                entity.position.setInterpolationOptions({
                    interpolationDegree: 5,
                    interpolationAlgorithm: bmgl.LagrangePolynomialApproximation
                });
            } else if (newValue == 'Hermite光滑线') {
                entity.position.setInterpolationOptions({
                    interpolationDegree: 2,
                    interpolationAlgorithm: bmgl.HermitePolynomialApproximation
                });
            }
        }
    );

    function ViewToDown() {
        viewer.trackedEntity = undefined;
        viewer.zoomTo(viewer.entities, new bmgl.HeadingPitchRange(0, bmgl.Math.toRadians(-90)));
    }

    function ViewToSide() {
        viewer.trackedEntity = undefined;
        viewer.zoomTo(viewer.entities, new bmgl.HeadingPitchRange(bmgl.Math.toRadians(-90), bmgl.Math.toRadians(-15), 7500));
    }

    function ViewToAircraft() {
        viewer.trackedEntity = entity;
    }
    viewer.clock.shouldAnimate=true;
</script>
</body>
</html>                                                                                                                                                                                                        
源码