cesium-剖面分析-编程知识

cesium-剖面分析

直接上代码

<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);//赋值给tilesettileSet._root.transform = m;
}
</script>
<style scoped>
#cesiumContainer {overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner, .el-breadcrumb__separator {color: #ffffff !important;
}
</style>

效果图