feat: 加载地图

src/views/Address.vue

@@ -93,7 +93,7 @@ const testConnect = async () => {
         robotStore.setRobotType(ruleForm.value.robotType)
         if (ruleForm.value.robotType === 'inspection') {
             robotStore.setAgvDeviceId('src1100')
-            robotStore.setAlmDeviceId('aubo_arm')
+            robotStore.setAlmDeviceId('huayan_arm')
             robotStore.setSpkDeviceId('spk1')
             robotStore.setMicDeviceId('mic1')
             robotStore.setCameraDeviceId('real_cam1')

src/views/chassis/Chassis.vue

@@ -198,7 +198,6 @@ const run = async (data) => {
         deviceId: robotStore.agvDeviceId,
         ...data
     })
-    console.log('res', res)
     if (res.code === 200) {
         run(moveRobotData.value)
     } else {

src/views/chassis/MapCanvas.vue

@@ -93,6 +93,7 @@ let canvasCtx;                 // 2D 渲染上下文
 const containerRef = ref(null)
 const mapCanvasRef = ref(null)
 let resizeObserver
+let eventsBound = false
 
 const init = () => {
     mapCanvas = mapCanvasRef.value;
@@ -285,26 +286,36 @@ const drawAllRobots = (ctx) => {
 }
 
 const bindEvent = () => {
-    // ── 鼠标移动：更新坐标、拖拽平移、悬停检测 ──
+    if (eventsBound) return
-    mapCanvas.addEventListener('mousemove', (mouseEvent) => {
+    eventsBound = true
-        // console.log('mouseEvent.clientX', mouseEvent.clientX)
+
+    let activePointerId = null
+    let lastPointerX = 0
+    let lastPointerY = 0
+
+    // Pointer Events 同时支持鼠标、触控笔和 Pad 触摸。
+    mapCanvas.addEventListener('pointermove', (pointerEvent) => {
         const canvasRect = mapCanvas.getBoundingClientRect();        // Canvas 在页面中的位置
-        // console.log('canvasRect.left', canvasRect.left)
+        applicationState.mouseState.screenX = pointerEvent.clientX - canvasRect.left;
-        applicationState.mouseState.screenX = mouseEvent.clientX - canvasRect.left; // 鼠标在 Canvas 上的 X
+        applicationState.mouseState.screenY = pointerEvent.clientY - canvasRect.top;
-        applicationState.mouseState.screenY = mouseEvent.clientY - canvasRect.top;  // 鼠标在 Canvas 上的 Y
         // 反算世界坐标
         const worldPos = screenToWorld(applicationState.mouseState.screenX, applicationState.mouseState.screenY, applicationState);
         applicationState.mouseState.worldX = worldPos.x;
         applicationState.mouseState.worldY = worldPos.y;
 
-        // 如果正在拖拽，平移相机
+        if (applicationState.mouseState.isDragging && pointerEvent.pointerId === activePointerId) {
-        if (applicationState.mouseState.isDragging) {
+            pointerEvent.preventDefault()
-            applicationState.camera.centerX -= mouseEvent.movementX / applicationState.camera.pixelsPerMeter; // 水平平移
+            const movementX = pointerEvent.clientX - lastPointerX
-            applicationState.camera.centerY += mouseEvent.movementY / applicationState.camera.pixelsPerMeter; // 垂直平移（Y翻转）
+            const movementY = pointerEvent.clientY - lastPointerY
+            applicationState.camera.centerX -= movementX / applicationState.camera.pixelsPerMeter;
+            applicationState.camera.centerY += movementY / applicationState.camera.pixelsPerMeter;
+            lastPointerX = pointerEvent.clientX
+            lastPointerY = pointerEvent.clientY
         }
 
-        let hit = hitTestRobots(worldPos.x, worldPos.y, applicationState);
+        if (pointerEvent.pointerType === 'mouse') {
-        updateTooltipDisplay(hit);
+            updateTooltipDisplay(hitTestRobots(worldPos.x, worldPos.y, applicationState));
+        }
     });
 
     mapCanvas.addEventListener('click', (mouseEvent) => {
@@ -314,24 +325,30 @@ const bindEvent = () => {
         const worldPos = screenToWorld(screenX, screenY, applicationState);
     })
 
-    // ── 鼠标按下：开始拖拽 ──
+    mapCanvas.addEventListener('pointerdown', (pointerEvent) => {
-    mapCanvas.addEventListener('mousedown', () => {
         if (!props.isDragging) {
             applicationState.mouseState.isDragging = false;
             return
         }
-        applicationState.mouseState.isDragging = true;               // 标记拖拽开始
+        pointerEvent.preventDefault()
+        activePointerId = pointerEvent.pointerId
+        lastPointerX = pointerEvent.clientX
+        lastPointerY = pointerEvent.clientY
+        applicationState.mouseState.isDragging = true;
+        mapCanvas.setPointerCapture(pointerEvent.pointerId)
     });
 
-    // ── 鼠标抬起：结束拖拽 ──
+    const endPointerDrag = (pointerEvent) => {
-    mapCanvas.addEventListener('mouseup', () => {
+        if (pointerEvent.pointerId !== activePointerId) return
-        applicationState.mouseState.isDragging = false;              // 标记拖拽结束
-    });
-
-    // ── 鼠标离开画布：结束拖拽并隐藏 Tooltip ──
-    mapCanvas.addEventListener('mouseleave', () => {
         applicationState.mouseState.isDragging = false;
-    });
+        if (mapCanvas.hasPointerCapture(pointerEvent.pointerId)) {
+            mapCanvas.releasePointerCapture(pointerEvent.pointerId)
+        }
+        activePointerId = null
+    }
+
+    mapCanvas.addEventListener('pointerup', endPointerDrag);
+    mapCanvas.addEventListener('pointercancel', endPointerDrag);
 
     // ── 滚轮：缩放（向鼠标位置缩放）──
     mapCanvas.addEventListener('wheel', (wheelEvent) => {
@@ -486,6 +503,9 @@ onUnmounted(() => {
         display: block;
         width: 100% !important;
         height: 100% !important;
+        touch-action: none;
+        user-select: none;
+        -webkit-user-select: none;
     }
 
     #tooltip {