Vue集成Cesium之二 —— 相机（Camera）

上一篇文章初步写了一下 vue 集成 cesium 方法和注意的地方。

最近因为项目中用到的地图资源并不是拿来就能用，需要调整显示的角度、缩放等设置。所以把 cesium 所有的相机（也就是视角）设置都体验了一遍，正好记录一下异同，分享出来。

笔者作为初探的小白，如有错漏还请看官指出加以改正。

Viewer.zoomTo(target, offset)

官方解释：
Asynchronously sets the camera to view the provided entity, entities, or data source. If the data source is still in the process of loading or the visualization is otherwise still loading, this method waits for the data to be ready before performing the zoom.
The offset is heading/pitch/range in the local east-north-up reference frame centered at the center of the bounding sphere. The heading and the pitch angles are defined in the local east-north-up reference frame. The heading is the angle from y axis and increasing towards the x axis. Pitch is the rotation from the xy-plane. Positive pitch angles are above the plane. Negative pitch angles are below the plane. The range is the distance from the center. If the range is zero, a range will be computed such that the whole bounding sphere is visible.

翻译成人话：
这个方法用来异步控制相机平面旋转、Z轴旋转和缩放（个人理解）。

首先说一下两个参数：
target：相机显示的焦点，可以是图像、实体等；
offset：就是上面说的旋转角度和缩放距离，这里接收一个 HeadingPitchRange 对象。

示例一：不做旋转设置

viewer.zoomTo(
  tileset, //通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
  new Cesium.HeadingPitchRange(0,0,0) //旋转缩放配置，默认为0不做旋转缩放
);

示例二：沿Z轴旋转

可以看到初始的图像不适合展示使用，那么首先旋转地图以看到正面。

viewer.zoomTo(
  tileset,//通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
  new Cesium.HeadingPitchRange( //旋转缩放配置，默认为0不做旋转缩放
    0,
    -0.5,//Z轴旋转角度
    0
  )
);

示例二：缩放设置

通过旋转图像可以看到地图的全景了，但是项目需求我们显示某个区域的图像，而不是现在这种满屏黑色背景。

所以需要设置缩放，这里缩放不同于高德百度那种设置缩放的级别，这里是通过设置相机的显示距离进行缩放。

viewer.zoomTo(
  tileset,//通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
  new Cesium.HeadingPitchRange( //旋转缩放配置，默认为0不做旋转缩放
    0,
    -0.5,//Z轴旋转角度
    500//设置显示距离
  )
);

示例三：平面旋转（或Y轴旋转）

viewer.zoomTo(
  tileset,//通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
  new Cesium.HeadingPitchRange( //旋转缩放配置，默认为0不做旋转缩放
    0.5,
    -0.5,//Z轴旋转角度
    500//设置显示距离
  )
);

可以看到相较于前面的视角，逆时针旋转。如果这里看的不明显，可以通过鼠标控制相机高度。可以对比示例二中图像的方向，就比较明显了。

Viewer.flyTo(target, options)

官方解释：
Flies the camera to the provided entity, entities, or data source. If the data source is still in the process of loading or the visualization is otherwise still loading, this method waits for the data to be ready before performing the flight.
The offset is heading/pitch/range in the local east-north-up reference frame centered at the center of the bounding sphere. The heading and the pitch angles are defined in the local east-north-up reference frame. The heading is the angle from y axis and increasing towards the x axis. Pitch is the rotation from the xy-plane. Positive pitch angles are above the plane. Negative pitch angles are below the plane. The range is the distance from the center. If the range is zero, a range will be computed such that the whole bounding sphere is visible.

感觉跟 zoomTo 方法的解释没有，太大区别。唯一的区别我感觉就是同步异步的问题，zoomTo 官方说明是异步设置相机角度，具体我们感受太出来，因为加载都挺慢的。

但是 flyTo 方法肯定是同步的没毛病，因为它的 options 有一个参数 duration ，是相机视角转移到指定图像的时间。并且实际开发中可以看出来视角转移的过程，是图像首先加载出来后，再转移相机视角。

option

配置项有三个：
duration：相机移动到指定的图像用时，默认3秒
maximumHeight：限制相机最大高度，不过我尝试了几种设置还没有说明效果，并没有影响图像显示
offset：接收一个 HeadingPitchRange 对象，同zoomTo方法的效果

示例一 无配置项

viewer.flyTo(
  tileset //通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
)

可以看到方法自动设置了相机的旋转和缩放，不再是初始的图像。

示例二 配置旋转缩放

viewer.flyTo(
  tileset, //通过 new Cesium3DTileset 创建的图像，使相机聚焦图像位置
  {
     duration:1,
     maximumHeight:0.5,
     offset:new Cesium.HeadingPitchRange(
       0.5,
       -0.5,
       500
     )
   }
)

运行后的效果和 zoomTo 方法一致，处理有1秒的移动动画，其它没有区别。

所以 flyTo 和 zoomTo 两个方法看起来差别就在同步和异步上，各位根据自己需求取舍。