xiug

src/pages/modules/gl-map-2.vue

@@ -14,9 +14,9 @@
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { mapGetters } from 'vuex'
-// import { points } from '../../config/point.js'
-// import { points1 } from '../../config/point1.js'
-// import { points2 } from '../../config/point2.js'
+import { points } from '../../config/point.js'
+import { points1 } from '../../config/point1.js'
+import { points2 } from '../../config/point2.js'
 
 // 常量定义
 const UPDATE_INTERVAL = 800
@@ -24,6 +24,7 @@ const DEFAULT_VIEW_SIZE = 20
 const BOUND_MARGIN = 0.1
 const MIN_ZOOM_RATIO = 0.5
 const MAX_ZOOM_RATIO = 3
+const AUTO_ADJUST_THRESHOLD = 100 // 每新增100个点检查是否需要调整视口
 
 export default {
   name: 'PointCloudMap',
@@ -42,6 +43,7 @@ export default {
       allPoints: [],
       pointCount: 0,
       pointScale: 1.0,
+      newPointsSinceLastAdjust: 0, // 新增点计数器
       
       // 小车相关
       vehicleImage: require('../../images/new/agv.png'),
@@ -102,7 +104,6 @@ export default {
       this.initPointCloud()
       this.initCar()
       this.startAnimationLoop()
-      // 核心修改：移除窗口大小变化监听，不做响应式调整
     },
     
     /**
@@ -294,18 +295,18 @@ export default {
     },
 
     init() {
-      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)
+      // 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)
     },
     
     updatePointCloud(points) {
@@ -321,10 +322,17 @@ export default {
       
       this.allPoints = [...this.allPoints, ...newUniquePoints]
       this.pointCount = this.allPoints.length
+      this.newPointsSinceLastAdjust += newUniquePoints.length
 
       this.updatePointBounds(newUniquePoints)
       
       this.updatePointCloudGeometry(newUniquePoints)
+      
+      // 定期检查是否需要调整视口
+      if (this.newPointsSinceLastAdjust >= AUTO_ADJUST_THRESHOLD) {
+        this.checkAndAdjustViewport()
+        this.newPointsSinceLastAdjust = 0
+      }
     },
     
     updatePointBounds(newPoints) {
@@ -344,6 +352,24 @@ export default {
       }
     },
     
+    /**
+     * 检查并调整视口
+     */
+    checkAndAdjustViewport() {
+      const aspect = this.canvasSize.width / this.canvasSize.height
+      const pointRangeX = this.pointBounds.maxX - this.pointBounds.minX
+      const pointRangeY = this.pointBounds.maxY - this.pointBounds.minY
+      
+      // 计算当前视口能显示的范围
+      const currentViewWidth = this.viewSize * aspect
+      const currentViewHeight = this.viewSize
+      
+      // 如果点云范围超过当前视口的80%，则调整视口
+      if (pointRangeX > currentViewWidth * 0.8 || pointRangeY > currentViewHeight * 0.8) {
+        this.adjustCameraByBounds()
+      }
+    },
+    
     updatePointCloudGeometry(newUniquePoints) {
       const positionAttribute = this.pointCloudGeometry.getAttribute('position')
       let positions
@@ -392,6 +418,9 @@ export default {
         const requiredViewSizeX = pointRangeX * (1 + BOUND_MARGIN)
         const requiredViewSizeY = pointRangeY * (1 + BOUND_MARGIN)
         baseViewSize = Math.max(requiredViewSizeX / aspect, requiredViewSizeY)
+        
+        // 确保视口不会太小
+        baseViewSize = Math.max(baseViewSize, DEFAULT_VIEW_SIZE)
       }
       this.baseViewSize = baseViewSize
 
@@ -544,4 +573,4 @@ export default {
   z-index: 100
   display: flex
   align-items: center
-</style>
+</style>