map

src/config/mork.js

@@ -33,11 +33,11 @@ export const queryMapAllStation = () => {
     },
     {
         "station_id": 2,
-        "station_code": "Goal_21",
+        "station_code": "B1",
-        "station_name": "Goal_21",
+        "station_name": "B1",
-        "station_type": "SYSTEM",
+        "station_type": "STATION",
-        "action_type": "Move",
+        "action_type": "Customize",
-        "x": 100.30318,
+        "x": -3.30318,
         "y": 0.123685,
         "angle": 0.0959
     },
@@ -47,7 +47,7 @@ export const queryMapAllStation = () => {
         "station_name": "C",
         "station_type": "STATION",
         "action_type": "Customize",
-        "x": 200.0227,
+        "x": -6.0227,
         "y": 0.316379,
         "angle": 0.136773
     }
@@ -62,7 +62,7 @@ export const getRouteInfo = () => {
         "end_id": 2,
         "start_x": 0.0,
         "start_y": 0.0,
-          "end_x": 100.30318,
+        "end_x": -3.30318,
         "end_y": 0.123685,
         "navigation_mode": "1",
         "route_type": "1"
@@ -71,9 +71,9 @@ export const getRouteInfo = () => {
         "route_id": 2,
         "start_id": 2,
         "end_id": 3,
-          "start_x": -100.30318,
+        "start_x": -3.30318,
         "start_y": 0.123685,
-          "end_x": 200.0227,
+        "end_x": -6.0227,
         "end_y": 0.316379,
         "navigation_mode": "0",
         "route_type": "1"
@@ -89,7 +89,7 @@ export const getMapInfoByCode = () => {
     "mapImageAddress": imageUrl,
     "width": 359.0,
     "height": 287.0,
-    "resolution": 1,
+    "resolution": 0.05,
     "x": -13.7,
     "y": -7.1,
     "angle": 0.0

src/pages/modules/map.vue

@@ -137,11 +137,10 @@ export default {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
       const img = new Image()
       img.src = `${this.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
+      // img.src = `${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.x * -1 * this.mapData.resolution, 0)
-        this.ctx.scale(1, -1)
         this.drawPath()
         this.drawMarkers()
       }
@@ -149,10 +148,10 @@ export default {
     drawPath () {
       this.ctx.beginPath()
       this.pathData.forEach((point, index) => {
-        const startX = point.start_x * this.mapData.resolution
+        const startX = (point.start_x - this.mapData.x) / this.mapData.resolution
-        const startY = point.start_y * this.mapData.resolution
+        const startY = this.mapData.height - (point.start_y - this.mapData.y) / this.mapData.resolution
-        const endX = point.end_x * this.mapData.resolution
+        const endX = (point.end_x - this.mapData.x) / this.mapData.resolution
-        const endY = point.end_y * this.mapData.resolution
+        const endY = this.mapData.height - (point.end_y - this.mapData.y) / this.mapData.resolution
         this.ctx.moveTo(startX, startY)
         this.ctx.lineTo(endX, endY)
         this.ctx.strokeStyle = '#009de5'
@@ -165,23 +164,20 @@ export default {
       markerImg.src = markerImage
       markerImg.onload = () => {
         this.pointData.forEach(point => {
-          const x = point.x * this.mapData.resolution
+          const x = (point.x - this.mapData.x) / this.mapData.resolution
-          const y = point.y * this.mapData.resolution
+          const y = this.mapData.height - (point.y - this.mapData.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.arc(x, y, 5, 0, Math.PI * 2)
             this.ctx.fillStyle = '#59ccd2'
             this.ctx.fill()
           } else {
-            this.ctx.drawImage(markerImg, x - 10, y - 10, 20, 20)
+            this.ctx.drawImage(markerImg, x - 5, y - 5, 10, 10)
           }
-          this.ctx.save()
-          this.ctx.scale(1, -1)
           this.ctx.font = '12px Arial'
           this.ctx.fillStyle = 'white'
           this.ctx.textAlign = 'center'
-          this.ctx.fillText(point.station_name, x, -y + 25)
+          this.ctx.fillText(point.station_name, x, y + 18)
-          this.ctx.restore()
         })
       }
     },
@@ -190,8 +186,8 @@ export default {
       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 x = (point.x - this.mapData.x) / this.mapData.resolution
-        let y = point.y * -1 * this.mapData.resolution
+        let y = this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution
         x = Math.abs(x) === 0 ? 0 : x
         y = Math.abs(y) === 0 ? 0 : y
         // 检查点击位置是否在标记图片内
@@ -204,7 +200,7 @@ export default {
             this.showPopup = true
             this.popupStyle = {
               left: `${event.clientX - 40}px`,
-              top: `${event.clientY - 200}px`
+              top: `${event.clientY - 150}px`
             }
             this.initCanvas()
             event.stopPropagation()
@@ -258,17 +254,17 @@ export default {
   padding 10px
   box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
   z-index 100
-  min-width 180px
+  min-width 150px
   animation fadeIn 0.2s ease-out
   h3
     color #fff
-    font-size 16px
+    font-size 14px
-    line-height 30px
+    line-height 24px
     text-align center
   p
     color #fff
-    font-size 16px
+    font-size 14px
-    line-height 30px
+    line-height 24px
     text-align center
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(5px); }