cesium通视分析
全部代码
<template>
<div id="cesiumContainer" style="height: 100vh;"></div>
<div id="toolbar" style="position: fixed;top:20px;left:220px;">
<el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item>三维分析</el-breadcrumb-item>
<el-breadcrumb-item>多点通视</el-breadcrumb-item>
</el-breadcrumb>
<el-row class="mb-4" style="margin-top: 15px">
<el-button type="primary" @click="handleIntervisibility">分析</el-button>
<el-button type="primary" @click="handleIntervisibilityCancel">清除</el-button>
</el-row>
</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";
let viewer = null;
const clouds = new Cesium.CloudCollection();
let obj = {
startpointStyle: {
image: '/src/assets/image/shexiangji.png',
text: '观察点',
pixelOffsetX: 10,
pixelOffsetY: 10
},
endpointStyle: {
image: '/src/assets/image/qidian.png',
text: '目标点',
pixelOffsetX: 10,
pixelOffsetY: 10
}
}
onMounted(() => {
let initCesium = new InitCesium('cesiumContainer');
viewer = initCesium.initViewer({});
flyToRight2();
viewer.scene.globe.depthTestAgainstTerrain = false;
})
let positions = [];
let markers = [];//点实体
let lineEntity = [];
const handleIntervisibility = () => {
let CesiumEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
viewer.scene.globe.depthTestAgainstTerrain = true;
CesiumEventHandler.setInputAction(function (movement) {
let cartesian = viewer.scene.pickPosition(movement.position);
let cartographic = Cesium.Cartographic.fromCartesian(cartesian)
let longitude = Cesium.Math.toDegrees(cartographic.longitude)
let latitude = Cesium.Math.toDegrees(cartographic.latitude)
let height = cartographic.height
let position1 = Cesium.Cartesian3.fromDegrees(longitude, latitude, 10);
if (cartesian) {
if (markers.length === 0) {
positions.push(position1);//加点
//创建点实体
const startpoint = viewer.entities.add({
position: position1,
// position: cartesian,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
point: {
color: Cesium.Color.RED,
pixelSize: 10,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2
}
});
console.log(startpoint);
markers.push(startpoint);
} else if (markers.length >= 1) {
positions.push(cartesian);//加点
const endpoint = viewer.entities.add({
position: cartesian,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
point: {
color: Cesium.Color.YELLOW,
pixelSize: 10,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2
}
});
markers.push(endpoint);
// CesiumEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左键事件
let linePoint = [];
linePoint.push(positions[0]);
linePoint.push(positions[positions.length - 1]);
analysisVisible(linePoint);//开始分析
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
CesiumEventHandler.setInputAction(function (movement) {
CesiumEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除左键事件
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
const analysisVisible = (positions) => {
// 计算射线的方向
let direction = Cesium.Cartesian3.normalize(
Cesium.Cartesian3.subtract(
positions[1],
positions[0],
new Cesium.Cartesian3()
),
new Cesium.Cartesian3()
);
// 建立射线
let ray = new Cesium.Ray(positions[0], direction);
// 计算交互点，返回第一个
let result = viewer.scene.pickFromRay(ray);
// console.log(result)
if (Cesium.defined(result) && Cesium.defined(result.object)) {
drawLine(result.position, positions[0], Cesium.Color.GREEN); // 可视区域
drawLine(result.position, positions[1], Cesium.Color.RED); // 不可视区域
} else {
drawLine(positions[0], positions[1], Cesium.Color.GREEN);
console.log("不在模型上")
}
}
function drawLine(leftPoint, secPoint, color) {
let line = viewer.entities.add({
polyline: {
positions: [leftPoint, secPoint],
width: 2,
material: color,
depthFailMaterial: color 被地形遮挡部分的颜色
}
});
lineEntity.push(line)
}
const handleIntervisibilityCancel = () => {
if (lineEntity.length > 0) {
let len = lineEntity.length;
for (let i = 0; i < len; i++) {
viewer.entities.remove(lineEntity[i]);
}
}
if (markers.length > 0) {
let len = markers.length;
for (let i = 0; i < len; i++) {
viewer.entities.remove(markers[i]);
}
}
positions = [];
lineEntity = [];
markers = [];//点实体
}
const flyToRight2 = async () => {
let 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.05965738392063, 22.638603971034342, 300.0), // 设置位置
orientation: {
heading: Cesium.Math.toRadians(20.0), // 方向
pitch: Cesium.Math.toRadians(-30.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: 2, //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>