模拟飞行-第一视角-源代码示例 运行 重置

                    <!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.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;
            margin: 0;
            background-color: #fcf8e3;
            border-color: #faebcc;
            left: 0;
            right: 0;
            text-align: center;
        }
        #chart{
            border: 1px solid red;
            height: 200px;
            position: absolute;
            z-index:99;
            left: 0;
            padding:14px;
            bottom: 0;
            right: 0;
            background-color: rgba(241,250,250,0.3);
        }
    </style>
    <title>模拟飞行</title>
</head>
<body>
<div class="info">
    使用方向键控制飞行 “←” 向左飞行,“→”:向右飞行,“↑” 升高,“↓” 下降,空格暂停
</div>
<div id="chart">

</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,
    });
    var canvas = viewer.canvas;
    canvas.setAttribute("tabindex", "0"); 
    canvas.addEventListener("click", function () {
        canvas.focus();
    });
    canvas.focus();
    viewer.scene.globe.depthTestAgainstTerrain=true;
    var config = {
        init: {
            lat: 30.950543,
            lng: 103.0004609201,
            height: 4000,
            minHeight:0
        },
        fly:true,
        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),
        // orientation: initialOrientation,
        endTransform: bmgl.Matrix4.IDENTITY,
    });
    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){
                config.position.minHeight=data['0']['height']+100;
            }
            config.requireHeight=true;
        }).otherwise(()=>{
            config.requireHeight=true;
        });
    }
    viewer.clock.onTick.addEventListener(function (e) {
        getHeight();
        if (config.fly){
            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;
        }
        // console.log(Math.max(config.position.height,config.position.minHeight));
        var p=bmgl.Cartesian3.fromDegrees(config.position.lng, config.position.lat,Math.max(config.position.height,config.position.minHeight));
        viewer.camera.setView({
            destination:p,
            orientation:{
                heading:bmgl.Math.toRadians(config.angle.left),
                pitch:bmgl.Math.toRadians(config.angle.p-3),
                roll:-bmgl.Math.toRadians(config.angle.r)
            },
            endTransform:bmgl.Matrix4.IDENTITY,
        });
    });
    document.addEventListener('keydown', function (e) {
        config.keydown=true;
        switch (e.keyCode) {
            case 32://空格
                config.fly=!config.fly;
                break;
            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;
    });

    var option = {
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
            show: false,
            feature: {
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series : [
            {
                name: '偏航角',
                type: 'gauge',
                center: ['20%', '50%'],    // 默认全局居中
                radius: '75%',
                min:-30,
                max:30,
                splitNumber:10,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8,
                        color:[[1, '#91c7ae']],
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length:12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length:20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    offsetCenter: [0, '-30%'],       // x, y,单位px
                },
                detail: {
                    offsetCenter:[0,'30%'],
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 18,
                        color:'#f1f1f1',
                    }
                },
                data:[{value: 0, name: 'deg'}]
            },
            {
                name: '飞行高度',
                type: 'gauge',
                z: 3,
                min: 1000,
                max: 10000,
                splitNumber: 10,
                radius: '100%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10,
                        color: [[1,'#4596FB']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                        color: 'auto'
                    }
                },
                title : {
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail : {
                    offsetCenter:[0,'30%'],
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 18,
                        color:'#f1f1f1',
                    }
                },
                data:[{value: config.init.height, name: 'm'}]
            },
            {
                name: '俯仰角',
                type: 'gauge',
                z: 3,
                min: -30,
                max:30,
                center: ['75%', '55%'],
                splitNumber: 10,
                radius: '70%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10,
                        color:[[1, '#91c7ae']],
                    },
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                        color: 'auto'
                    }
                },
                title : {
                    show:false,
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail : {
                    offsetCenter:[0,'30%'],
                    textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 18,
                        color:'#f1f1f1',
                    }
                },
                data:[{value: 0, name: 'deg'}]
            },
        ]
    };
    var myChart=echarts.init(document.getElementById('chart'));
    myChart.setOption(option);
    setInterval(function (){
        option.series[0].data[0].value =(config.angle.r).toFixed(1);
        option.series[1].data[0].value =Math.floor(Math.max(Math.max(config.position.height,config.position.minHeight)));
        option.series[2].data[0].value =(config.angle.p).toFixed(1);
        myChart.setOption(option,true);
        myChart.resize();
    },100);
</script>
</body>
</html>                                                                                                                                
源码