点云小车路径、起始点、小车图片，回退逻辑
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page_container" :class="{'enClass': $i18n.locale === 'en-us'}">
|
||||
<div id="v-step-1" class="map_container">
|
||||
<gl-map ref="glMap"/>
|
||||
<gl-map ref="glMap" :recordPath="recordPath"/>
|
||||
</div>
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-col :span="18">
|
||||
@@ -70,7 +70,7 @@
|
||||
|
||||
<script>
|
||||
import DriverModal from './driver-modal.vue'
|
||||
import GlMap from './gl-map.vue'
|
||||
import GlMap from './three-map.vue'
|
||||
import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, teachingRestart, teachingStartingPointRelocate, abandonMapping, sendAutoBack } from '@/config/getData.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
@@ -153,7 +153,8 @@ export default {
|
||||
resShow: false,
|
||||
pollingTimer: null,
|
||||
retryCount: 0,
|
||||
maxRetryCount: 3
|
||||
maxRetryCount: 3,
|
||||
recordPath: true // 默认记录路径
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -179,6 +180,7 @@ export default {
|
||||
this.$refs.glMap.init()
|
||||
})
|
||||
this.tipShow = false
|
||||
this.recordPath = true
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
@@ -544,6 +546,7 @@ export default {
|
||||
this.$refs.glMap.closeWebSocket()
|
||||
})
|
||||
this.tipShow = true
|
||||
this.recordPath = false
|
||||
}
|
||||
}
|
||||
this.loading.close()
|
||||
@@ -556,6 +559,7 @@ export default {
|
||||
this.$refs.glMap.init()
|
||||
})
|
||||
this.tipShow = false
|
||||
this.recordPath = true
|
||||
},
|
||||
forceClosed () {
|
||||
this.$confirm(this.$t('reversingabnormalitiesneedtoclose'), this.$t('Prompt'), {
|
||||
|
||||
979
src/pages/modules/build/three-map.vue
Normal file
979
src/pages/modules/build/three-map.vue
Normal file
@@ -0,0 +1,979 @@
|
||||
<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>
|
||||
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,
|
||||
carMesh: null,
|
||||
|
||||
// 点云数据
|
||||
allPoints: [],
|
||||
pointCount: 0,
|
||||
maxPoints: 1000000,
|
||||
|
||||
// 点云坐标范围配置
|
||||
pointCloudRange: {
|
||||
minX: 0,
|
||||
maxX: 10,
|
||||
minY: 0,
|
||||
maxY: 10
|
||||
},
|
||||
|
||||
// 小车相关
|
||||
vehicleImage: require('@/images/new/agv.png'),
|
||||
|
||||
// 视图控制
|
||||
isDragging: false,
|
||||
previousTouchX: 0,
|
||||
previousTouchY: 0,
|
||||
cameraX: 0,
|
||||
cameraY: 0,
|
||||
zoomRange: {
|
||||
min: 0.1,
|
||||
max: 2
|
||||
},
|
||||
cameraZoom: 1,
|
||||
initialPinchDistance: null,
|
||||
initialZoom: null,
|
||||
|
||||
// UI控制
|
||||
pointSize: 2,
|
||||
|
||||
// WebSocket相关
|
||||
socket: null,
|
||||
isLoading: true,
|
||||
reconnectTimer: null,
|
||||
animationFrameId: null,
|
||||
updateInterval: 50,
|
||||
|
||||
// 优化相关参数
|
||||
lastUpdateTime: 0,
|
||||
|
||||
// 黄点相关
|
||||
hasYellowDot: false,
|
||||
yellowDotSprite: null,
|
||||
yellowDotInitialPos: null,
|
||||
|
||||
// 小车路径追踪相关
|
||||
carPath: [], // 存储小车历史位置
|
||||
|
||||
// 资源引用（新增）
|
||||
geometryMap: new Map(), // 统一管理几何体
|
||||
materialMap: new Map(), // 统一管理材质
|
||||
eventHandlers: new Map(), // 统一管理事件处理函数
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl', 'userRole', 'carPosition']),
|
||||
},
|
||||
props: {
|
||||
// 是否记录小车路径
|
||||
recordPath: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
carPosition: {
|
||||
handler(newVal) {
|
||||
this.updateCarPosition(newVal)
|
||||
if (this.recordPath) {
|
||||
this.addPathPoint(newVal)
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.cleanupResources();
|
||||
},
|
||||
mounted() {
|
||||
this.initThreeJS();
|
||||
},
|
||||
methods: {
|
||||
// 统一资源清理方法
|
||||
cleanupResource(name, resource) {
|
||||
if (!resource) return null;
|
||||
|
||||
try {
|
||||
// 处理Three.js对象
|
||||
if (resource.isObject3D) {
|
||||
if (resource.geometry && resource.geometry.dispose) {
|
||||
resource.geometry.dispose();
|
||||
}
|
||||
if (resource.material) {
|
||||
if (Array.isArray(resource.material)) {
|
||||
resource.material.forEach(mat => {
|
||||
if (mat.map && mat.map.dispose) mat.map.dispose();
|
||||
if (mat.dispose) mat.dispose();
|
||||
});
|
||||
} else {
|
||||
if (resource.material.map && resource.material.map.dispose) {
|
||||
resource.material.map.dispose();
|
||||
}
|
||||
if (resource.material.dispose) resource.material.dispose();
|
||||
}
|
||||
}
|
||||
if (this.scene && this.scene.remove) {
|
||||
this.scene.remove(resource);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理几何体和材质
|
||||
if (resource.dispose) {
|
||||
resource.dispose();
|
||||
}
|
||||
|
||||
// 从管理Map中移除
|
||||
if (this.geometryMap.has(name)) this.geometryMap.delete(name);
|
||||
if (this.materialMap.has(name)) this.materialMap.delete(name);
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error(`清理资源 ${name} 时出错:`, error);
|
||||
return resource;
|
||||
}
|
||||
},
|
||||
|
||||
cleanupResources() {
|
||||
// 清理定时器和动画帧
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = null;
|
||||
}
|
||||
if (this.animationFrameId) {
|
||||
cancelAnimationFrame(this.animationFrameId);
|
||||
this.animationFrameId = null;
|
||||
}
|
||||
|
||||
// 清理WebSocket
|
||||
this.closeWebSocket();
|
||||
|
||||
// 统一清理Three.js资源
|
||||
const resourcesToClean = [
|
||||
{ name: 'pointGeometry', ref: this.pointCloud?.geometry },
|
||||
{ name: 'pointMaterial', ref: this.pointCloud?.material },
|
||||
{ name: 'carMesh', ref: this.carMesh },
|
||||
{ name: 'carTexture', ref: this.carMesh?.material?.map },
|
||||
{ name: 'yellowDotSprite', ref: this.yellowDotSprite },
|
||||
{ name: 'pathGeometry', ref: this.geometryMap.get('path') },
|
||||
{ name: 'pathMaterial', ref: this.materialMap.get('path') },
|
||||
{ name: 'renderer', ref: this.renderer },
|
||||
{ name: 'scene', ref: this.scene },
|
||||
];
|
||||
|
||||
resourcesToClean.forEach(({ name, ref }) => {
|
||||
this.cleanupResource(name, ref);
|
||||
});
|
||||
|
||||
// 清理事件监听器
|
||||
this.removeEventListeners();
|
||||
|
||||
// 清理数据
|
||||
this.allPoints = [];
|
||||
this.carPath = [];
|
||||
this.pointCount = 0;
|
||||
this.geometryMap.clear();
|
||||
this.materialMap.clear();
|
||||
this.eventHandlers.clear();
|
||||
},
|
||||
|
||||
// 统一缓冲区更新方法
|
||||
updateBufferGeometry(geometry, dataArray, vectorSize = 3) {
|
||||
if (!geometry || !dataArray || !dataArray.length) return false;
|
||||
|
||||
try {
|
||||
const positions = new Float32Array(dataArray.length * vectorSize);
|
||||
|
||||
for (let i = 0; i < dataArray.length; i++) {
|
||||
const point = dataArray[i];
|
||||
positions[i * vectorSize] = point.x || 0;
|
||||
positions[i * vectorSize + 1] = point.y || 0;
|
||||
positions[i * vectorSize + 2] = point.z || 0;
|
||||
}
|
||||
|
||||
if (!geometry.attributes.position) {
|
||||
geometry.setAttribute(
|
||||
'position',
|
||||
new THREE.BufferAttribute(positions, vectorSize)
|
||||
);
|
||||
} else if (geometry.attributes.position.array.length !== positions.length) {
|
||||
geometry.deleteAttribute('position');
|
||||
geometry.setAttribute(
|
||||
'position',
|
||||
new THREE.BufferAttribute(positions, vectorSize)
|
||||
);
|
||||
} else {
|
||||
geometry.attributes.position.array.set(positions);
|
||||
geometry.attributes.position.needsUpdate = true;
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('更新缓冲区几何体时出错:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化Three.js
|
||||
initThreeJS() {
|
||||
const container = this.$refs.canvasContainer;
|
||||
const aspectRatio = container.clientWidth / container.clientHeight;
|
||||
let viewSize = 10;
|
||||
|
||||
if (this.allPoints.length > 0) {
|
||||
const actualRangeX = this.pointCloudRange.maxX - this.pointCloudRange.minX;
|
||||
const actualRangeY = this.pointCloudRange.maxY - this.pointCloudRange.minY;
|
||||
viewSize = Math.max(actualRangeX, actualRangeY) * 1.1;
|
||||
}
|
||||
|
||||
// 创建场景
|
||||
this.scene = new THREE.Scene();
|
||||
|
||||
// 创建相机
|
||||
this.camera = new THREE.OrthographicCamera(
|
||||
-viewSize * aspectRatio / 2,
|
||||
viewSize * aspectRatio / 2,
|
||||
viewSize / 2,
|
||||
-viewSize / 2,
|
||||
0.1,
|
||||
2000
|
||||
);
|
||||
this.camera.position.z = 10;
|
||||
|
||||
// 创建渲染器
|
||||
const canvas = this.$refs.pointCloudCanvas;
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
canvas: canvas,
|
||||
antialias: false,
|
||||
alpha: true,
|
||||
transparent: true
|
||||
});
|
||||
|
||||
// 初始化各个组件
|
||||
this.updateRendererSize();
|
||||
this.createPointCloud();
|
||||
this.createCar();
|
||||
this.initPathSystem();
|
||||
this.setupEventListeners();
|
||||
this.animate();
|
||||
},
|
||||
|
||||
// 创建点云
|
||||
createPointCloud() {
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: this.pointSize,
|
||||
color: 0xFFFFFF,
|
||||
sizeAttenuation: false,
|
||||
transparent: false,
|
||||
depthWrite: true,
|
||||
antialias: false
|
||||
});
|
||||
|
||||
this.pointCloud = new THREE.Points(geometry, material);
|
||||
this.scene.add(this.pointCloud);
|
||||
|
||||
// 存储引用
|
||||
this.geometryMap.set('point', geometry);
|
||||
this.materialMap.set('point', material);
|
||||
},
|
||||
|
||||
// 创建小车
|
||||
createCar() {
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
textureLoader.load(this.vehicleImage, (texture) => {
|
||||
texture.minFilter = THREE.LinearFilter;
|
||||
texture.magFilter = THREE.LinearFilter;
|
||||
texture.needsUpdate = true;
|
||||
|
||||
const geometry = new THREE.PlaneGeometry(1, 1);
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
map: texture,
|
||||
transparent: true,
|
||||
opacity: 1,
|
||||
side: THREE.DoubleSide,
|
||||
depthWrite: false
|
||||
});
|
||||
|
||||
this.carMesh = new THREE.Mesh(geometry, material);
|
||||
this.updateCarSpriteScale();
|
||||
this.carMesh.position.set(this.carPosition.x, this.carPosition.y, 5);
|
||||
this.carMesh.rotation.z = this.carPosition.angle;
|
||||
this.scene.add(this.carMesh);
|
||||
|
||||
// 存储引用
|
||||
this.geometryMap.set('car', geometry);
|
||||
this.materialMap.set('car', material);
|
||||
this.materialMap.set('carTexture', texture);
|
||||
|
||||
this.renderIfReady();
|
||||
});
|
||||
},
|
||||
|
||||
// 创建黄点
|
||||
createYellowDot(initialX, initialY) {
|
||||
if (this.hasYellowDot) return;
|
||||
this.hasYellowDot = true;
|
||||
this.yellowDotInitialPos = { x: initialX, y: initialY };
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = 60;
|
||||
canvas.height = 60;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = '#FFD700';
|
||||
ctx.beginPath();
|
||||
ctx.arc(30, 30, 15, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
const dotTexture = new THREE.CanvasTexture(canvas);
|
||||
const dotMaterial = new THREE.SpriteMaterial({
|
||||
map: dotTexture,
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
sizeAttenuation: false
|
||||
});
|
||||
|
||||
this.yellowDotSprite = new THREE.Sprite(dotMaterial);
|
||||
this.updateYellowDotScale();
|
||||
this.yellowDotSprite.position.set(initialX, initialY, 4);
|
||||
this.scene.add(this.yellowDotSprite);
|
||||
|
||||
// 存储引用
|
||||
this.materialMap.set('yellowDot', dotMaterial);
|
||||
this.materialMap.set('yellowDotTexture', dotTexture);
|
||||
|
||||
this.renderIfReady();
|
||||
},
|
||||
|
||||
// 计算固定像素大小
|
||||
calculateFixedPixelSize(pixelSize) {
|
||||
if (!this.camera || !this.renderer) return 0.5;
|
||||
|
||||
const canvas = this.$refs.pointCloudCanvas;
|
||||
if (!canvas || !canvas.clientHeight) return 0.5;
|
||||
|
||||
const cameraHeight = this.camera.top - this.camera.bottom;
|
||||
const worldUnitsPerPixel = cameraHeight / canvas.clientHeight;
|
||||
|
||||
return worldUnitsPerPixel * pixelSize;
|
||||
},
|
||||
|
||||
// 更新小车精灵缩放
|
||||
updateCarSpriteScale() {
|
||||
if (!this.carMesh) return;
|
||||
const fixedSize = this.calculateFixedPixelSize(40);
|
||||
this.carMesh.scale.set(fixedSize, fixedSize, 1);
|
||||
},
|
||||
|
||||
// 更新黄点精灵缩放
|
||||
updateYellowDotScale() {
|
||||
if (!this.yellowDotSprite) return;
|
||||
const fixedSize = this.calculateFixedPixelSize(30);
|
||||
this.yellowDotSprite.scale.set(fixedSize, fixedSize, 1);
|
||||
},
|
||||
|
||||
// 更新所有精灵缩放
|
||||
updateAllSpritesScale() {
|
||||
this.updateCarSpriteScale();
|
||||
this.updateYellowDotScale();
|
||||
},
|
||||
|
||||
// 更新点云数据
|
||||
updatePointCloud(points) {
|
||||
if (!points || !Array.isArray(points) || points.length === 0) return;
|
||||
|
||||
// 计算新点范围
|
||||
const newRange = this.calculatePointsRange(points);
|
||||
const rangeExpanded = this.expandPointCloudRange(newRange);
|
||||
|
||||
// 合并新点
|
||||
const hasNewPoints = this.mergePoints(points);
|
||||
|
||||
if (!hasNewPoints && !rangeExpanded) return;
|
||||
|
||||
// 更新几何体
|
||||
this.updatePointCloudGeometry();
|
||||
|
||||
if (rangeExpanded) {
|
||||
this.adjustCameraToNewRange();
|
||||
}
|
||||
},
|
||||
|
||||
// 计算点集范围
|
||||
calculatePointsRange(points) {
|
||||
if (!points || points.length === 0) return null;
|
||||
|
||||
let minX = Infinity, maxX = -Infinity;
|
||||
let minY = Infinity, maxY = -Infinity;
|
||||
|
||||
points.forEach(point => {
|
||||
const x = point.x || 0;
|
||||
const y = point.y || 0;
|
||||
minX = Math.min(minX, x);
|
||||
maxX = Math.max(maxX, x);
|
||||
minY = Math.min(minY, y);
|
||||
maxY = Math.max(maxY, y);
|
||||
});
|
||||
|
||||
return { minX, maxX, minY, maxY };
|
||||
},
|
||||
|
||||
// 扩展点云范围
|
||||
expandPointCloudRange(newRange) {
|
||||
if (!newRange) return false;
|
||||
|
||||
let expanded = false;
|
||||
|
||||
// 初始化范围
|
||||
if (this.allPoints.length === 0) {
|
||||
this.pointCloudRange = { ...newRange };
|
||||
return true;
|
||||
}
|
||||
|
||||
// 检查并扩展范围
|
||||
if (newRange.minX < this.pointCloudRange.minX) {
|
||||
this.pointCloudRange.minX = newRange.minX;
|
||||
expanded = true;
|
||||
}
|
||||
if (newRange.maxX > this.pointCloudRange.maxX) {
|
||||
this.pointCloudRange.maxX = newRange.maxX;
|
||||
expanded = true;
|
||||
}
|
||||
if (newRange.minY < this.pointCloudRange.minY) {
|
||||
this.pointCloudRange.minY = newRange.minY;
|
||||
expanded = true;
|
||||
}
|
||||
if (newRange.maxY > this.pointCloudRange.maxY) {
|
||||
this.pointCloudRange.maxY = newRange.maxY;
|
||||
expanded = true;
|
||||
}
|
||||
|
||||
if (expanded) {
|
||||
this.updateAllSpritesScale();
|
||||
}
|
||||
|
||||
return expanded;
|
||||
},
|
||||
|
||||
// 合并新点
|
||||
mergePoints(newPoints) {
|
||||
if (!newPoints || newPoints.length === 0) return false;
|
||||
|
||||
const existingSet = new Set();
|
||||
this.allPoints.forEach(point => {
|
||||
existingSet.add(`${point.x},${point.y}`);
|
||||
});
|
||||
|
||||
const uniqueNewPoints = newPoints.filter(point => {
|
||||
const key = `${point.x},${point.y}`;
|
||||
return !existingSet.has(key);
|
||||
});
|
||||
|
||||
if (uniqueNewPoints.length === 0) return false;
|
||||
|
||||
this.allPoints.push(...uniqueNewPoints);
|
||||
|
||||
// 限制总数
|
||||
if (this.allPoints.length > this.maxPoints) {
|
||||
this.allPoints.splice(0, this.allPoints.length - this.maxPoints);
|
||||
}
|
||||
|
||||
this.pointCount = this.allPoints.length;
|
||||
return true;
|
||||
},
|
||||
|
||||
// 更新点云几何体
|
||||
updatePointCloudGeometry() {
|
||||
const geometry = this.geometryMap.get('point');
|
||||
if (geometry) {
|
||||
this.updateBufferGeometry(geometry, this.allPoints, 3);
|
||||
}
|
||||
},
|
||||
|
||||
// 调整相机到新范围
|
||||
adjustCameraToNewRange() {
|
||||
this.updateRendererSize();
|
||||
|
||||
const centerX = (this.pointCloudRange.minX + this.pointCloudRange.maxX) / 2;
|
||||
const centerY = (this.pointCloudRange.minY + this.pointCloudRange.maxY) / 2;
|
||||
|
||||
this.cameraX = centerX;
|
||||
this.cameraY = centerY;
|
||||
this.updateAllSpritesScale();
|
||||
},
|
||||
|
||||
// 更新小车位置
|
||||
updateCarPosition(position) {
|
||||
if (!this.carMesh) return;
|
||||
this.carMesh.position.set(position.x, position.y, 5);
|
||||
this.carMesh.rotation.z = position.angle;
|
||||
},
|
||||
|
||||
// 动画循环
|
||||
animate() {
|
||||
this.animationFrameId = requestAnimationFrame(this.animate);
|
||||
|
||||
// 更新相机位置
|
||||
const cameraUpdated = this.updateCameraPosition();
|
||||
|
||||
// 更新路径
|
||||
this.updatePathDisplay();
|
||||
|
||||
// 如果需要更新相机则更新投影矩阵
|
||||
if (cameraUpdated) {
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
// 渲染场景
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
},
|
||||
|
||||
// 更新相机位置
|
||||
updateCameraPosition() {
|
||||
let updated = false;
|
||||
|
||||
if (this.camera.position.x !== this.cameraX || this.camera.position.y !== this.cameraY) {
|
||||
this.camera.position.x = this.cameraX;
|
||||
this.camera.position.y = this.cameraY;
|
||||
updated = true;
|
||||
}
|
||||
|
||||
if (this.camera.zoom !== this.cameraZoom) {
|
||||
this.camera.zoom = this.cameraZoom;
|
||||
this.updateAllSpritesScale();
|
||||
updated = true;
|
||||
}
|
||||
|
||||
return updated;
|
||||
},
|
||||
|
||||
// 更新渲染器大小
|
||||
updateRendererSize() {
|
||||
const container = this.$refs.canvasContainer;
|
||||
const width = container.clientWidth;
|
||||
const height = container.clientHeight;
|
||||
const aspectRatio = width / height;
|
||||
|
||||
let viewSize = 10;
|
||||
if (this.allPoints.length > 0) {
|
||||
const actualRangeX = this.pointCloudRange.maxX - this.pointCloudRange.minX;
|
||||
const actualRangeY = this.pointCloudRange.maxY - this.pointCloudRange.minY;
|
||||
viewSize = Math.max(actualRangeX, actualRangeY) * 1.1;
|
||||
}
|
||||
|
||||
this.camera.left = -viewSize * aspectRatio / 2 / this.cameraZoom;
|
||||
this.camera.right = viewSize * aspectRatio / 2 / this.cameraZoom;
|
||||
this.camera.top = viewSize / 2 / this.cameraZoom;
|
||||
this.camera.bottom = -viewSize / 2 / this.cameraZoom;
|
||||
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(width, height);
|
||||
this.updateAllSpritesScale();
|
||||
},
|
||||
|
||||
// 定位到小车
|
||||
locateCar() {
|
||||
this.cameraX = this.carPosition.x;
|
||||
this.cameraY = this.carPosition.y;
|
||||
},
|
||||
|
||||
// 设置事件监听器
|
||||
setupEventListeners() {
|
||||
const canvas = this.$refs.pointCloudCanvas;
|
||||
if (!canvas) return;
|
||||
|
||||
// 定义事件处理函数
|
||||
const handlers = {
|
||||
touchstart: this.handleTouchStart.bind(this),
|
||||
touchmove: this.handleTouchMove.bind(this),
|
||||
touchend: this.handleTouchEnd.bind(this),
|
||||
mousedown: this.handleMouseDown.bind(this),
|
||||
mousemove: this.handleMouseMove.bind(this),
|
||||
mouseup: this.handleMouseUp.bind(this),
|
||||
mouseleave: this.handleMouseLeave.bind(this),
|
||||
wheel: this.handleWheel.bind(this)
|
||||
};
|
||||
|
||||
// 添加监听器并存储引用
|
||||
Object.entries(handlers).forEach(([event, handler]) => {
|
||||
canvas.addEventListener(event, handler);
|
||||
this.eventHandlers.set(event, handler);
|
||||
});
|
||||
},
|
||||
|
||||
// 移除事件监听器
|
||||
removeEventListeners() {
|
||||
const canvas = this.$refs.pointCloudCanvas;
|
||||
if (!canvas || this.eventHandlers.size === 0) return;
|
||||
|
||||
this.eventHandlers.forEach((handler, event) => {
|
||||
canvas.removeEventListener(event, handler);
|
||||
});
|
||||
|
||||
this.eventHandlers.clear();
|
||||
},
|
||||
|
||||
// 触摸开始处理
|
||||
handleTouchStart(e) {
|
||||
if (e.touches.length === 1) {
|
||||
this.isDragging = true;
|
||||
this.previousTouchX = e.touches[0].clientX;
|
||||
this.previousTouchY = e.touches[0].clientY;
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
// 触摸移动处理
|
||||
handleTouchMove(e) {
|
||||
// 单指拖动
|
||||
if (this.isDragging && e.touches.length === 1) {
|
||||
const deltaX = e.touches[0].clientX - this.previousTouchX;
|
||||
const deltaY = e.touches[0].clientY - this.previousTouchY;
|
||||
|
||||
if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) return;
|
||||
|
||||
this.cameraX -= deltaX * 0.05 / this.cameraZoom;
|
||||
this.cameraY += deltaY * 0.05 / this.cameraZoom;
|
||||
|
||||
this.previousTouchX = e.touches[0].clientX;
|
||||
this.previousTouchY = e.touches[0].clientY;
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
// 双指缩放
|
||||
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
|
||||
);
|
||||
|
||||
if (!this.initialPinchDistance) {
|
||||
this.initialPinchDistance = currentDistance;
|
||||
this.initialZoom = this.cameraZoom;
|
||||
}
|
||||
|
||||
let newZoom = this.initialZoom * (currentDistance / this.initialPinchDistance);
|
||||
newZoom = Math.max(this.zoomRange.min, Math.min(this.zoomRange.max, newZoom));
|
||||
|
||||
if (newZoom !== this.cameraZoom) {
|
||||
this.cameraZoom = newZoom;
|
||||
this.updateRendererSize();
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
// 触摸结束处理
|
||||
handleTouchEnd() {
|
||||
this.isDragging = false;
|
||||
this.initialPinchDistance = null;
|
||||
this.initialZoom = null;
|
||||
},
|
||||
|
||||
// 鼠标按下处理
|
||||
handleMouseDown(e) {
|
||||
this.isDragging = true;
|
||||
this.previousTouchX = e.clientX;
|
||||
this.previousTouchY = e.clientY;
|
||||
},
|
||||
|
||||
// 鼠标移动处理
|
||||
handleMouseMove(e) {
|
||||
if (this.isDragging) {
|
||||
const deltaX = e.clientX - this.previousTouchX;
|
||||
const deltaY = e.clientY - this.previousTouchY;
|
||||
|
||||
if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) return;
|
||||
|
||||
this.cameraX -= deltaX * 0.05 / this.cameraZoom;
|
||||
this.cameraY += deltaY * 0.05 / this.cameraZoom;
|
||||
|
||||
this.previousTouchX = e.clientX;
|
||||
this.previousTouchY = e.clientY;
|
||||
}
|
||||
},
|
||||
|
||||
// 鼠标释放处理
|
||||
handleMouseUp() {
|
||||
this.isDragging = false;
|
||||
},
|
||||
|
||||
// 鼠标离开处理
|
||||
handleMouseLeave() {
|
||||
this.isDragging = false;
|
||||
},
|
||||
|
||||
// 滚轮处理
|
||||
handleWheel(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let newZoom = e.deltaY < 0
|
||||
? this.cameraZoom * 1.05
|
||||
: this.cameraZoom / 1.05;
|
||||
|
||||
newZoom = Math.max(this.zoomRange.min, Math.min(this.zoomRange.max, newZoom));
|
||||
|
||||
if (newZoom !== this.cameraZoom) {
|
||||
this.cameraZoom = newZoom;
|
||||
this.updateRendererSize();
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化WebSocket
|
||||
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.globalData);
|
||||
this.createYellowDot(this.carPosition.x, this.carPosition.y);
|
||||
} 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;
|
||||
};
|
||||
},
|
||||
|
||||
// 关闭WebSocket
|
||||
closeWebSocket() {
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = null;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化路径系统
|
||||
initPathSystem() {
|
||||
const geometry = new THREE.BufferGeometry();
|
||||
const material = new THREE.PointsMaterial({
|
||||
size: this.pointSize * 1.5,
|
||||
color: 0xFFD700,
|
||||
sizeAttenuation: false,
|
||||
transparent: true,
|
||||
opacity: 0.8,
|
||||
depthWrite: false
|
||||
});
|
||||
|
||||
const pathPoints = new THREE.Points(geometry, material);
|
||||
this.scene.add(pathPoints);
|
||||
|
||||
// 存储引用
|
||||
this.geometryMap.set('path', geometry);
|
||||
this.materialMap.set('path', material);
|
||||
},
|
||||
|
||||
// 添加路径点
|
||||
addPathPoint(position) {
|
||||
if (!this.recordPath) return
|
||||
// 检查是否与上一个点位置相同
|
||||
if (this.carPath.length > 0) {
|
||||
const lastPoint = this.carPath[this.carPath.length - 1];
|
||||
if (this.arePositionsEqual(position, lastPoint)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.carPath.push({
|
||||
x: position.x,
|
||||
y: position.y,
|
||||
angle: position.angle
|
||||
});
|
||||
},
|
||||
|
||||
// 判断位置是否相同
|
||||
arePositionsEqual(pos1, pos2) {
|
||||
if (!pos1 || !pos2) return false;
|
||||
const dx = Math.abs(pos1.x - pos2.x);
|
||||
const dy = Math.abs(pos1.y - pos2.y);
|
||||
return dx < 0.001 && dy < 0.001;
|
||||
},
|
||||
|
||||
// 更新路径显示
|
||||
updatePathDisplay() {
|
||||
if (this.carPath.length === 0) return;
|
||||
|
||||
const geometry = this.geometryMap.get('path');
|
||||
if (geometry) {
|
||||
this.updateBufferGeometry(geometry, this.carPath, 3);
|
||||
}
|
||||
},
|
||||
|
||||
// 辅助方法：如果场景就绪则渲染
|
||||
renderIfReady() {
|
||||
if (this.renderer && this.scene && this.camera) {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化测试数据
|
||||
init() {
|
||||
this.initWebSocket()
|
||||
|
||||
// this.isLoading = false;
|
||||
// const pointData = points.data
|
||||
// this.updatePointCloud(pointData);
|
||||
// this.createYellowDot(this.carPosition.x, this.carPosition.y)
|
||||
// setTimeout(() => {
|
||||
// const arr = points1.data
|
||||
// this.updatePointCloud(arr);
|
||||
// }, 1000)
|
||||
// setTimeout(() => {
|
||||
// const arr = points2.data
|
||||
// this.updatePointCloud(arr);
|
||||
// }, 2000)
|
||||
|
||||
// this.isLoading = false;
|
||||
// const initialPoints = [
|
||||
// {x: 1, y: 0},
|
||||
// {x: 0, y: 1},
|
||||
// {x: -1, y: 0},
|
||||
// {x: 0, y: -1}
|
||||
// ];
|
||||
// this.updatePointCloud(initialPoints);
|
||||
// if (this.carPosition) {
|
||||
// this.createYellowDot(this.carPosition.x, this.carPosition.y);
|
||||
// }
|
||||
// let multiplier = 1;
|
||||
// const generatePointsInterval = setInterval(() => {
|
||||
// multiplier++;
|
||||
// const newPoints = [
|
||||
// {x: multiplier * 20, y: 0},
|
||||
// {x: 0, y: multiplier * 20},
|
||||
// {x: -multiplier * 20, y: 0},
|
||||
// {x: 0, y: -multiplier * 20}
|
||||
// ];
|
||||
// this.updatePointCloud(newPoints);
|
||||
// if (multiplier >= 25) {
|
||||
// clearInterval(generatePointsInterval);
|
||||
// console.log('点云生成完成，共100组数据');
|
||||
// }
|
||||
// }, 2000);
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// clearInterval(generatePointsInterval);
|
||||
// });
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -115,9 +115,9 @@ export default {
|
||||
// "error_type": 1}
|
||||
// ],
|
||||
// forkTipObstacles: '1',
|
||||
// auto_loop_enable: '1',
|
||||
// auto_loop_enable: '0',
|
||||
// auto_back_enable: '',
|
||||
// auto_back_finish: '',
|
||||
// auto_back_finish: '1',
|
||||
// ready: '0'
|
||||
// },
|
||||
taskSeq: [],
|
||||
@@ -145,6 +145,21 @@ export default {
|
||||
// this.taskSeq = []
|
||||
// this.currentStep = null
|
||||
// }
|
||||
// let multiplier = 1;
|
||||
// const generatePointsInterval = setInterval(() => {
|
||||
// multiplier++;
|
||||
// this.topInfo.x = multiplier * 5
|
||||
// this.topInfo.y = multiplier * 5
|
||||
// this.topInfo.theta = this.topInfo.theta * multiplier
|
||||
// this.$store.dispatch('setAgvObj', this.topInfo)
|
||||
// if (multiplier >= 25) {
|
||||
// clearInterval(generatePointsInterval);
|
||||
// console.log(multiplier);
|
||||
// }
|
||||
// }, 2000);
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// clearInterval(generatePointsInterval);
|
||||
// });
|
||||
this.initWebSocket()
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -369,10 +369,10 @@
|
||||
right 0
|
||||
z-index 30
|
||||
.zoom_data
|
||||
width .7rem
|
||||
font-size .16rem
|
||||
height .44rem
|
||||
line-height .44rem
|
||||
width .9rem
|
||||
font-size .2rem
|
||||
height .6rem
|
||||
line-height .6rem
|
||||
color #00d9f3
|
||||
text-align center
|
||||
border-left 1px solid #009fde
|
||||
@@ -380,10 +380,11 @@
|
||||
box-sizing border-box
|
||||
.zoom_btn
|
||||
display block
|
||||
width .7rem
|
||||
width .9rem
|
||||
margin 0 !important
|
||||
height .44rem
|
||||
line-height .44rem
|
||||
height .6rem
|
||||
font-size .3rem
|
||||
line-height .6rem
|
||||
|
||||
.el-loading-mask {
|
||||
background-color: rgba(0, 11, 41, .4)
|
||||
|
||||
Reference in New Issue
Block a user