修改点云和地图

src/pages/modules/map.vue

@@ -14,11 +14,19 @@
         @mouseup="handleMouseUp"
         @mouseleave="handleMouseUp"
       ></canvas>
-      <!-- <el-row type="flex" justify="end" class="map_tools">
-        <el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
+      <el-row type="flex" justify="end" class="map_tools">
+        <el-button 
+          type="primary" 
+          :disabled="!carPosition?.x || !carPosition?.y"
+          icon="el-icon-location"
+          size="mini" 
+          style="border-left: 0;border-top: 0;border-bottom: 0;border-radius: 0;" 
+          @click="centerToCar"
+        ></el-button>
+        <el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;margin-left: 0" @click="zoomOut"></el-button>
         <div class="zoom_data">{{ zoomPercentage }}%</div>
         <el-button type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" style="border: 0;border-radius: 0;" @click="zoomIn"></el-button>
-      </el-row> -->
+      </el-row>
     </div>
     <div
       v-if="showPopup"
@@ -120,13 +128,31 @@ export default {
   mounted () {
     this.preloadMarkerImage()
     this.preloadCarImage()
-    this.loadAllDataInParallel()
+    this.loadAllDataInParallel().then(() => {
+      this.waitForResourcesReady().then(() => {
+        this.centerToCar();
+      });
+    });
     document.addEventListener('click', this.handleDocumentClick)
   },
   beforeDestroy () {
     document.removeEventListener('click', this.handleDocumentClick)
   },
   methods: {
+    waitForResourcesReady() {
+      return new Promise((resolve) => {
+        const checkReady = () => {
+          const isImagesReady = this.imageLoadStatus.map && this.imageLoadStatus.marker && this.imageLoadStatus.car;
+          const isCanvasReady = this.canvas && this.ctx;
+          if (isImagesReady && isCanvasReady) {
+            resolve();
+          } else {
+            setTimeout(checkReady, 100);
+          }
+        };
+        checkReady();
+      });
+    },
     preloadCarImage () {
       if (this.cachedImages.car) {
         this.imageLoadStatus.car = true
@@ -210,9 +236,11 @@ export default {
         this.initCanvas()
         await this.loadMapImage()
         this.loading.close()
+        return true
       } catch (e) {
         this.$message.error(`数据加载失败: ${e.message || '未知错误'}`)
         this.loading.close()
+        return false
       }
     },
     async _getMapInfoByCode () {
@@ -372,7 +400,7 @@ export default {
         20,
         20
       )
-      // this.ctx.restore()
+      this.ctx.restore()
     },
     handleCanvasClick (event) {
       const rect = this.canvas.getBoundingClientRect()