ArcGIS js 模型飞行浏览学习笔记_view.goto

在现有的arcgis js api 4.x中没有现成的飞行浏览接口，需要我们自己使用view.goTo()函数实现。通过查找相关资料，本文利用goTo（）函数，实现了arcgis js中的飞行浏览模拟功能。

首先创建一个三维视图

使用arcgis js中的sceneView创建三维视图，具体代码如下：

			var map = new Map({
            	basemap: "satellite",
           		 ground: "world-elevation"
         	 	});
          	var view = new SceneView({
           		 	container: "earthContainer", 
            		map: map,
            	});
1
2
3
4
5
6
7
8

利用view.goTo()函数模拟飞行

创建一个函数flyLine进行飞行函数的模型(本文使用随机位置进行飞行模型，及纬度每次增加0.0001)，大家可以根据自己项目的需要将函数绑定到click、checked等作为触发函数，flyLine函数的具体代码为：

flyLine() {
      let view = this.getViewer;
      let flyMoveUnit = 0.0001;
      let flyLatitude = 35;
      let flyLongitude = 111;
      let flyInterval  = null;
     
        view.goTo({ zoom: 17, tilt: 75, center: [flyLongitude, flyLatitude] })
          .then(function() {
            flyInterval = window.setInterval(function() {
              flyLongitude = flyLongitude;
              flyLatitude = flyLatitude + flyMoveUnit;
              view.goTo(
                {
                  zoom: 17,
                  tilt: 80,
                  center: [flyLongitude, flyLatitude]
                },
                {
                  easing: "linear", //动画效果  linear为线性速度
                  speedFactor: 1  //速度因素，相机移动的速度参数，默认为1
                }
              );
            }, 80);           //setInterval间隔时间
          });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

通过goTo()函数可在arcgis web端实现飞行浏览模拟。

arcgis js的飞行浏览主要不断更新goTo()函数中center参数进行模拟飞行，这里的center参数代表的是SceneView.center ，我们每次不断修改的是SceneView的中心点，然后利用arcgis中animate动画的形式跳转到下一个视图中心点，以模拟飞行的效果。如果我们不断地修改position 参数，那么我们修改的就是camera.position，这时相机位置会不断修改，跳转效果将是相机的位置跳转，不能保持相机的平稳飞行，模拟飞行浏览的效果不好。

goTo(target, options)参数介绍：

target包括：
①target 【Number[]|Geometry|Geometry[]|Graphic|Graphic[]|Viewpoint|Camera|Object】
视图动画跳转的目标，可以是位置，几何，图形等等。
②center 【Number[]|Point】
将要跳转过去的SceneView.center
③scale 【Number[]】
设置将要跳转过得SceneView.scale 比例
④zoom 【Number[]】
设置最终跳转后的zoom值（放大还是缩小）
⑤heading 【Number[]】
设置相机的heading属性。heading值在地球视图中，以正北方向值为0，顺时针增加，如：正东方向为90，范围是0-360
⑥tilt 【Number[]】
设置相机的tilt属性。tilt属性值在地球视图中，相机垂直地面的方向为0，当相机平行于表面时为90度。
⑦position 【Point】
设置Camera.position的属性。设置最终相机的位置。
options包括：
①animate 【Boolean】
默认值: true
指示是否应动画化到新视图的转换。如果设置为false，则忽略speedFactor, duration, maxDuration, 和 easing参数。
②speedFactor 【Number[]】
默认值：1
用来设置动画的速度，如果设置为2，则飞行速度比默认速度增加一倍，以此类推。
③duration 【Number[]】
设置动画的精确持续时间（以毫秒为单位）
④maxDuration 【Number[]】
动画允许的最大持续时间（以毫秒为单位）
⑤easing 【String|EasingFunction】
设置动画中的飞行效果。默认的飞行效果（速度曲线）有：linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo, in-out-coast-quadratic。默认是：其中小于1000毫秒的动画使用out-expo；更长的时间使用in-out-coast-quadratic。如果你想要飞行效果匀速飞行，那么你设置easing为linear即可。

easing常用的效果曲线图解释（jQuery UI中，可作为大家参考）：