相机平移-源代码示例 运行 重置

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

        .bmgl-widget-credits {
            display: none
        }
    </style>
    <title>Google Map Streets</title>
</head>

<body>
    <div id='container'></div>

    <script>
        bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
        var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.amap-satellite' });


        var scene = viewer.scene;
        var canvas = viewer.canvas;
        canvas.setAttribute("tabindex", "0"); // needed to put focus on the canvas
        canvas.onclick = function () {
            canvas.focus();
        };
        var ellipsoid = scene.globe.ellipsoid;

        //关闭地球默认选择 平移 事件    
        scene.screenSpaceCameraController.enableRotate = false;
        scene.screenSpaceCameraController.enableTranslate = false;
        scene.screenSpaceCameraController.enableZoom = false;
        scene.screenSpaceCameraController.enableTilt = false;
        scene.screenSpaceCameraController.enableLook = false;
        // 创建变量记录当前鼠标位置,然后标记并跟随Camera移动轨迹:
        var startMousePosition;
        var mousePosition;
        var flags = {
            looking: false,
            moveForward: false,
            moveBackward: false,
            moveUp: false,
            moveDown: false,
            moveLeft: false,
            moveRight: false,
        };

        // 添加一个事件控制用户设置标记,当鼠标左键被点击的时候,用于记录当前鼠标的位置:
        var handler = new bmgl.ScreenSpaceEventHandler(canvas);

        //设置点击事件
        handler.setInputAction(function (movement) {
            flags.looking = true;
            mousePosition = startMousePosition = bmgl.Cartesian3.clone(
                movement.position
            );
        }, bmgl.ScreenSpaceEventType.LEFT_DOWN);

        handler.setInputAction(function (movement) {
            mousePosition = movement.endPosition;
        }, bmgl.ScreenSpaceEventType.MOUSE_MOVE);

        handler.setInputAction(function (position) {
            flags.looking = false;
        }, bmgl.ScreenSpaceEventType.LEFT_UP);

        // 创建键盘事件控制用户切换Camera移动标记。我们为下列按键和行为设置了标记:

        //     w Camera向前。
        //     s Camera向后。
        //     a Camera向左。
        //     d Camera向右。
        //     q Camera向上。
        // e Camera向下。
        function getFlagForKeyCode(keyCode) {
            switch (keyCode) {
                case "W".charCodeAt(0):
                    return "moveForward";
                case "S".charCodeAt(0):
                    return "moveBackward";
                case "Q".charCodeAt(0):
                    return "moveUp";
                case "E".charCodeAt(0):
                    return "moveDown";
                case "D".charCodeAt(0):
                    return "moveRight";
                case "A".charCodeAt(0):
                    return "moveLeft";
                default:
                    return undefined;
            }
        }

        document.addEventListener(
            "keydown",
            function (e) {
                var flagName = getFlagForKeyCode(e.keyCode);
                if (typeof flagName !== "undefined") {
                    flags[flagName] = true;
                }
            },
            false
        );

        document.addEventListener(
            "keyup",
            function (e) {
                var flagName = getFlagForKeyCode(e.keyCode);
                if (typeof flagName !== "undefined") {
                    flags[flagName] = false;
                }
            },
            false
        );
        // 现在当标记表明事件发生为true是,我们更新(update)camera。我们新增 ** onTick的监听事件在clock中:

        viewer.clock.onTick.addEventListener(function (clock) {
            var camera = viewer.camera;

            // 接下来,我们让Camera指向鼠标指向的方向。在变量声明之后添加下列代码到事件监听函数
            if (flags.looking) {
                var width = canvas.clientWidth;
                var height = canvas.clientHeight;

                // Coordinate (0.0, 0.0) will be where the mouse was clicked.
                var x = (mousePosition.x - startMousePosition.x) / width;
                var y = -(mousePosition.y - startMousePosition.y) / height;

                var lookFactor = 0.05;
                camera.lookRight(x * lookFactor);
                camera.lookUp(y * lookFactor);
            }

            //moveForward、moveBackward、moveUp、moveDown、moveLeft和moveRight方法只需要一个距离参数(米)
            // 用于移动Camera的距离。当每一个按键被按下时,
            // Camera就会在球体表面移动固定的距离。Camera离地面越近,移动的速度就越慢。
            var cameraHeight = ellipsoid.cartesianToCartographic(camera.position)
                .height;
            var moveRate = cameraHeight / 100.0;

            if (flags.moveForward) {
                camera.moveForward(moveRate);
            }
            if (flags.moveBackward) {
                camera.moveBackward(moveRate);
            }
            if (flags.moveUp) {
                camera.moveUp(moveRate);
            }
            if (flags.moveDown) {
                camera.moveDown(moveRate);
            }
            if (flags.moveLeft) {
                camera.moveLeft(moveRate);
            }
            if (flags.moveRight) {
                camera.moveRight(moveRate);
            }
        });

    </script>
</body>

</html>                                                                                            
源码