From 54d5052b61ed66bcb55890170173c23ef09ed91d Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Fri, 25 Jul 2025 10:06:56 +0800 Subject: [PATCH] map --- src/config/mork.js | 60 +++++++++++++++++++-------------------- src/pages/modules/map.vue | 40 ++++++++++++-------------- 2 files changed, 48 insertions(+), 52 deletions(-) diff --git a/src/config/mork.js b/src/config/mork.js index 804cfc2..d101ebc 100644 --- a/src/config/mork.js +++ b/src/config/mork.js @@ -33,11 +33,11 @@ export const queryMapAllStation = () => { }, { "station_id": 2, - "station_code": "Goal_21", - "station_name": "Goal_21", - "station_type": "SYSTEM", - "action_type": "Move", - "x": 100.30318, + "station_code": "B1", + "station_name": "B1", + "station_type": "STATION", + "action_type": "Customize", + "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 } @@ -56,29 +56,29 @@ export const queryMapAllStation = () => { } export const getRouteInfo = () => { let res = [ - { - "route_id": 1, - "start_id": 1, - "end_id": 2, - "start_x": 0.0, - "start_y": 0.0, - "end_x": 100.30318, - "end_y": 0.123685, - "navigation_mode": "1", - "route_type": "1" - }, - { - "route_id": 2, - "start_id": 2, - "end_id": 3, - "start_x": -100.30318, - "start_y": 0.123685, - "end_x": 200.0227, - "end_y": 0.316379, - "navigation_mode": "0", - "route_type": "1" - } - ] + { + "route_id": 1, + "start_id": 1, + "end_id": 2, + "start_x": 0.0, + "start_y": 0.0, + "end_x": -3.30318, + "end_y": 0.123685, + "navigation_mode": "1", + "route_type": "1" + }, + { + "route_id": 2, + "start_id": 2, + "end_id": 3, + "start_x": -3.30318, + "start_y": 0.123685, + "end_x": -6.0227, + "end_y": 0.316379, + "navigation_mode": "0", + "route_type": "1" + } +] return res } export const imageUrl = require('../images/new/apt_map.png') @@ -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 diff --git a/src/pages/modules/map.vue b/src/pages/modules/map.vue index b566066..948b0c3 100644 --- a/src/pages/modules/map.vue +++ b/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 startY = point.start_y * this.mapData.resolution - const endX = point.end_x * this.mapData.resolution - const endY = point.end_y * this.mapData.resolution + const startX = (point.start_x - this.mapData.x) / this.mapData.resolution + const startY = this.mapData.height - (point.start_y - this.mapData.y) / this.mapData.resolution + const endX = (point.end_x - this.mapData.x) / 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 y = point.y * this.mapData.resolution + const x = (point.x - this.mapData.x) / 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.restore() + this.ctx.fillText(point.station_name, x, y + 18) }) } }, @@ -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 y = point.y * -1 * this.mapData.resolution + let x = (point.x - this.mapData.x) / 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 - line-height 30px + font-size 14px + line-height 24px text-align center p color #fff - font-size 16px - line-height 30px + font-size 14px + line-height 24px text-align center @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); }