键盘控制方向-源代码示例 运行 重置

                    <!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%;
    }

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

<body>
    <div id="container"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar">
        <table class="infoPanel">
            <tbody>
                <tr>
                    <td>
                       单击bmgl窗口,然后使用键盘更改设置。
                    </td>
                </tr>
                <tr>
                    <td>头部: <span id="heading"></span>°</td>
                </tr>
                <tr>
                    <td>← to 左/→ to 右</td>
                </tr>
                <tr>
                    <td>身体部分: <span id="pitch"></span>°</td>
                </tr>
                <tr>
                    <td>↑ to 上/↓ to 下</td>
                </tr>
                <tr>
                    <td>滚动: <span id="roll"></span>°</td>
                </tr>
                <tr>
                    <td>← + ⇧ left/→ + ⇧ right</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>

    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.googlemap-satellite',requestRenderMode:false });
    var canvas = viewer.canvas;
    canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
    canvas.addEventListener("click", function () {
        canvas.focus();
    });
    canvas.focus();

    var scene = viewer.scene;
    var camera = viewer.camera;
    var controller = scene.screenSpaceCameraController;
    var r = 0;
    var center = new bmgl.Cartesian3();

    var hpRoll = new bmgl.HeadingPitchRoll();
    var hpRange = new bmgl.HeadingPitchRange();
    var deltaRadians = bmgl.Math.toRadians(1.0);

    var localFrames = [
        {
            pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.045, 5000.0),
            converter: bmgl.Transforms.eastNorthUpToFixedFrame,
            comments: "东北向上\nlocal Frame",
        },
        {
            pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.05, 5500.0),
            converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
                "north",
                "west"
            ),
            comments: "西北向上\nlocal Frame",
        },
        {
            pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.04, 4500.0),
            converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
                "south",
                "up"
            ),
            comments: "南上西\nlocal Frame",
        },
        {
            pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.05, 4500.0),
            converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
                "up",
                "east"
            ),
            comments: "上 东 北\nlocal Frame",
        },
        {
            pos: bmgl.Cartesian3.fromDegrees(-123.075, 44.04, 5500.0),
            converter: bmgl.Transforms.localFrameToFixedFrameGenerator(
                "down",
                "east"
            ),
            comments: "东南下方\nlocal Frame",
        },
    ];

    var primitives = [];
    var hprRollZero = new bmgl.HeadingPitchRoll();

    for (var i = 0; i < localFrames.length; i++) {
        var position = localFrames[i].pos;
        var converter = localFrames[i].converter;
        var comments = localFrames[i].comments;
        var planePrimitive = scene.primitives.add(
            bmgl.Model.fromGltf({
                url: "/templates/glb/bmgl_Air.glb",
                modelMatrix: bmgl.Transforms.headingPitchRollToFixedFrame(
                    position,
                    hpRoll,
                    bmgl.Ellipsoid.WGS84,
                    converter
                ),
                minimumPixelSize: 128,
            })
        );

        primitives.push({
            primitive: planePrimitive,
            converter: converter,
            position: position,
        });
        var modelMatrix = bmgl.Transforms.headingPitchRollToFixedFrame(
            position,
            hprRollZero,
            bmgl.Ellipsoid.WGS84,
            converter
        );
        scene.primitives.add(
            new bmgl.DebugModelMatrixPrimitive({
                modelMatrix: modelMatrix,
                length: 300.0,
                width: 10.0,
            })
        );

        var positionLabel = position.clone();
        positionLabel.z = position.z + 300.0;
        viewer.entities.add({
            position: positionLabel,
            label: {
                text: comments,
                font: "18px Helvetica",
                fillColor: bmgl.Color.WHITE,
                outlineColor: bmgl.Color.BLACK,
                outlineWidth: 2,
                style: bmgl.LabelStyle.FILL_AND_OUTLINE,
                verticalOrigin: bmgl.VerticalOrigin.CENTER,
                HorizontalOrigin: bmgl.HorizontalOrigin.RIGHT,
            },
        });
    }

    primitives[0].primitive.readyPromise.then(function (model) {
        // Play and loop all animations at half-speed
        model.activeAnimations.addAll({
            multiplier: 0.5,
            loop: bmgl.ModelAnimationLoop.REPEAT,
        });

        // Zoom to model
        r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
        controller.minimumZoomDistance = r * 0.5;
        bmgl.Matrix4.multiplyByPoint(
            model.modelMatrix,
            model.boundingSphere.center,
            center
        );
        var heading = bmgl.Math.toRadians(90.0);
        var pitch = bmgl.Math.toRadians(0.0);
        hpRange.heading = heading;
        hpRange.pitch = pitch;
        hpRange.range = r * 100.0;
        camera.lookAt(center, hpRange);
    });

    document.addEventListener("keydown", function (e) {
        switch (e.keyCode) {
            case 40:
                // pitch down
                hpRoll.pitch -= deltaRadians;
                if (hpRoll.pitch < -bmgl.Math.TWO_PI) {
                    hpRoll.pitch += bmgl.Math.TWO_PI;
                }
                break;
            case 38:
                // pitch up
                hpRoll.pitch += deltaRadians;
                if (hpRoll.pitch > bmgl.Math.TWO_PI) {
                    hpRoll.pitch -= bmgl.Math.TWO_PI;
                }
                break;
            case 39:
                if (e.shiftKey) {
                    // roll right
                    hpRoll.roll += deltaRadians;
                    if (hpRoll.roll > bmgl.Math.TWO_PI) {
                        hpRoll.roll -= bmgl.Math.TWO_PI;
                    }
                } else {
                    // turn right
                    hpRoll.heading += deltaRadians;
                    if (hpRoll.heading > bmgl.Math.TWO_PI) {
                        hpRoll.heading -= bmgl.Math.TWO_PI;
                    }
                }
                break;
            case 37:
                if (e.shiftKey) {
                    // roll left until
                    hpRoll.roll -= deltaRadians;
                    if (hpRoll.roll < 0.0) {
                        hpRoll.roll += bmgl.Math.TWO_PI;
                    }
                } else {
                    // turn left
                    hpRoll.heading -= deltaRadians;
                    if (hpRoll.heading < 0.0) {
                        hpRoll.heading += bmgl.Math.TWO_PI;
                    }
                }
                break;
            default:
        }
    });

    var headingSpan = document.getElementById("heading");
    var pitchSpan = document.getElementById("pitch");
    var rollSpan = document.getElementById("roll");

    viewer.scene.preUpdate.addEventListener(function (scene, time) {
        for (var i = 0; i < primitives.length; i++) {
            var primitive = primitives[i].primitive;
            var converter = primitives[i].converter;
            var position = primitives[i].position;
            bmgl.Transforms.headingPitchRollToFixedFrame(
                position,
                hpRoll,
                bmgl.Ellipsoid.WGS84,
                converter,
                primitive.modelMatrix
            );
        }
    });

    viewer.scene.preRender.addEventListener(function (scene, time) {
        headingSpan.innerHTML = bmgl.Math.toDegrees(hpRoll.heading).toFixed(
            1
        );
        pitchSpan.innerHTML = bmgl.Math.toDegrees(hpRoll.pitch).toFixed(1);
        rollSpan.innerHTML = bmgl.Math.toDegrees(hpRoll.roll).toFixed(1);
    });


</script>

</html>                                                                                                                                                                                                                                            
源码