其他分享
首页 > 其他分享> > 三维地球漫游实现或者沿着固定估计飞行源代码

三维地球漫游实现或者沿着固定估计飞行源代码

作者:互联网

三维地图服务器 下载地址:http://download.bigemap.com/bm3Dserver.rar    (最新版)

安装以上SDK后,启动,启动面板上找到开发使用,如下图源代码:

//注释:安装地图服务器后,下列代码中的 http://bigemap.com  替换成   http://localhost    ,其他不变

                    <!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 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;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>part_test</title>
</head>
<body>

<div id='container'></div>
<div id="toolbar">
    <select data-bind="options: options, optionsText: '_text', value: selectedOption,optionsCaption: '选择相机功能'"></select>
</div>
<script>
    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite'});
    var viewModel, rotateEventListener, avaliableOptions,rotateTimer;

    function opt(text, callback) {
        this._text = text;
        this._callback = callback
    }

    viewer.camera.moveStart.addEventListener(function () {
        if (viewModel.checkCamera) {
            viewModel.cameraEventInfo("视角变动开始");
        }
    });
    viewer.camera.moveEnd.addEventListener(function () {
        if (viewModel.checkCamera) {
            viewModel.cameraEventInfo("视角变动结束");
        }
    });
    viewer.camera.changed.addEventListener(function () {
        var p=bmgl.Cartographic.fromCartesian(viewer.camera.position);
        if(p.height<1200000){
           if (rotateEventListener){
               viewer.clock.onTick.removeEventListener(rotateEventListener);
               rotateEventListener=null;
           }
        };
    });
    var flyToLocation = function () {
        var options = {
            enableHighAccuracy: true,
            maximumAge: 1000
        };
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(fly, one rror, options); //浏览器支持geolocation
        } else {
            //浏览器不支持geolocation
        }

        // Create callback for browser's geolocation
        function fly(position) {
            viewer.camera.flyTo({
                destination: bmgl.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude, 1000.0)
            });
        }

        //失败时
        function one rror(error) {
            switch (error.code) {
                case 1:
                    alert("位置服务被拒绝");
                    break;
                case 2:
                    alert("暂时获取不到位置信息");
                    break;
                case 3:
                    alert("获取信息超时");
                    break;
                case 4:
                    alert("未知错误");
                    break;
            }
        }
    };

    var flyToSanDiego = function () {
        viewer.camera.flyTo({
            destination: bmgl.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
        });
    };

    var flyToHeadingPitchRoll = function () {
        viewer.camera.flyTo({
            destination: bmgl.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
            orientation: {
                /*弧度*/
                heading: bmgl.Math.toRadians(20.0),
                pitch: bmgl.Math.toRadians(-35.0),
                roll: 0.0
            }
        });
    }

    var viewRectangle = function () {
        var west = -77.0;
        var south = 38.0;
        var east = -72.0;
        var north = 42.0;

        var rectangle = bmgl.Rectangle.fromDegrees(west, south, east, north);
        viewer.camera.setView({
            destination: rectangle
        });

        // Show the rectangle.  Not required; just for show.
        viewer.entities.add({
            rectangle: {
                coordinates: rectangle,
                fill: false,
                outline: true,
                outlineColor: bmgl.Color.WHITE
            }
        });
    }

    var flyToRectangle = function () {
        var west = -90.0;
        var south = 38.0;
        var east = -87.0;
        var north = 40.0;
        var rectangle = bmgl.Rectangle.fromDegrees(west, south, east, north);

        viewer.camera.flyTo({
            destination: rectangle
        });

        // Show the rectangle.  Not required; just for show.
        viewer.entities.add({
            rectangle: {
                coordinates: rectangle,
                fill: false,
                outline: true,
                outlineColor: bmgl.Color.WHITE
            }
        });
    }

    var setReferenceFrame = function () {
        var center = bmgl.Cartesian3.fromDegrees(-75.59777, 40.03883);
        var transform = bmgl.Transforms.eastNorthUpToFixedFrame(center);

        // View in east-north-up frame
        var camera = viewer.camera;
        camera.constrainedAxis = bmgl.Cartesian3.UNIT_Z;
        camera.lookAtTransform(transform, new bmgl.Cartesian3(-120000.0, -120000.0, 120000.0));

        // Show reference frame.  Not required.
        viewer.scene.primitives.add(new bmgl.DebugModelMatrixPrimitive({
            modelMatrix: transform,
            length: 100000.0
        }));
    }

    var setHeadingPitchRoll = function () {
        viewer.camera.setView({
            destination: bmgl.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
            orientation: {
                heading: -bmgl.Math.PI_OVER_TWO,
                pitch: -bmgl.Math.PI_OVER_FOUR,
                roll: 0.0
            }
        });
    };

    var icrf = function (scene, time) {
        if (scene.mode !== bmgl.SceneMode.SCENE3D) {
            return;
        }
        var icrfToFixed = bmgl.Transforms.computeIcrfToFixedMatrix(time);
        if (bmgl.defined(icrfToFixed)) {
            var camera = viewer.camera;
            var offset = bmgl.Cartesian3.clone(camera.position);
            var transform = bmgl.Matrix4.fromRotationTranslation(icrfToFixed);
            camera.lookAtTransform(transform, offset);
        }
    };

    var viewInICRF = function () {
        var a = viewer.clock.currentTime.secondsOfDay;
        rotateEventListener = function (e) {
            var i = viewer.clock.currentTime.secondsOfDay, t = ((i - a) / 1e3) * 0.4;
            a = i;
            viewer.scene.camera.rotate(bmgl.Cartesian3.UNIT_Z, -1 * t)
        };
        viewer.camera.flyHome(0);
        viewer.clock.multiplier = 200;
        viewer.clock.shouldAnimate = !0;
        viewer.clock.onTick.addEventListener(rotateEventListener);
    };

    var flyInACity = function () {
        viewer.scene.camera.flyTo({
            destination: bmgl.Cartesian3.fromDegrees(-73.98580932617188, 40.74843406689482, 363.34038727246224),
            complete: function () {
                setTimeout(function () {
                    viewer.camera.flyTo({
                        destination: bmgl.Cartesian3.fromDegrees(-73.98585975679403, 40.75759944127251, 186.50838555841779),
                        orientation: {
                            heading: bmgl.Math.toRadians(200.0),
                            pitch: bmgl.Math.toRadians(-50.0)
                        },
                        easingFunction: bmgl.EasingFunction.LINEAR_NONE
                    });
                }, 1000);
            }
        });
    };

    var losAngelesToTokyo = function (adjustPitch) {
        var camera = viewer.scene.camera;

        var tokyoOptions = {
            destination: bmgl.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
            orientation: {
                heading: bmgl.Math.toRadians(15.0),
                pitch: bmgl.Math.toRadians(-60),
                roll: 0.0
            },
            duration: 20,
            flyOverLongitude: bmgl.Math.toRadians(60.0)
        };

        var laOptions = {
            destination: bmgl.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
            duration: 5,
            orientation: {
                heading: bmgl.Math.toRadians(-15.0),
                pitch: -bmgl.Math.PI_OVER_FOUR,
                roll: 0.0
            }
        };
        laOptions.complete = function () {
            setTimeout(function () {
                camera.flyTo(tokyoOptions);
            }, 1000);
        };
        if (adjustPitch) {
            tokyoOptions.pitchAdjustHeight = 1000;
            laOptions.pitchAdjustHeight = 1000;
        }
        camera.flyTo(laOptions);
    };

    var flyOverLongitude = function (adjustPitch) {
        losAngelesToTokyo();
    };

    var flyOverLongitudeWithPitch = function () {
        losAngelesToTokyo(true);
    };

    function reset() {
        viewer.entities.removeAll();
        // viewer.scene.primitives.removeAll();
        // viewer.scene.tweens.removeAll();
        viewer.camera.lookAtTransform(bmgl.Matrix4.IDENTITY);
        rotateEventListener&&viewer.clock.onTick.removeEventListener(rotateEventListener);
        viewer.clock.shouldAnimate = 0;
        rotateEventListener = null;
        viewer.scene.preRender.removeEventListener(icrf);
        viewer.scene.globe.enableLighting = false;
    };
    avaliableOptions = [];
    avaliableOptions.push(new opt('飞到一个城市', flyInACity));
    avaliableOptions.push(new opt('飞往圣地亚哥', flyToSanDiego));
    avaliableOptions.push(new opt('飞到有航向、俯仰和滚转的位置', flyToHeadingPitchRoll));
    avaliableOptions.push(new opt('飞到我的位置', flyToLocation));
    avaliableOptions.push(new opt('飞到矩形', flyToRectangle));
    avaliableOptions.push(new opt('查看矩形', viewRectangle));
    avaliableOptions.push(new opt('设置相机框架', setReferenceFrame));
    avaliableOptions.push(new opt('设置相机的航向、俯仰和滚转位置', setHeadingPitchRoll));
    avaliableOptions.push(new opt('旋转球体', viewInICRF));
    avaliableOptions.push(new opt('从洛杉矶经欧洲飞往东京', flyOverLongitude));
    avaliableOptions.push(new opt('在飞行中向下看', flyOverLongitudeWithPitch));
    viewModel = {
        options: avaliableOptions,
        selectedOption: bmgl.knockout.observable(null),
        checkCamera: bmgl.knockout.observable(true),
        cameraEventInfo: bmgl.knockout.observable("")
    };
   
    bmgl.knockout.applyBindings(viewModel, document.getElementById('toolbar'));
    viewModel.selectedOption.subscribe(function (selected) {
        reset();
        selected._callback();
    });
</script>
</body>
</html>

效果图

标签:function,漫游,viewer,三维,camera,var,new,bmgl,源代码
来源: https://blog.51cto.com/u_15262562/2883417