cesium-剖面分析

醉书生ꦿ℘゜এ

于 2024-03-26 17:15:04 发布

阅读量462

点赞数 3

分类专栏： cesium 文章标签： vue.js cesium

本文链接：https://blog.csdn.net/zslsh44/article/details/137051853

版权

cesium 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

直接上代码

<template>
	<div id="cesiumContainer" class="content"></div>
	<div id="toolbar" class="nameButton">
		<el-breadcrumb :separator-icon="ArrowRight">
			<el-breadcrumb-item>三维分析</el-breadcrumb-item>
			<el-breadcrumb-item>剖面分析</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row class="mb-4 nameButton1">
			<el-button type="primary" @click="handleProfile">剖面</el-button><!--
			<el-button type="primary" @click="handleProfileCancel">清除</el-button>-->
		</el-row>
	</div>
	<div id="profileChart" ref="echartsRef" style="position:fixed;bottom:0;right:0;width:50vw;height: 200px;"></div>
</template>
<script setup>
import {ArrowRight} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesiumHide.js";
import ProfileAnalysis from '@/view/cesiumDemoG/js/8/007/ProfileAnalysis.js'

let viewer = null;
let tileset = null;


onMounted(() => {
	let initCesium = new InitCesium('cesiumContainer');
	viewer = initCesium.initViewer({});
	flyToRight2();
	viewer.scene.globe.depthTestAgainstTerrain = true;
})

const handleProfile = () => {
	let profileAnalysis = new ProfileAnalysis(viewer, document.getElementById("profileChart"));
	profileAnalysis.start();
}

const flyToRight2 = async () => {
	tileset = await Cesium.Cesium3DTileset.fromUrl('/src/assets/tileset/12/tileset.json', {});

	update3dtilesMaxtrix(tileset);
	viewer.scene.primitives.add(tileset);
	viewer.flyTo(tileset);

	/*viewer.camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(113.06408124924124, 22.64479293609514, 800.0), // 设置位置
		orientation: {
			heading: Cesium.Math.toRadians(20.0), // 方向
			pitch: Cesium.Math.toRadians(-90.0),// 倾斜角度
			roll: 0
		},
		duration: 5, // 设置飞行持续时间，默认会根据距离来计算
		complete: function () {
			// 到达位置后执行的回调函数
		},
		cancle: function () {
			// 如果取消飞行则会调用此函数
		},
		pitchAdjustHeight: -90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
		maximumHeight: 5000, // 相机最大飞行高度
		flyOverLongitude: 100, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度(这个，很好用)
	});*/
}

function update3dtilesMaxtrix(tileSet) {
	//调整参数
	let params = {
		tx: 113.06265738392063, //模型中心X轴坐标（经度，单位：十进制度）
		ty: 22.646603971034342, //模型中心Y轴坐标（纬度，单位：十进制度）
		tz: 45, //模型中心Z轴坐标（高程，单位：米）
		rx: 0, //X轴（经度）方向旋转角度（单位：度）
		ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
		rz: 0, //Z轴（高程）方向旋转角度（单位：度）
		scale: 1.35, //缩放比例
	};
	//旋转
	const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
	const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
	const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
	const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
	const rotationY = Cesium.Matrix4.fromRotationTranslation(my);
	const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
	//平移
	const position = Cesium.Cartesian3.fromDegrees(
		params.tx,
		params.ty,
		params.tz
	);
	const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
	//旋转、平移矩阵相乘
	Cesium.Matrix4.multiply(m, rotationX, m);
	Cesium.Matrix4.multiply(m, rotationY, m);
	Cesium.Matrix4.multiply(m, rotationZ, m);
	//比例缩放
	const scale = Cesium.Matrix4.fromUniformScale(params.scale);
	Cesium.Matrix4.multiply(m, scale, m);
	// console.log("矩阵m:", m);
	//赋值给tileset
	tileSet._root.transform = m;
}
</script>
<style scoped>
#cesiumContainer {
	overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner, .el-breadcrumb__separator {
	color: #ffffff !important;
}
</style>

效果图