模拟飞行-外部视角-源代码示例 运行 重置

                    <!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link href='http://www.bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
    <script src='http://www.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%;
        }
        .info{
            position: fixed;
            top:0;
            color: #8a6d3b;
            z-index: 99;
            padding:14px;
            margin: 0;
            background-color: #fcf8e3;
            border-color: #faebcc;
            left: 0;
            right: 0;
            text-align: center;
        }
    </style>
    <title>模拟飞行</title>
</head>
<body>
<div class="info">
    使用方向键控制飞行 “←” 向左飞行,“→”:向右飞行,“↑” 升高,“↓” 下降,若控制失效,请单击本处获得焦点
</div>
<div id='container'></div>
<script>
    bmgl.Config.HTTP_URL = 'http://www.bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {
        terrainId: 'bigemap.9af15d8e',
        requestRenderMode:false,
        shouldAnimate:true,
    });
    viewer.scene.globe.depthTestAgainstTerrain=true;
      viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
      
    var canvas = viewer.canvas;
    canvas.setAttribute("tabindex", "0"); 
    canvas.addEventListener("click", function () {
        canvas.focus();
    });
    canvas.focus();
    var config = {
        init: {
            lat: 30.950543,
            lng: 103.0004609201,
            height: 4000,
        },
        requireHeight:true,
        angle:{
            delta: 0.5,
            left:0,
            down:0,
            r:0,
            p:0,
        },
        position: {},
        delta: 0.00003,
    };
    config.position = Object.assign({}, config.init);
    viewer.scene.camera.setView({
        destination: bmgl.Cartesian3.fromDegrees(config.init.lng, config.init.lat, config.init.height),
        endTransform: bmgl.Matrix4.IDENTITY,
    });
    var plane = viewer.entities.add({
        position: bmgl.Cartesian3.fromDegrees(config.init.lng, config.init.lat, config.init.height),
        orientation: bmgl.Transforms.headingPitchRollQuaternion(bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat, config.position.height), new bmgl.HeadingPitchRoll(config.angle.left-90, 0, 0)),
        model: {
            maximumScale: 2000,
            minimumPixelSize: 300,
            uri: '/templates/glb/bmgl_Air.glb',
        }
    });

    function getHeight(){
        config.requireHeight=false;
        var promise=bmgl.sampleTerrainMostDetailed(viewer.terrainProvider,[bmgl.Cartographic.fromDegrees(config.position.lng,config.position.lat)]);
        bmgl.when(promise,(data)=>{
            if (data&&data[0]&&data[0]['height']&&data[0]['height']>0&&config.position.height<data['0']['height']+100){
                if (!config.position.oldHeight) config.position.oldHeight=config.position.height;
                config.position.height=data['0']['height']+100;
            }
            config.requireHeight=true;
        }).otherwise(()=>{
            config.requireHeight=true;
        });
    }
  

    viewer.trackedEntity = plane;
    viewer.clock.onTick.addEventListener(function (e) {
        getHeight();
        config.position.lat += Math.cos(bmgl.Math.toRadians(config.angle.left))*config.delta;
        config.position.lng += Math.sin(bmgl.Math.toRadians(config.angle.left))*config.delta;
        if (config.angle.p&&!config.keydown){
            config.angle.p>0?config.angle.p-=config.angle.delta:config.angle.p+=config.angle.delta;
        }
        if (config.angle.r&&!config.keydown){
            config.angle.r>0?config.angle.r-=config.angle.delta:config.angle.r+=config.angle.delta;
        }
        plane.position = bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat, config.position.height);
        plane.orientation=bmgl.Transforms.headingPitchRollQuaternion(bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat, config.position.height), new bmgl.HeadingPitchRoll.fromDegrees(config.angle.left-90, config.angle.p,config.angle.r));
    });

    document.addEventListener('keydown', function (e) {
        config.keydown=true;
        switch (e.keyCode) {
            case 37://左
                config.angle.left-=1;
                if (config.angle.r>-30)  config.angle.r-=config.angle.delta;
                break;
            case 38://向上
                config.position.height+=10;
                if (config.angle.p<30)  config.angle.p+=config.angle.delta;
                break;
            case 39://向右
                if (config.angle.r<30)  config.angle.r+=config.angle.delta;
                config.angle.left+=1;
                break;
            case 40://向下
                config.position.height-=10;
                if (config.angle.p>-30)  config.angle.p-=config.angle.delta;
                if (config.position.height<10) config.position.height=10;
                break;
        }
    });
    document.addEventListener('keyup',()=>{
        config.keydown=false;
    });
</script>
</body>
</html>
                                                                                                                                                                                                                                                                                                                    
源码