地图和操作

src/pages/modules/map.vue

@@ -2,7 +2,18 @@
 <template>
   <div class="page_container">
     <div class="canvas-container">
-      <canvas id="mapCanvas" ref="mapCanvas" @wheel="handleZoom"  @click="handleCanvasClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove"></canvas>
+      <canvas
+        id="mapCanvas"
+        ref="mapCanvas"
+        @wheel="handleZoom"
+        @click="handleCanvasClick"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @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>
         <div class="zoom_data">{{ zoomPercentage }}%</div>
@@ -17,11 +28,11 @@
     >
       <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
         <el-col :span="10"><h3>编号</h3></el-col>
-        <el-col :span="14"><p>{{selectedPoint.id}}</p></el-col>
+        <el-col :span="14"><p>{{selectedPoint.station_code}}</p></el-col>
       </el-row>
       <el-row type="flex" justify="space-between" class="popup-content">
         <el-col :span="10"><h3>别名</h3></el-col>
-        <el-col :span="14"><p>-</p></el-col>
+        <el-col :span="14"><p>{{selectedPoint.station_name}}</p></el-col>
       </el-row>
       <el-row type="flex" justify="space-between" class="popup-content">
         <el-col :span="10"><h3>X坐标</h3></el-col>
@@ -33,7 +44,7 @@
       </el-row>
       <el-row type="flex" justify="space-between" class="popup-content">
         <el-col :span="10"><h3>角度值</h3></el-col>
-        <el-col :span="14"><p>0</p></el-col>
+        <el-col :span="14"><p>{{ selectedPoint.angle }}</p></el-col>
       </el-row>
     </div>
   </div>
@@ -42,26 +53,25 @@
 <script>
 // import { throttle } from 'lodash'
 import markerImage from '@images/new/agv.png'
-import { fetchMapData, fetchPathData } from '@config/getData.js'
+import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
+import canvasZoomDrag from '@config/canvasZoomDrag'
 export default {
   data () {
     return {
-      scale: 1, // 缩放比例
       canvas: null, // Canvas 元素
       ctx: null, // Canvas 绘图上下文
-      touchStart: null, // 触摸起点
-      zoomPercentage: 100, // 当前缩放百分比
-      mapData: null, // 存储从后端获取的地图数据
-      pathData: null, // 存储从后端获取的路径数据
+      mapData: null, // 地图数据
+      pathData: null, // 路径数据
+      pointData: null, // 点位数据
       showPopup: false,
       selectedPoint: {},
       popupStyle: {left: '0px', top: '0px'},
       selectedPointId: null
-
     }
   },
+  mixins: [canvasZoomDrag],
   mounted () {
-    this._fetchMapData()
+    this._getMapInfoByCode()
     document.addEventListener('click', this.handleDocumentClick)
   },
   beforeDestroy () {
@@ -69,26 +79,53 @@ export default {
     document.removeEventListener('click', this.handleDocumentClick)
   },
   methods: {
-    async _fetchMapData () {
+    async _getMapInfoByCode () {
       try {
-        let res = await fetchMapData()
+        let res = await getMapInfoByCode()
         if (res) {
-          this.mapData = res.data
-          this._fetchPathData()
+          this.mapData = res
+          this._getRouteInfo()
         }
       } catch (e) {
         this.$message.error(e)
       }
     },
-    async _fetchPathData () {
+    async _getRouteInfo () {
       try {
-        let res = await fetchPathData()
-        this.pathData = [...res.data]
+        let res = await getRouteInfo()
+        this.pathData = [...res]
+        this._queryMapAllStation()
+      } catch (e) {
+        this.$message.error(e)
+      }
+    },
+    async _queryMapAllStation () {
+      try {
+        let res = await queryMapAllStation()
+        const stations = [...res]
+        this.pointData = this.filterPointData(this.pathData, stations)
         this.initCanvas()
       } catch (e) {
         this.$message.error(e)
       }
     },
+    filterPointData (routes, stations) {
+      const result = []
+      const seenStationIds = new Set()
+      routes.forEach((route) => {
+        const startStation = stations.find((station) => station.station_id === route.start_id)
+        const endStation = stations.find((station) => station.station_id === route.end_id)
+        if (startStation && !seenStationIds.has(startStation.station_id)) {
+          result.push(startStation)
+          seenStationIds.add(startStation.station_id)
+        }
+        if (endStation && !seenStationIds.has(endStation.station_id)) {
+          result.push(endStation)
+          seenStationIds.add(endStation.station_id) // 标记为已添加
+        }
+      })
+      return result
+    },
     initCanvas () {
       this.canvas = this.$refs.mapCanvas
       this.ctx = this.canvas.getContext('2d')
@@ -99,11 +136,11 @@ export default {
     redrawCanvas () {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
       const img = new Image()
-      img.src = this.mapData.image
+      img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
       img.onload = () => {
         this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
         this.ctx.save()
-        this.ctx.translate(this.mapData.leftBottomCoordinate.x * -1 * this.mapData.pixelRatio, 0)
+        this.ctx.translate(this.mapData.x * -1 * this.mapData.resolution, 0)
         this.ctx.scale(1, -1)
         this.drawPath()
         this.drawMarkers()
@@ -112,26 +149,25 @@ export default {
     drawPath () {
       this.ctx.beginPath()
       this.pathData.forEach((point, index) => {
-        const x = point.x * this.mapData.pixelRatio
-        const y = point.y * this.mapData.pixelRatio
-        if (index === 0) {
-          this.ctx.moveTo(x, y)
-        } else {
-          this.ctx.lineTo(x, y)
-        }
+        const startX = point.start_x * this.mapData.resolution
+        const startY = point.start_y * this.mapData.resolution
+        const endX = point.end_x * this.mapData.resolution
+        const endY = point.end_y * this.mapData.resolution
+        this.ctx.moveTo(startX, startY)
+        this.ctx.lineTo(endX, endY)
+        this.ctx.strokeStyle = '#009de5'
+        this.ctx.lineWidth = 3
+        this.ctx.stroke()
       })
-      this.ctx.strokeStyle = '#009de5'
-      this.ctx.lineWidth = 3
-      this.ctx.stroke()
     },
     drawMarkers () {
       const markerImg = new Image()
       markerImg.src = markerImage
       markerImg.onload = () => {
-        this.pathData.forEach(point => {
-          const x = point.x * this.mapData.pixelRatio
-          const y = point.y * this.mapData.pixelRatio
-          if (point.id === this.selectedPointId) {
+        this.pointData.forEach(point => {
+          const x = point.x * this.mapData.resolution
+          const y = point.y * this.mapData.resolution
+          if (point.station_id === this.selectedPointId) {
             this.ctx.beginPath()
             this.ctx.arc(x, y, 10, 0, Math.PI * 2)
             this.ctx.fillStyle = '#59ccd2'
@@ -144,24 +180,26 @@ export default {
           this.ctx.font = '12px Arial'
           this.ctx.fillStyle = 'white'
           this.ctx.textAlign = 'center'
-          this.ctx.fillText(point.id, x, -y + 25)
+          this.ctx.fillText(point.station_name, x, -y + 25)
           this.ctx.restore()
         })
       }
     },
     handleCanvasClick (event) {
       const rect = this.canvas.getBoundingClientRect()
-      const mouseX = event.clientX - rect.left
-      const mouseY = event.clientY - rect.top
-      this.pathData.forEach(point => {
-        const x = (point.x - this.mapData.leftBottomCoordinate.x) * this.mapData.pixelRatio
-        const y = point.y * -1 * this.mapData.pixelRatio
+      const mouseX = (event.clientX - rect.left) / this.scale
+      const mouseY = (event.clientY - rect.top) / this.scale
+      this.pointData.forEach(point => {
+        let x = (point.x - this.mapData.x) * this.mapData.resolution
+        let y = point.y * -1 * this.mapData.resolution
+        x = Math.abs(x) === 0 ? 0 : x
+        y = Math.abs(y) === 0 ? 0 : y
         // 检查点击位置是否在标记图片内
         if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
-          if (this.selectedPointId === point.id) {
+          if (this.selectedPointId === point.station_id) {
             this.resetSelection()
           } else {
-            this.selectedPointId = point.id
+            this.selectedPointId = point.station_id
             this.selectedPoint = point
             this.showPopup = true
             this.popupStyle = {
@@ -184,55 +222,6 @@ export default {
         this.showPopup = false
         this.initCanvas()
       }
-    },
-    zoom (step) {
-      this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
-      this.zoomPercentage = Math.round(this.scale * 100)
-      this.applyTransform()
-    },
-    applyTransform () {
-      this.canvas.style.transform = `scale(${this.scale})`
-    },
-    // 鼠标滚动缩放
-    handleZoom (event) {
-      event.preventDefault()
-      const delta = event.deltaY
-      const step = delta > 0 ? -1 : 1
-      this.zoom(step)
-    },
-    // 触摸开始事件
-    handleTouchStart (event) {
-      this.touchStart = Array.from(event.touches).map(touch => ({
-        x: touch.clientX,
-        y: touch.clientY
-      }))
-    },
-    // 触摸移动事件
-    handleTouchMove (event) {
-      if (this.touchStart && this.touchStart.length === 2 && event.touches.length === 2) {
-        const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
-        const currentDist = this.getDistance(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY)
-        const step = (currentDist - startDist) / startDist
-        this.zoom(step)
-      }
-      this.touchStart = Array.from(event.touches).map(touch => ({
-        x: touch.clientX,
-        y: touch.clientY
-      }))
-    },
-    // 计算两点之间的距离
-    getDistance (x1, y1, x2, y2) {
-      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
-    },
-    zoomIn () {
-      if (this.scale < 2) {
-        this.zoom(8) // 每次放大8%
-      }
-    },
-    zoomOut () {
-      if (this.scale > 0.02) {
-        this.zoom(-8) // 每次缩小8%
-      }
     }
   }
 }
@@ -246,9 +235,8 @@ export default {
   align-items: center;
   height calc(100% - .32rem)
   background-color rgba(4, 33, 58, 70%)
-  // background-color rgb(11 68 137 / 70%)
   box-shadow inset 1px 1px 7px 2px #4d9bcd
-  overflow auto
+  overflow hidden
 .map_tools
   position absolute
   top 0