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_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

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)
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); }