欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 21:13:02
三维地图服务器下载地址:http://download.bigemap.com/bm3Dserver.rar (最新版)安装以上SDK后,启动,启动面板上找到开发使用,如下图源代码://注释:安装地图服务器后,下列代码中的 http://bigemap.com 替换成 http://localhost ,其他不变

三维地图服务器 下载地址: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, onError, 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 onError(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>

效果图

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

本文地址:https://blog.csdn.net/bigemap/article/details/107385972