Cesium：入门教程（三）之视窗配置

Scene

    涉及到与 viewer.scene 进行交互，该类控制了viewer中的所有图形元素。

    在初始化视图之前，先学下基本的cesium 类型：

• Cartesian3：三维笛卡尔直角坐标 – 当用来表示位置的时候，这个坐标指在地固坐标系下，相对地球中心的坐标位置，单位是米。（可以看作，以椭球中心为原点的空间直角坐标系中的一个点的坐标

new Cesium.Cartesian3(x, y, z)

图源： Cesium中的几种坐标和相互转换【转】 - 3D入魔 - 博客园

      地固坐标系也称地球坐标系，是固定在地球上与地球一起旋转的坐标系。根据坐标系原点位置的不同，地固坐标系分为地心坐标系(原点与地球质心重合)和参心坐标系(原点与参考椭球中心重合)，以地心为原点的地固坐标系也称为地心地固坐标系(ECEF)。无论是参心坐标系还是地心坐标系均可分为空间直角坐标系和大地坐标系两种形式。 

• Cartographic：由经度（弧度radian）、纬度（弧度radian）和WGS84椭球面高度确定的位置（单位：米）。

new Cesium.Cartographic(longitude, latitude, height)

• HeadingPitchRoll：在东北向坐标系中，相对坐标轴的旋转（弧度）。Heading 相对负z轴（垂直向下）， Pitch 相对负y轴，Roll 相对正x轴。通过实体与笛卡儿坐标系三个坐标轴的的夹角来确定实体在三维空间中的方向 [ 详情 ]

new Cesium.HeadingPitchRoll(heading, pitch, roll)

• Quaternion：以4D坐标表示的3D旋转。

new Cesium.Quaternion(x, y, z, w)

Camera

   Camera Control

    Camera 是 viewer.scene 的一个属性，用来控制当前可见范围。我们可以通过直接设置它的位置和方向来控制相机，或者通过使用Cesium提供的API来控制相机。

    一些最常用的方法:

• Camera.setView(options) : 设置相机位置和朝向。
• Camera.zoomIn(amount) : 沿着相机方向移动相机。
• Camera.zoomOut(amount) : 沿着相机方向远离。
• Camera.flyTo(options) : 创建从一个位置到另一个位置的相机飞行动画。
• Camera.lookAt(target, offset) : 依据目标偏移来设置相机位置和朝向。
• Camera.move(direction, amount) : 沿着direction方向移动相机。
• Camera.rotate(axis, angle) : 绕着任意轴旋转相机。

    官方提供的Demo，可以帮助我们更好了解

Cesium Sandcastle

Cesium Sandcastle

    把相机位置放置到纽约。分别使用一个 Cartesian3表示位置，一个HeadingPitchRoll表示朝向。

// 创建相机初始位置和朝向
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// 设置视图
viewer.scene.camera.setView(homeCameraView);

    实际上，我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角，我们可以重写按钮，使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画，然后添加一个取消默认航班的事件侦听器，并调用FlyTo()我们的Home视角：

// viewer.scene.camera.setView(homeCameraView);

// 增加相机飞行动画参数
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

   Camera  Mode

    在两种相机模式下可以简单的切换：

• Free Mode（自由模式）：默认的相机控制方式
• Drone Mode（无人机模式）：以一个固定距离跟随无人机

    自由模式不需要代码，因为它使用默认控件。至于无人机跟随模式，我们可以使用摄像机的内置实体跟踪功能来定位摄像机，并用偏移量定位无人机。这就使得相机即使在移动时也能从指定的实体中得到固定的偏移量。为了跟踪一个实体，我们简单地设置viewer.trackedEntity。要切换到自由相机模式，我们可以将viewer.trackedEntity实体设置为未定义，然后使用camera.flyTo()返回到我们的Home视角。

function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

Clock Control

    Cesium使用 JulianDate 描述某个时刻，这个时间存储了自从公元前4712年1月1日中午的天数。为了提高精度，这个类里分开存储了时刻的日期部分和时刻的秒部分。为了数学运算的安全和闰秒的问题，这个时刻是按照国际原子时标准存储的。

Cesium Sandcastle

    一些关于scene中时间的配置选项，设置场景动画的速率、开始和停止时间，并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围：（运行效果和上图类似，就不贴图了。

// 设置时钟和时间线
viewer.clock.shouldAnimate = true; // 当viewer开启后，启动动画
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // 设置加速倍率
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环播放
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // 设置时间的可见范围

参考

    Cesium中的几种坐标和相互转换

    Cesium坐标转换

    Cesium入门8 - Configuring the Scene - 配置视窗

    Ceisum官方教程2 -- 项目实例

系列

    Cesium：入门教程（一）之 Hello World

    Cesium：入门教程（二）之数据源加载

    Cesium：入门教程（三）之视窗配置

    Cesium：入门教程（四）之 Entities

    Cesium：入门教程（五）之 3D Tiles

    Cesium：入门教程（六）之 交互性（Interactivity）