其实就只是用到了 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>

Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果的更多相关文章

  1. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  3. Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果

    一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...

  4. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  5. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  6. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  7. Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示

    在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...

  8. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

  9. Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作

    1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...

随机推荐

  1. AspJpeg2.0组件教程完整版 aspjpeg教程...

    AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件,网络上对其进行详细和深入介绍的中文文章并不多,即使有一般也只是牵涉到图片缩略图和图片水印,这与其为英文版本有着密切的关系 ...

  2. ARM+linux学习过程（2）安装vmware-tool过程与错误解决

    安装: 点击Ubuntu VMware菜单的-VM-Install VMware Tools 这时,在Ubuntu下会自动加载Linux版的VMware Tools的安装光盘镜像.你会看到虚拟机的桌面 ...

  3. [Angular] Test component template

    Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...

  4. 通过onTouch来确定点击的是listView哪一个item

    事实上这主要是用了ListView的一个方法,通过坐标就能够确定当前是哪一个listView,别的我就不多说了直接看看代码吧, lv_flide.setOnTouchListener(new OnTo ...

  5. js进阶正则表达式5几个小实例（原样匹配的字符在正则中原样输出）（取反^）

    js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^) 一.总结 原样匹配的字符在正则中原样输出:var reg4=/第[1-2][0-9]章/g //10-29 取反^:var ...

  6. 【心情】bjdldrz

    如果我对勇士的记忆停留在73胜10负,

  7. Android JNI编程（四）——C语言多级指针、数组取值、从控制台输入数组

    版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 一:前面我们介绍了一级指针的相关概念和用发,今天我们就来说一说多级指针. 1 ...

  8. 【u002】数列排序(seqsort)

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交 ...

  9. C# WebQQ协议群发机器人(一)

    原创性申明 本文地址 http://blog.csdn.net/zhujunxxxxx/article/details/38931287 转载的话请注明出处. 之前我也写过一篇使用python来实现的 ...

  10. Java-Maven项目引入UEditor图片上传组件jar包类库的5种方式

    最近,硬是和百度的UEditor组件杠上了.自己的个人官网项目,很容易就搞定了,公司的项目,尼玛,各种问题.项目多了,环境复杂了,解决问题的方法也得不断调整. 项目用Maven管理jar包,用到了UE ...