Cesium做镜头飞入目标的动画_cesiumjs 地球进入动画-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/132972251

很多时候需要实现一个镜头飞入目标的动画效果，也就是刚进入页面的时候从默认位置旋转地球到目标点，并逐渐放近镜头的动画，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文件，打开看下效果，如果有问题可以在评论区给我留言。