From 8bb2f8984e684b6baa3b4cc335ac034192f58ea1 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 01 Apr 2026 15:43:28 +0800
Subject: [PATCH] feat: 恢复资源配置

---
 applications/drone-command/src/views/resource/components/BoxSelect.vue |  250 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 250 insertions(+), 0 deletions(-)

diff --git a/applications/drone-command/src/views/resource/components/BoxSelect.vue b/applications/drone-command/src/views/resource/components/BoxSelect.vue
new file mode 100644
index 0000000..87a9858
--- /dev/null
+++ b/applications/drone-command/src/views/resource/components/BoxSelect.vue
@@ -0,0 +1,250 @@
+<template>
+	<div></div>
+</template>
+
+<script setup>
+import * as Cesium from 'cesium'
+import { ElMessage } from 'element-plus'
+
+let curPolygonPosition = []
+let savePolygonPosition = []
+let curPolygon = null
+let curPolygonEntity = null
+let curPolygonObj = null
+let menuPanel = null
+let saveMenuPanel = null
+
+const viewInstance = inject('viewInstance')
+const homeViewer = inject('homeViewer')
+
+const updateBoxSelect = inject('updateBoxSelect')
+
+function preventDefault(event) {
+	event.preventDefault()
+
+	return
+}
+
+function init() {
+	// draw.drawPlane();
+	curPolygon = new Cesium.PolygonHierarchy()
+	curPolygonEntity = new Cesium.Entity()
+
+	homeViewer.value.scene.globe.depthTestAgainstTerrain = true
+
+	viewInstance.value.addLeftClickEvent(null, addPlanerPointEvent, 'drawCustomPolygon')
+	viewInstance.value.addRightClickEvent(null, addPlanarMenuEvent, 'drawCustomPolygon')
+	viewInstance.value.addMouseHandler(null, mouseMoveEvent, 'drawCustomPolygon')
+}
+
+function mouseMoveEvent(movement, viewer) {
+	const mouseInfo = viewInstance.value.getMouseInfoAll(movement.endPosition)
+
+	const { x, y } = mouseInfo.windowPosition
+
+	if (!menuPanel) {
+		menuPanel = createMenuPanel()
+		viewer.container.appendChild(menuPanel)
+	}
+
+	menuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`
+
+	if (
+		curPolygonObj &&
+		mouseInfo.surfacePosition &&
+		mouseInfo.surfacePosition != null &&
+		curPolygonPosition.length >= 1
+	) {
+		curPolygonPosition.pop()
+		curPolygonPosition.push(mouseInfo.surfacePosition)
+
+		curPolygon.positions.pop()
+		curPolygon.positions.push(mouseInfo.surfacePosition)
+	}
+}
+
+function addPlanerPointEvent(click, pick) {
+	const { position } = click
+
+	const mouseInfo = viewInstance.value.getMouseInfoAll(position)
+
+	if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo)
+}
+
+function addPlanarMenuEvent(click, pick, viewer) {
+	if (savePolygonPosition.length <= 2) {
+		ElMessage.warning('当前绘制无法形成面，请继续绘制或取消绘制！！')
+
+		return
+	}
+	const { position } = click
+
+	const mouseInfo = viewInstance.value.getMouseInfoAll(position)
+
+	remove()
+	removeMenuPanel()
+
+	if (mouseInfo.surfacePosition && mouseInfo.surfacePosition != null) drawCustomPolygon(mouseInfo)
+
+	const { x, y } = position
+	saveMenuPanel = createSaveMenuPanel()
+	saveMenuPanel.addEventListener('click', saveMenuClickEvent)
+	saveMenuPanel.style.transform = `translate3d(${x}px, ${y}px, 0)`
+	viewer.container.appendChild(saveMenuPanel)
+}
+
+function createSaveMenuPanel() {
+	const menuPanel = document.createElement('div')
+	menuPanel.className = 'planar-menu-panel'
+
+	const arr = [
+		{ title: '保存框选', class: 'save-draw' },
+		{ title: '清除框选', class: 'anew-draw' },
+	]
+
+	arr.forEach(item => {
+		const title = document.createElement('div')
+		title.innerText = item.title
+		title.className = item.class
+		menuPanel.appendChild(title)
+	})
+
+	return menuPanel
+}
+
+const emit = defineEmits(['upDateBoxSelect'])
+
+function saveMenuClickEvent(e) {
+	const className = e.target.className
+	if (className === 'save-draw') {
+		emit('upDateBoxSelect')
+		updateBoxSelect(savePolygonPosition)
+	}
+	if (className == 'anew-draw') {
+		cancel()
+	}
+
+	removeSaveMenuPanel()
+}
+
+function removeSaveMenuPanel() {
+	if (saveMenuPanel) {
+		homeViewer.value.container?.removeChild(saveMenuPanel)
+		saveMenuPanel.removeEventListener('click', saveMenuClickEvent)
+		saveMenuPanel = null
+	}
+}
+
+function createMenuPanel() {
+	const menuPanel = document.createElement('div')
+	menuPanel.className = 'planar-menu-panel'
+
+	const title = document.createElement('div')
+	title.innerText = '左击选择点位，右击结束'
+	title.className = 'proof-custom-add-polygon'
+	menuPanel.appendChild(title)
+
+	return menuPanel
+}
+
+function removeMenuPanel() {
+	if (menuPanel) {
+		homeViewer.value.container?.removeChild(menuPanel)
+		menuPanel = null
+	}
+}
+
+function drawCustomPolygon(point) {
+	if (curPolygonPosition.length == 0) {
+		curPolygonPosition.push(point.surfacePosition.clone())
+		curPolygon.positions.push(point.surfacePosition.clone())
+	}
+
+	savePolygonPosition.push(point.wgs84SurfacePosition)
+	curPolygonPosition.push(point.surfacePosition.clone())
+	curPolygon.positions.push(point.surfacePosition.clone())
+
+	if (!curPolygonObj) {
+		curPolygonEntity.polyline = {
+			width: 2,
+			material: Cesium.Color.WHITE,
+			clampToGround: false,
+		}
+
+		curPolygonEntity.polyline.positions = new Cesium.CallbackProperty(function () {
+			return curPolygonPosition
+		}, false)
+
+		curPolygonEntity.polygon = {
+			hierarchy: new Cesium.CallbackProperty(function () {
+				return curPolygon
+			}, false),
+
+			material: Cesium.Color.fromCssColorString('#00ffff').withAlpha(0.4),
+			clampToGround: false,
+		}
+		curPolygonEntity.name = 'customProofPolygon'
+
+		curPolygonEntity._id = 'customProofPolygon'
+		curPolygonObj = homeViewer.value.entities.add(curPolygonEntity)
+	}
+}
+
+function clearPlanar() {
+	homeViewer.value.entities.remove(curPolygonObj)
+	curPolygonObj = null
+	curPolygon = null
+	curPolygonEntity = null
+	curPolygonPosition = []
+	savePolygonPosition = []
+}
+
+function remove() {
+	viewInstance.value.removeLeftClickEvent('drawCustomPolygon')
+	viewInstance.value.removeRightClickEvent('drawCustomPolygon')
+	viewInstance.value.removeMouseHandler('drawCustomPolygon')
+}
+
+function cancel() {
+	remove()
+	removeMenuPanel()
+	clearPlanar()
+
+	init()
+}
+
+onMounted(() => {
+	document.addEventListener('contextmenu', preventDefault)
+
+	init()
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('contextmenu', preventDefault)
+
+	remove()
+	removeMenuPanel()
+	removeSaveMenuPanel()
+	clearPlanar()
+	homeViewer.value.scene.globe.depthTestAgainstTerrain = false
+})
+</script>
+
+<style lang="scss" scoped>
+p {
+	text-indent: 2em;
+	color: #ffffff;
+	font-size: 18px;
+}
+
+.export-btns {
+	margin-top: 44px;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+
+	.el-button {
+		background-color: transparent !important;
+	}
+}
+</style>

--
Gitblit v1.9.3