zoukankan      html  css  js  c++  java
  • Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果

    其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo()。代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Intro to SceneView - Create a 3D map</title>
        <style type="text/css">
            html, body, #viewDiv { height: 100%; width: 100%; }
            #optionsDiv { background-color: white; position: absolute; left: 100px; top: 30px; z-index: 100; }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
        <script type="text/javascript" src="https://js.arcgis.com/4.5/"></script>
        <script>
            require([
                "esri/Map",
                "esri/Basemap",
                "esri/views/MapView",
                "esri/views/SceneView",
                "dojo/domReady!"
            ], function (Map, Basemap, MapView, SceneView) {
                var map = new Map({
                    "basemap": "hybrid",
                    "ground": "world-elevation"
                });
                var view = new SceneView({
                    "map": map,
                    "container": "viewDiv"
                });
    
                view.then(function () {
                    /**
                     * ------------------------------------------------------------------------------------------------------------------------------------
                     * 指定两个点之间飞行,并按指定飞行比例的速度进行飞行
                     * ------------------------------------------------------------------------------------------------------------------------------------
                     */
                    dojo.connect(dojo.byId("btnFlyTwoPoint"), "onclick", function () {
                        view.goTo({"zoom": 16, "tilt": 75, "center": [111.52, 28.55]})
                            .then(function () {
                                view.goTo(function () {
                                    var camera = view.camera.clone();
                                    camera.position.latitude += 0.11;
                                    camera.position.longitude += 0.02;
                                    console.info(camera.position);
                                    return camera;
                                }(), {
                                    "easing": "linear",
                                    "speedFactor": 0.1
                                });
                            });
                    });
    
                    /**
                     * ------------------------------------------------------------------------------------------------------------------------------------
                     * 任意点随机飞行
                     * ------------------------------------------------------------------------------------------------------------------------------------
                     */
                    var flyInterval = null;
                    var flyMoveUnit = 0.0001;
                    var flyLatitude = 27.3779;
                    var flyLongitude = 111.5332;
                    dojo.connect(dojo.byId("chkFlyAnyPoint"), "onclick", function () {
                        if (this.checked) {
                            view.goTo({"zoom": 17, "tilt": 75, "center": [flyLongitude, flyLatitude]})
                                .then(function () {
                                    flyInterval = window.setInterval(function () {
                                        flyLongitude = flyLongitude + flyMoveUnit;
                                        flyLatitude = flyLatitude + flyMoveUnit;
                                        view.goTo({
                                            "zoom": 17,
                                            "tilt": 75,
                                            "center": [flyLongitude, flyLatitude]
                                        });
                                    }, 80);
                                });
    
                        }
                        else {
                            window.clearInterval(flyInterval);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
    <div id="optionsDiv">
        <div>飞行模式:任意点飞行<input type="checkbox" id="chkFlyAnyPoint"/></div>
        <div>飞行模式:两点之间飞行<input type="checkbox" id="btnFlyTwoPoint"/></div>
    </div>
    <div id="viewDiv"></div>
    </body>
    </html>
  • 相关阅读:
    Codeforces Round #239(Div. 2) 做后扯淡玩
    hdu 3507 Print Article
    prufer序列
    POJ 2778 DNA Sequence
    Codeforces Round #237 (Div. 2)
    poj3352
    图论知识
    POJ 2186
    Codeforces Round #236 (Div. 2)
    POJ 2823 Sliding Window
  • 原文地址:https://www.cnblogs.com/tracine0513/p/8063879.html
Copyright © 2011-2022 走看看