root/apt15e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add关闭点云和小车位置

Browse Source
This commit is contained in:
caill
2025-09-02 17:09:26 +08:00
parent 53687e9ba3
commit 0f964b3a92
5 changed files with 53 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/modules/building.vue
View File

@@ -4,8 +4,14 @@
<gl-map ref="glMap"/>
</div>
<el-row type="flex" justify="space-between">
<el-col :span="10"><button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button></el-col>
<el-col :span="14">
<el-col :span="16">
<el-row type="flex">
<button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button>
<button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="closeCloud"><p>{{cloudOff ? $t('EnablePointCloud') : $t('DisablePointCloud')}}</p></button>
<div class="car-info">{{$t('CartPosition')}}: <span>{{ carPosition.x }}, {{carPosition.y}}</span></div>
</el-row>
</el-col>
<el-col :span="8">
<el-row type="flex" justify="end">
<button class="button_control" @click="$router.push('/index/home')"><p>{{$t('AbandonMapbuild')}}</p></button>
<button id="v-step-3" class="button_control" style="margin-left: 10px" :disabled="disabled" @click="stopMappingConfirm"><p>{{$t('FinishMapbuild')}}</p></button>
@@ -108,6 +114,7 @@ export default {
}
}
return {
cloudOff: false,
driver: null,
driverActive: true,
needsConfirmation: true,
@@ -134,7 +141,7 @@ export default {
}
},
computed: {
...mapGetters(['isTop'])
...mapGetters(['isTop', 'carPosition'])
},
beforeDestroy () {
document.removeEventListener('keydown', this.handleKeydown);
@@ -424,6 +431,18 @@ export default {
this.disabled = false
this.loading.close()
}
},
closeCloud () {
this.cloudOff = !this.cloudOff
if (this.cloudOff) {
this.$nextTick(() => {
this.$refs.glMap.closeWebSocket()
})
} else {
this.$nextTick(() => {
this.$refs.glMap.init()
})
}
}
}
}
@@ -483,9 +502,21 @@ export default {
color: #000
font-weight: 700
}
.car-info
max-width calc(100% - 3rem)
background: rgba(30, 95, 239, 60%);
padding: 0 10px;
border-radius: 8px;
margin-left: 10px;
font-size: 0.2rem;
line-height: 0.36rem;
color: #fff
overflow: hidden
.enClass
.button_control
p
font-size .18rem
line-height .16rem
.car-info
font-size .16rem
</style>

448
src/pages/modules/gl-map-3.vue
View File

@@ -1,448 +0,0 @@
<template>
<div class="point-cloud-map">
<div ref="canvasContainer" class="canvas-container">
<canvas ref="pointCloudCanvas"></canvas>
</div>
<el-button icon="el-icon-location" size="mini" class="locate-button" @click="locateCar">
</el-button>
<div v-if="isLoading" class="loading-indicator">{{ $t('Loading') }}</div>
</div>
</template>
<script>
/* eslint-disable */
import * as THREE from 'three'
import { mapGetters } from 'vuex'
// import { points } from '../../config/point.js'
// import { points1 } from '../../config/point1.js'
// import { points2 } from '../../config/point2.js'
export default {
name: 'PointCloudMap',
data() {
return {
// Three.js相关
scene: null,
camera: null,
renderer: null,
pointCloud: null,
pointMaterial: null,
pointGeometry: null,
carMesh: null,
carTexture: null,
axesHelper: null,
gridHelper: null,
// 点云数据
allPoints: [],
pointCount: 0,
maxPoints: 1000000, // 最大点数限制
// 小车相关
vehicleImage: require('../../images/new/agv.png'),
carMovementEnabled: true,
carSize: 30,
// 视图控制
isDragging: false,
previousTouchX: 0,
previousTouchY: 0,
cameraX: 0,
cameraY: 0,
cameraZoom: 1,
initialPinchDistance: null,
initialZoom: null,
// UI控制
pointSize: 1.5,
// WebSocket相关
socket: null,
isLoading: true,
reconnectTimer: null, // 重连计时器
animationFrameId: null
}
},
computed: {
...mapGetters(['serverUrl', 'userRole', 'carPosition']),
},
watch: {
carPosition: {
handler(newVal) {
this.updateCarPosition(newVal)
},
deep: true
}
},
beforeDestroy() {
this.cleanupResources();
},
methods: {
cleanupResources() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
this.closeWebSocket()
// 清理Three.js资源
if (this.renderer) {
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer = null;
}
if (this.pointGeometry) {
this.pointGeometry.dispose();
this.pointGeometry = null;
}
if (this.pointMaterial) {
this.pointMaterial.dispose();
this.pointMaterial = null;
}
if (this.carTexture) {
this.carTexture.dispose();
this.carTexture = null;
}
if (this.scene) {
this.scene.clear();
this.scene = null;
}
this.camera = null;
this.pointCloud = null;
this.carMesh = null;
this.allPoints = [];
this.pointCount = 0;
},
initThreeJS() {
// 初始化Three.js场景
const container = this.$refs.canvasContainer;
const aspectRatio = container.clientWidth / container.clientHeight;
const pointRange = 2000; // 点云范围 -1000 到 1000
const viewHeight = pointRange;
const viewWidth = viewHeight * aspectRatio;
this.scene = new THREE.Scene();
this.camera = new THREE.OrthographicCamera(
-viewWidth / 2,
viewWidth / 2,
viewHeight / 2,
-viewHeight / 2,
0.1,
2000
);
this.camera.position.z = 10;
const canvas = this.$refs.pointCloudCanvas;
this.renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true, // 关键：启用alpha通道
transparent: true // 关键：允许透明
});
this.updateRendererSize();
this.createPointCloud();
this.createCar();
this.setupEventListeners();
this.animate();
},
createPointCloud() {
this.pointGeometry = new THREE.BufferGeometry();
this.pointMaterial = new THREE.PointsMaterial({
size: this.pointSize,
color: 0xFFFFFF,
sizeAttenuation: false
});
this.pointCloud = new THREE.Points(this.pointGeometry, this.pointMaterial);
this.scene.add(this.pointCloud);
},
createCar() {
const textureLoader = new THREE.TextureLoader();
textureLoader.load(this.vehicleImage, (texture) => {
this.carTexture = texture;
const carMaterial = new THREE.SpriteMaterial({
map: texture,
transparent: true,
opacity: 1
});
this.carMesh = new THREE.Sprite(carMaterial);
const container = this.$refs.canvasContainer;
const scale = this.carSize / container.clientHeight * 2000;
this.carMesh.scale.set(scale * 1.5, scale * 1.5, 1);
this.carMesh.position.set(this.carPosition.x, this.carPosition.y, 5);
this.carMesh.rotation.z = this.carPosition.angle;
this.scene.add(this.carMesh);
});
},
updatePointCloud(points) {
if (!points || !Array.isArray(points) || points.length === 0) return;
// 添加新点
this.allPoints = [...this.allPoints, ...points];
this.pointCount = this.allPoints.length;
// 如果超过最大点数限制，移除旧点
if (this.pointCount > this.maxPoints) {
this.allPoints = this.allPoints.slice(-points.length);
this.pointCount = this.allPoints.length;
}
this.updatePointCloudGeometry();
},
updatePointCloudGeometry() {
const positions = new Float32Array(this.pointCount * 3);
for (let i = 0; i < this.pointCount; i++) {
const point = this.allPoints[i];
positions[i * 3] = point.x || 0;
positions[i * 3 + 1] = point.y || 0;
positions[i * 3 + 2] = 0;
}
// 清理旧的geometry属性
if (this.pointGeometry.attributes.position) {
this.pointGeometry.deleteAttribute('position');
}
this.pointGeometry.setAttribute(
'position',
new THREE.BufferAttribute(positions, 3)
);
this.pointGeometry.attributes.position.needsUpdate = true;
},
updateCarPosition(position) {
if (!this.carMovementEnabled || !this.carMesh) return;
this.carMesh.position.set(position.x, position.y, 5);
this.carMesh.rotation.z = position.angle;
},
animate() {
this.animationFrameId = requestAnimationFrame(this.animate);
this.camera.position.x = this.cameraX;
this.camera.position.y = this.cameraY;
this.camera.zoom = this.cameraZoom;
this.camera.updateProjectionMatrix();
this.renderer.render(this.scene, this.camera);
},
updateRendererSize() {
const container = this.$refs.canvasContainer;
const width = container.clientWidth;
const height = container.clientHeight;
const aspectRatio = width / height;
const viewHeight = 2000;
const viewWidth = viewHeight * aspectRatio;
this.camera.left = -viewWidth / 2 / this.cameraZoom;
this.camera.right = viewWidth / 2 / this.cameraZoom;
this.camera.top = viewHeight / 2 / this.cameraZoom;
this.camera.bottom = -viewHeight / 2 / this.cameraZoom;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
},
locateCar() {
// 将相机对准小车
this.cameraX = this.carPosition.x;
this.cameraY = this.carPosition.y;
},
setupEventListeners() {
const canvas = this.$refs.pointCloudCanvas;
window.addEventListener('resize', this.updateRendererSize());
// 触摸事件 - 平移
canvas.addEventListener('touchstart', (e) => {
if (e.touches.length === 1) {
this.isDragging = true;
this.previousTouchX = e.touches[0].clientX;
this.previousTouchY = e.touches[0].clientY;
e.preventDefault();
}
});
canvas.addEventListener('touchmove', (e) => {
if (this.isDragging && e.touches.length === 1) {
const deltaX = e.touches[0].clientX - this.previousTouchX;
const deltaY = e.touches[0].clientY - this.previousTouchY;
// 移动相机（反转方向以获得自然拖动效果）
this.cameraX -= deltaX * 2 / this.cameraZoom;
this.cameraY += deltaY * 2 / this.cameraZoom;
this.previousTouchX = e.touches[0].clientX;
this.previousTouchY = e.touches[0].clientY;
e.preventDefault();
}
// 双指 pinch 缩放
if (e.touches.length === 2) {
const touch1 = e.touches[0];
const touch2 = e.touches[1];
// 计算当前两点间的距离
const currentDistance = Math.hypot(
touch1.clientX - touch2.clientX,
touch1.clientY - touch2.clientY
);
// 计算初始两点间的距离（存储在touchstart事件中）
if (!this.initialPinchDistance) {
this.initialPinchDistance = currentDistance;
this.initialZoom = this.cameraZoom;
}
// 计算缩放比例
const zoomFactor = currentDistance / this.initialPinchDistance;
this.cameraZoom = Math.max(0.1, Math.min(10, this.initialZoom * zoomFactor));
this.updateRendererSize();
e.preventDefault();
}
});
canvas.addEventListener('touchend', ()=> {
this.isDragging = false;
this.initialPinchDistance = null;
this.initialZoom = null
});
// 鼠标事件（用于桌面设备测试）
canvas.addEventListener('mousedown', (e) => {
this.isDragging = true;
this.previousTouchX = e.clientX;
this.previousTouchY = e.clientY;
});
canvas.addEventListener('mousemove', (e) => {
if (this.isDragging) {
const deltaX = e.clientX - this.previousTouchX;
const deltaY = e.clientY - this.previousTouchY;
this.cameraX -= deltaX * 2 / this.cameraZoom;
this.cameraY += deltaY * 2 / this.cameraZoom;
this.previousTouchX = e.clientX;
this.previousTouchY = e.clientY;
}
});
canvas.addEventListener('mouseup', () => {
this.isDragging = false;
});
canvas.addEventListener('mouseleave', () => {
this.isDragging = false;
});
// 鼠标滚轮缩放
canvas.addEventListener('wheel', (e)=> {
e.preventDefault();
if (e.deltaY < 0) {
this.cameraZoom *= 1.1;
} else {
this.cameraZoom /= 1.1;
}
this.updateRendererSize();
});
},
initWebSocket() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
this.socket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
this.socket.onopen = () => {
console.log('WebSocket连接已建立')
this.isLoading = false
}
this.socket.onmessage = (event) => {
try {
const now = Date.now()
if (now - this.lastUpdateTime < this.updateInterval) {
return
}
this.lastUpdateTime = now
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
const pointData = JSON.parse(event.data)
this.updatePointCloud(pointData.data)
} catch (error) {
console.error('解析点云数据失败:', error)
}
}
this.socket.onclose = (event) => {
console.log('WebSocket连接已关闭，代码:', event.code)
this.isLoading = true
this.reconnectTimer = setTimeout(() => this.initWebSocket(), 3000)
}
this.socket.onerror = (error) => {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
console.error('WebSocket错误:', error)
this.isLoading = true
}
},
closeWebSocket() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
if (this.socket) {
this.socket.onopen = null
this.socket.onmessage = null
this.socket.onclose = null
this.socket.onerror = null
this.socket.close(1000, '组件销毁')
this.socket = null
}
this.allPoints = []
},
init() {
this.initThreeJS();
this.initWebSocket()
// this.isLoading = false;
// const pointData = points.data
// this.updatePointCloud(pointData);
// setTimeout(() => {
// const arr = points1.data
// this.updatePointCloud(arr);
// }, 1000)
// setTimeout(() => {
// const arr = points2.data
// this.updatePointCloud(arr);
// }, 2000)
}
}
}
</script>
<style lang="stylus" scoped>
.point-cloud-map
position relative
width 100%
height 100%
background-color rgba(4, 33, 58, 70%)
box-shadow inset 1px 1px 7px 2px #4d9bcd
overflow hidden
.canvas-container
display: flex;
align-items: center;
justify-content: center;
width: 100%
height: 100%
position: relative
z-index: 0
// 定位按钮样式
.locate-button
position: absolute
bottom: 20px
right: 20px
width: 40px
height: 40px
border-radius: 50%
background-color: rgba(255, 255, 255, 0.8)
border: none
color: #333
font-size: 18px
cursor: pointer
display: flex
align-items: center
justify-content: center
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2)
z-index: 100
transition: all 0.2s ease
&:hover
background-color: white
transform: scale(1.05)
&:active
transform: scale(0.95)
.loading-indicator
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background-color: rgba(255, 255, 255, 0.8)
padding: .01rem .02rem
border-radius: 4px
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
font-size: .12rem
color: #333
z-index: 100
display: flex
align-items: center
</style>

20
src/pages/modules/gl-map-4.vue
View File

@@ -66,8 +66,8 @@ export default {
animationFrameId: null,
// 优化相关参数
updateThrottle: 50, // 数据更新节流间隔(ms)
lastUpdateTime: 0,
resizeHandler: null // 存储resize事件处理函数
lastUpdateTime: 0
// resizeHandler: null // 存储resize事件处理函数
}
},
computed: {
@@ -84,6 +84,9 @@ export default {
beforeDestroy() {
this.cleanupResources();
},
mounted () {
this.initThreeJS();
},
methods: {
cleanupResources() {
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
@@ -111,10 +114,10 @@ export default {
this.scene.clear();
this.scene = null;
}
if (this.resizeHandler) {
window.removeEventListener('resize', this.resizeHandler);
this.resizeHandler = null;
}
// if (this.resizeHandler) {
// window.removeEventListener('resize', this.resizeHandler);
// this.resizeHandler = null;
// }
const canvas = this.$refs.pointCloudCanvas;
if (canvas) {
canvas.removeEventListener('touchstart', null);
@@ -402,8 +405,8 @@ export default {
},
setupEventListeners() {
const canvas = this.$refs.pointCloudCanvas;
this.resizeHandler = () => this.updateRendererSize();
window.addEventListener('resize', this.resizeHandler);
// this.resizeHandler = () => this.updateRendererSize();
// window.addEventListener('resize', this.resizeHandler);
// 触摸事件 - 平移
canvas.addEventListener('touchstart', (e) => {
if (e.touches.length === 1) {
@@ -564,7 +567,6 @@ export default {
this.allPoints = []
},
init() {
this.initThreeJS();
this.initWebSocket()
// this.isLoading = false;
// const pointData = points.data