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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  6.     <title>Intro to SceneView - Create a 3D map</title>
  7.     <style type="text/css">
  8.         html, body, #viewDiv { height: 100%; width: 100%; }
  9.         #optionsDiv { background-color: white; position: absolute; left: 100px; top: 30px; z-index: 100; }
  10.     </style>
  11.     <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
  12.     <script type="text/javascript" src="https://js.arcgis.com/4.5/"></script>
  13.     <script>
  14.         require([
  15.             "esri/Map",
  16.             "esri/Basemap",
  17.             "esri/views/MapView",
  18.             "esri/views/SceneView",
  19.             "dojo/domReady!"
  20.         ], function (Map, Basemap, MapView, SceneView) {
  21.             var map = new Map({
  22.                 "basemap": "hybrid",
  23.                 "ground": "world-elevation"
  24.             });
  25.             var view = new SceneView({
  26.                 "map": map,
  27.                 "container": "viewDiv"
  28.             });
  29.  
  30.             view.then(function () {
  31.                 /**
  32.                  * ------------------------------------------------------------------------------------------------------------------------------------
  33.                  * 指定两个点之间飞行，并按指定飞行比例的速度进行飞行
  34.                  * ------------------------------------------------------------------------------------------------------------------------------------
  35.                  */
  36.                 dojo.connect(dojo.byId("btnFlyTwoPoint"), "onclick", function () {
  37.                     view.goTo({"zoom": 16, "tilt": 75, "center": [111.52, 28.55]})
  38.                         .then(function () {
  39.                             view.goTo(function () {
  40.                                 var camera = view.camera.clone();
  41.                                 camera.position.latitude += 0.11;
  42.                                 camera.position.longitude += 0.02;
  43.                                 console.info(camera.position);
  44.                                 return camera;
  45.                             }(), {
  46.                                 "easing": "linear",
  47.                                 "speedFactor": 0.1
  48.                             });
  49.                         });
  50.                 });
  51.  
  52.                 /**
  53.                  * ------------------------------------------------------------------------------------------------------------------------------------
  54.                  * 任意点随机飞行
  55.                  * ------------------------------------------------------------------------------------------------------------------------------------
  56.                  */
  57.                 var flyInterval = null;
  58.                 var flyMoveUnit = 0.0001;
  59.                 var flyLatitude = 27.3779;
  60.                 var flyLongitude = 111.5332;
  61.                 dojo.connect(dojo.byId("chkFlyAnyPoint"), "onclick", function () {
  62.                     if (this.checked) {
  63.                         view.goTo({"zoom": 17, "tilt": 75, "center": [flyLongitude, flyLatitude]})
  64.                             .then(function () {
  65.                                 flyInterval = window.setInterval(function () {
  66.                                     flyLongitude = flyLongitude + flyMoveUnit;
  67.                                     flyLatitude = flyLatitude + flyMoveUnit;
  68.                                     view.goTo({
  69.                                         "zoom": 17,
  70.                                         "tilt": 75,
  71.                                         "center": [flyLongitude, flyLatitude]
  72.                                     });
  73.                                 }, 80);
  74.                             });
  75.  
  76.                     }
  77.                     else {
  78.                         window.clearInterval(flyInterval);
  79.                     }
  80.                 });
  81.             });
  82.         });
  83.     </script>
  84. </head>
  85. <body>
  86. <div id="optionsDiv">
  87.     <div>飞行模式：任意点飞行<input type="checkbox" id="chkFlyAnyPoint"/></div>
  88.     <div>飞行模式：两点之间飞行<input type="checkbox" id="btnFlyTwoPoint"/></div>
  89. </div>
  90. <div id="viewDiv"></div>
  91. </body>
  92. </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. Web安全之Cookie劫持

    1. Cookie是什么? 2. 窃取的原理是什么? 3. 系统如何防Cookie劫持呢? 看完这三个回答, 你就明白哪位传奇大侠是如何成功的!!! Cookie: HTTP天然是无状态的协议, 为了 ...

  2. (转)在server 2008R2组策略设置所有域计算机防火墙都处于更关闭状态

    组策略在域控中相当重要,我们可以下放一个组策略去统一管理下面客户端的配置,具体配置如下: 首先点击开始____管理工具____组策略管理 防火墙关闭完之后我们该如何到客户端验证呢? 首先我们需要现在客 ...

  3. POS的一点杂笔

    仅限于POS 仅限于POS 仅限于POS A 字母字符 N 数字 S 特殊字符 an 字母和数字字符 as 字母和特殊字符 ns 数字和特殊字符 ans 字母.数字和特殊字符 MM 月份 DD 日期 ...

  4. 【习题 5-11 UVA 12504 】Updating a Dictionary

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 不确定某个map里面是否有某个关键字的时候. 要用find来确定. 如果直接用访问下标的形式去做的话. 会强行给他加一个那个关键字( ...

  5. 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径

    转自原文 请求筛选模块被配置为拒绝包含 hiddenSegment 节的 URL 中的路径. 打开C:\Windows\System32\inetsrv\config路径 找到applicationH ...

  6. [Yarn] A JavaScript Package Manager

    Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how ...

  7. SDK应该包括什么东西

    作者:朱金灿 来源:http://blog.csdn.net/clever101 如果让你设计和开发一个SDK(软件二次开发包),你认为里面应该有什么东西?首先接口文件和库文件之类是必不可少的,否则别 ...

  8. AngularJS之ng-options指令

    1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller=&qu ...

  9. 【42.38%】【BZOJ 3196】二逼平衡树

    Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1363 Solved: 579 [Submit][Status][Discuss] Descripti ...

  10. 配置java 环境变量（jdk）

    java环境变量需要配置3个: JAVA_HOME:D:\Program Files (x86)\Java\jdk1.8 CLASSPATH:.;%JAVA_HOME%\lib\dt.jar;%JAV ...