vue3+Cesium 视角卫星以及时间轴初始化

最新推荐文章于 2024-09-06 23:59:38 发布

李富贵~

最新推荐文章于 2024-09-06 23:59:38 发布

阅读量654

点赞数 8

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/iouytrep/article/details/135381703

版权

视角飞行

const fly = (lon, lat, height) => {
	viewer.camera.flyTo({
		// 从以度为单位的经度和纬度值返回笛卡尔3位置。
		destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),
		orientation: {
			// heading：默认方向为正北，正角度为向东旋转，即水平旋转，也叫偏航角。
			// pitch：默认角度为-90，即朝向地面，正角度在平面之上，负角度为平面下，即上下旋转，也叫俯仰角。
			// roll：默认旋转角度为0，左右旋转，正角度向右，负角度向左，也叫翻滚角
			heading: Cesium.Math.toRadians(0.0), // 正东，默认北
			pitch: Cesium.Math.toRadians(-90), // 向正下方看
			roll: 0.0, // 左右
		},
		duration: 1, // 飞行时间（s）
	})
}

fly (lon, lat, height + 10050000)

时间轴初始化

window.viewer = new Cesium.Viewer('cesium-container', {
homeButton: true,
		sceneModePicker: true, // 23D切换
		baseLayerPicker: false, // 影像切换
		animation: true, // 是否显示动画控件
		infoBox: false, // 是否显示点击要素之后显示的信息
		selectionIndicator: true, // 要素选中框
		geocoder: false, // 是否显示地名查找控件
		timeline: true, // 是否显示时间线控件
		fullscreenButton: false, //全屏

})
//初始化时间轴
	Cesium.Timeline.prototype.makeLabel = CesiumDateTimeFormatter;
	viewer.animation.viewModel.dateFormatter = CesiumDateFormatter;
	viewer.animation.viewModel.timeFormatter = CesiumTimeFormatter;

const CesiumTimeFormatter = (datetime, viewModel) => {
	var julianDT = new Cesium.JulianDate();
	Cesium.JulianDate.addHours(datetime, 8, julianDT);
	var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
	let hour = gregorianDT.hour + '';
	let minute = gregorianDT.minute + '';
	let second = gregorianDT.second + '';
	return `${hour.padStart(2, '0')}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`;
};
// cesium时钟日期格式化函数
const CesiumDateFormatter = (datetime, viewModel, ignoredate) => {
	var julianDT = new Cesium.JulianDate();
	Cesium.JulianDate.addHours(datetime, 8, julianDT);
	var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);

	return `${gregorianDT.year}年${gregorianDT.month}月${gregorianDT.day}日`;
};
// cesium时间轴格式化函数
const CesiumDateTimeFormatter = (datetime, viewModel, ignoredate) => {
	var julianDT = new Cesium.JulianDate();
	Cesium.JulianDate.addHours(datetime, 8, julianDT);
	var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
	let hour = gregorianDT.hour + '';
	let minute = gregorianDT.minute + '';
	return `${gregorianDT.day}日${hour.padStart(2, '0')}:${minute.padStart(2, '0')}`;
};