root/apt15e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

map

Browse Source
This commit is contained in:
caill
2025-07-25 10:06:56 +08:00
parent 20df8e895a
commit 54d5052b61
2 changed files with 48 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/config/mork.js
View File

@@ -33,11 +33,11 @@ export const queryMapAllStation = () => {
}, },
{ {
"station_id": 2, "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, "y": 0.123685,
"angle": 0.0959 "angle": 0.0959
}, },
@@ -47,7 +47,7 @@ export const queryMapAllStation = () => {
"station_name": "C", "station_name": "C",
"station_type": "STATION", "station_type": "STATION",
"action_type": "Customize", "action_type": "Customize",
"x": 200.0227, "x": -6.0227,
"y": 0.316379, "y": 0.316379,
"angle": 0.136773 "angle": 0.136773
} }
@@ -56,29 +56,29 @@ export const queryMapAllStation = () => {
} }
export const getRouteInfo = () => { export const getRouteInfo = () => {
let res = [ let res = [
{ {
"route_id": 1, "route_id": 1,
"start_id": 1, "start_id": 1,
"end_id": 2, "end_id": 2,
"start_x": 0.0, "start_x": 0.0,
"start_y": 0.0, "start_y": 0.0,
"end_x": 100.30318, "end_x": -3.30318,
"end_y": 0.123685, "end_y": 0.123685,
"navigation_mode": "1", "navigation_mode": "1",
"route_type": "1" "route_type": "1"
}, },
{ {
"route_id": 2, "route_id": 2,
"start_id": 2, "start_id": 2,
"end_id": 3, "end_id": 3,
"start_x": -100.30318, "start_x": -3.30318,
"start_y": 0.123685, "start_y": 0.123685,
"end_x": 200.0227, "end_x": -6.0227,
"end_y": 0.316379, "end_y": 0.316379,
"navigation_mode": "0", "navigation_mode": "0",
"route_type": "1" "route_type": "1"
} }
] ]
return res return res
} }
export const imageUrl = require('../images/new/apt_map.png') export const imageUrl = require('../images/new/apt_map.png')
@@ -89,7 +89,7 @@ export const getMapInfoByCode = () => {
"mapImageAddress": imageUrl, "mapImageAddress": imageUrl,
"width": 359.0, "width": 359.0,
"height": 287.0, "height": 287.0,
"resolution": 1, "resolution": 0.05,
"x": -13.7, "x": -13.7,
"y": -7.1, "y": -7.1,
"angle": 0.0 "angle": 0.0

40
src/pages/modules/map.vue
View File

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