Cesium 全景漫游

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/caozl1132/article/details/88248250

这两天由于别人提出的需求，在cesium上加载全景漫游功能，于是自己也仿照别人网站的案例模拟写了一个全景漫游功能；

先晒个成果：

这是提前设定好的路径进行漫游，也可以自己绘制路径进行漫游；也可以在漫游过程中动态改变漫游姿态；

下面为面板：

以下为部分核心代码，后续会慢慢上传代码：

//开始漫游	
			var f_property = $this.setProperty(paths, times);
			$this.flightEntity = viewer.entities.add({
				position: f_property,
				orientation: new Cesium.VelocityOrientationProperty(f_property),
				point: {
					color: new Cesium.Color.fromCssColorString("#FFFF00").withAlpha(0.2),
					pixelSize: 1
				},
			});
			viewer.trackedEntity = $this.flightEntity;

			//视角变换
			var matrix3Scratch = new Cesium.Matrix3();
			function getModelMatrix(entity, time, result) {
				var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());
				if (!Cesium.defined(position)) {
					return undefined;
				}
				var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());
				if (!Cesium.defined(orientation)) {
					result = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, result);
				} else {
					result = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, matrix3Scratch),
						position, result);
				}
				return result;
			}

			var scratch = new Cesium.Matrix4();
			$this.renderListener = function(e) {
				var time = viewer.clock.currentTime.secondsOfDay - viewer.clock.startTime.secondsOfDay;
				//viewer.camera.positionCartographic.height = 2000 + $this.limitCamera(f_property);
				if ($this.flightEntity && $this.isFollowModel) {
					getModelMatrix($this.flightEntity, viewer.clock.currentTime, scratch);

					var transformX = $this.followedX || 50; //距离运动点的距离（后方） 
					var transformZ = $this.followedZ || 10; //距离运动点的高度（上方）
					viewer.scene.camera.lookAtTransform(scratch, new Cesium.Cartesian3(-transformX, 0, transformZ));
				}
			}
			viewer.scene.preRender.addEventListener($this.renderListener);