<template>
|
<div class="custom-panel">
|
<div class="panel-content">
|
<!-- 开挖深度设置 -->
|
<el-form :model="form" label-width="80px">
|
<el-form-item label="开挖深度">
|
<el-input v-model="form.digDepth" placeholder="请输入开挖深度(m)" />
|
</el-form-item>
|
</el-form>
|
<!-- 按钮区域 -->
|
<div class="button-group">
|
<el-button type="primary" @click="handleDraw">绘制</el-button>
|
<el-button type="success" @click="handleConfirm">确认</el-button>
|
<el-button type="danger" @click="handleClear">清除</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, watch, defineEmits } from 'vue';
|
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
|
const emit = defineEmits(['update-excavation-data']);
|
const form = reactive({
|
digDepth: '100'
|
});
|
let excavationInstance = null;
|
const currentPoints = reactive([]);
|
const isDrawing = ref(false);
|
let clickHandler = null;
|
const handleDraw = () => {
|
if (!window.viewer) {
|
console.error('Cesium Viewer 尚未初始化');
|
return;
|
}
|
|
const viewer = window.viewer;
|
|
// 清空之前的数据
|
currentPoints.splice(0, currentPoints.length);
|
isDrawing.value = true;
|
|
// 销毁旧的监听器
|
if (clickHandler) {
|
clickHandler.destroy();
|
}
|
|
// 立即创建开挖对象（不依赖初始点）
|
createExcavation();
|
|
// 开始监听点击事件
|
clickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
clickHandler.setInputAction((movement) => {
|
const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
|
if (cartesian) {
|
currentPoints.push(cartesian.clone());
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
};
|
|
const createExcavation = () => {
|
const depth = parseFloat(form.digDepth);
|
if (!isNaN(depth)) {
|
excavationInstance = window.earthCtrl.analysis.createTerrainExcavation({
|
height: depth,
|
callback: function (a) {
|
},
|
});
|
}else{
|
ElMessage.warning('请输入有效的开挖深度！');
|
}
|
};
|
|
watch(
|
() => form.digDepth,
|
(newVal) => {
|
const num = parseFloat(newVal);
|
if (!isNaN(num) && excavationInstance) {
|
excavationInstance.setDeepth?.(num);
|
}
|
}
|
);
|
// 点击确认按钮（打印当前坐标点集合和深度）
|
const handleConfirm = () => {
|
if (currentPoints.length === 0) {
|
ElMessage.warning('请选取开沟有效的坐标点！');
|
return;
|
}
|
const depth = parseFloat(form.digDepth);
|
// 转换为普通对象数组
|
const plainPoints = currentPoints.map(point => ({
|
x: point.x,
|
y: point.y,
|
z: point.z
|
}));
|
const result = {
|
points: plainPoints,
|
depth: depth
|
};
|
emit('update-excavation-data', result);
|
ElMessage.success('实现开挖功能！');
|
|
};
|
const handleClear = () => {
|
isDrawing.value = false;
|
// 销毁点击事件监听器
|
if (clickHandler) {
|
clickHandler.destroy();
|
clickHandler = null;
|
}
|
// 清空临时点
|
currentPoints.splice(0, currentPoints.length);
|
// 移除开挖对象
|
if (excavationInstance) {
|
excavationInstance.removeFromMap?.();
|
excavationInstance = null;
|
}
|
};
|
</script>
|
|
<style scoped>
|
.custom-panel {
|
padding: 20px;
|
width: 290px;
|
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
|
filter: opacity(83%);
|
background-size: 100% 100%;
|
box-sizing: border-box;
|
}
|
|
.panel-content {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.button-group {
|
display: flex;
|
justify-content: space-around;
|
}
|
</style>
|
