From 745b2240626051730b79cdadc1d497bb4add63eb Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Thu, 29 Jan 2026 17:09:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E4=BA=91=E5=B0=8F=E8=BD=A6=E8=B7=AF?=
 =?UTF-8?q?=E5=BE=84=E3=80=81=E8=B5=B7=E5=A7=8B=E7=82=B9=E3=80=81=E5=B0=8F?=
 =?UTF-8?q?=E8=BD=A6=E5=9B=BE=E7=89=87=EF=BC=8C=E5=9B=9E=E9=80=80=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/modules/build/index.vue     |  10 +-
 src/pages/modules/build/three-map.vue | 979 ++++++++++++++++++++++++++
 src/pages/shells/index.vue            |  19 +-
 src/style/common.styl                 |  15 +-
 4 files changed, 1011 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/modules/build/three-map.vue

diff --git a/src/pages/modules/build/index.vue b/src/pages/modules/build/index.vue
index 701cfa6..4e69607 100644
--- a/src/pages/modules/build/index.vue
+++ b/src/pages/modules/build/index.vue
@@ -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'), {
diff --git a/src/pages/modules/build/three-map.vue b/src/pages/modules/build/three-map.vue
new file mode 100644
index 0000000..e3d960a
--- /dev/null
+++ b/src/pages/modules/build/three-map.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/shells/index.vue b/src/pages/shells/index.vue
index 252630b..959923a 100644
--- a/src/pages/shells/index.vue
+++ b/src/pages/shells/index.vue
@@ -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 () {
diff --git a/src/style/common.styl b/src/style/common.styl
index d4f025d..15f0b33 100644
--- a/src/style/common.styl
+++ b/src/style/common.styl
@@ -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)