很多时候需要实现一个镜头飞入目标的动画效果，也就是刚进入页面的时候从默认位置旋转地球到目标点，并逐渐放近镜头的动画，Cesium提供一个fly的动画效果，设置目标点的经纬度和高度，以及设置对准目标点时镜头的角度，这里根据上一篇的内容将镜头逐渐拉到中国地图中首都北京的位置，并设置动画时长为5秒，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<div id="credit"></div>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'token';
//初始化div容器为cesium
var viewer = new Cesium.Viewer('cesiumContainer');
//加载geojson文件
let geojson = Cesium.GeoJsonDataSource.load('china.json', {
//设置边框为蓝色
stroke: Cesium.Color.BLUE,
//设置填充区域为半透明的粉色
fill: Cesium.Color.PINK.withAlpha(0.5),
//设置边框宽度为3
strokeWidth: 3
})
//将geojson文件添加到场景中
viewer.dataSources.add(geojson);
// 设置目标位置的经纬度和高度
var destination = Cesium.Cartesian3.fromDegrees(115.7, 39.54, 100000);
var orientation = {
heading: Cesium.Math.toRadians(0), // 水平方向的旋转角度
pitch: Cesium.Math.toRadians(-90), // 俯仰角度
roll: 0 // 翻滚角度
};
//摄像机飞入操作，设置目标点和相机角度，以及整个过程的动画时长，Cesium会根据整个动画时长来设置飞入动画的整个事件进度
viewer.camera.flyTo({
destination: destination,
orientation: orientation,
duration: 5 // 过渡动画的持续时间（秒）
});
</script>
</div>
</body>
</html>
因为这里不支持上传视频，就不放效果图了，想看效果可以把上面部分的代码复制下来，设置好token和geojson文件，打开看下效果，如果有问题可以在评论区给我留言。
标签：动画,镜头,geojson,设置,Cesium,飞入 From： https://blog.51cto.com/BakerZhuang/7417346