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 18:43:20 +08:00
parent 1bdd91fb42
commit 1b9c2ba8e4
6 changed files with 650 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,14 +47,35 @@
<el-col :span="14"><p>{{ selectedPoint.angle }}</p></el-col>
</el-row>
</div>
<div
v-if="showPathPopup"
class="point-popup"
:style="pathPopupStyle"
@click.stop
>
<el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
<el-col :span="10"><h3>路径ID</h3></el-col>
<el-col :span="14"><p>{{selectedPath.route_id}}</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>{{getStationNameById(selectedPath.start_id)}}</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>{{getStationNameById(selectedPath.end_id)}}</p></el-col>
</el-row>
</div>
</div>
</template>
<script>
import { throttle } from 'lodash'
import markerImage from '@images/new/agv.png'
import carImage from '@images/new/car.png'
import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
import canvasZoomDrag from '@config/canvasZoomDrag'
import { mapGetters } from 'vuex'
export default {
data () {
return {
@@ -69,25 +90,72 @@ export default {
selectedPointId: null,
cachedImages: {
map: null,
marker: null
marker: null,
car: null
},
imageLoadStatus: {
map: false,
marker: false
marker: false,
car: false
},
showPathPopup: false,
selectedPath: {route_id: null},
pathPopupStyle: { left: '0px', top: '0px' },
pathClickThreshold: 5
}
},
computed: {
...mapGetters(['agvObj']),
carData () {
try {
return JSON.parse(this.agvObj)
} catch (error) {
console.error('解析 JSON 时出错:', error)
return {}
}
}
},
mixins: [canvasZoomDrag],
mounted () {
this.preloadMarkerImage()
this.preloadCarImage()
this.loadAllDataInParallel()
document.addEventListener('click', this.handleDocumentClick)
this.carPositionWatcher = this.$watch(
() => this.carData,
(newVal) => {
if (newVal && newVal.x !== undefined && newVal.y !== undefined) {
this.redrawCanvas()
}
},
{ deep: true }
)
},
beforeDestroy () {
// 移除事件监听
document.removeEventListener('click', this.handleDocumentClick)
if (this.carPositionWatcher) {
this.carPositionWatcher()
}
},
methods: {
preloadCarImage () {
if (this.cachedImages.car) {
this.imageLoadStatus.car = true
return
}
const img = new Image()
img.src = carImage
img.onload = () => {
this.cachedImages.car = img
this.imageLoadStatus.car = true
this.checkImagesLoadedAndRedraw()
}
img.onerror = () => {
console.error('小车图片加载失败')
this.imageLoadStatus.car = true
this.checkImagesLoadedAndRedraw()
}
},
preloadMarkerImage () {
if (this.cachedImages.marker) {
this.imageLoadStatus.marker = true
@@ -131,7 +199,7 @@ export default {
})
},
checkImagesLoadedAndRedraw () {
if (this.imageLoadStatus.map && this.imageLoadStatus.marker) {
if (this.imageLoadStatus.map && this.imageLoadStatus.marker && this.imageLoadStatus.car) {
this.redrawCanvas()
}
},
@@ -230,22 +298,28 @@ export default {
}
this.drawPath()
this.drawMarkers()
this.drawCar()
this.ctx.restore()
}, 30),
drawPath () {
if (!this.pathData.length) return
this.ctx.beginPath()
this.pathData.forEach((point, index) => {
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.beginPath()
this.ctx.moveTo(startX, startY)
this.ctx.lineTo(endX, endY)
if (this.selectedPath.route_id === point.route_id) {
this.ctx.strokeStyle = '#ff5722' // 橙色高亮
this.ctx.lineWidth = 4
} else {
this.ctx.strokeStyle = '#009de5' // 默认蓝色
this.ctx.lineWidth = 2
}
this.ctx.stroke()
})
this.ctx.strokeStyle = '#009de5'
this.ctx.lineWidth = 2
this.ctx.stroke()
},
drawMarkers () {
if (!this.pointData.length) return
@@ -275,10 +349,24 @@ export default {
this.ctx.fillText(point.station_name, x, y + 18)
})
},
drawCar () {
if (!this.carData || !this.cachedImages.car || !this.mapData) return
const carX = (this.carData.x - this.mapData.x) / this.mapData.resolution
const carY = this.mapData.height - (this.carData.y - this.mapData.y) / this.mapData.resolution
this.ctx.drawImage(
this.cachedImages.car,
carX - 35,
carY - 21,
70,
42
)
},
handleCanvasClick (event) {
const rect = this.canvas.getBoundingClientRect()
const mouseX = (event.clientX - rect.left) / this.scale
const mouseY = (event.clientY - rect.top) / this.scale
// 1. 优先检测点位点击
let pointClicked = false
this.pointData.forEach(point => {
let x = (point.x - this.mapData.x) / this.mapData.resolution
let y = this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution
@@ -288,10 +376,62 @@ export default {
if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
this.handlePointSelect(point, event)
event.stopPropagation()
pointClicked = true
}
})
// 2. 只有点位未被点击时，才检测路径点击
if (!pointClicked) {
const clickedPath = this.detectPathClick(mouseX, mouseY)
if (clickedPath) {
this.handlePathSelect(clickedPath, event)
event.stopPropagation()
}
}
},
// 检测路径点击
detectPathClick (mouseX, mouseY) {
if (!this.pathData.length) return null
for (const path of this.pathData) {
// 计算路径线段的Canvas坐标
const startX = (path.start_x - this.mapData.x) / this.mapData.resolution
const startY = this.mapData.height - (path.start_y - this.mapData.y) / this.mapData.resolution
const endX = (path.end_x - this.mapData.x) / this.mapData.resolution
const endY = this.mapData.height - (path.end_y - this.mapData.y) / this.mapData.resolution
// 计算点击点到线段的距离
const distance = this.pointToLineDistance(
{ x: mouseX, y: mouseY },
{ x: startX, y: startY },
{ x: endX, y: endY }
)
// 距离小于阈值则认为点击了该路径
if (distance <= this.pathClickThreshold) {
return path
}
}
return null
},
// 计算点到线段的最短距离
pointToLineDistance (point, lineStart, lineEnd) {
// 线段向量
const dx = lineEnd.x - lineStart.x
const dy = lineEnd.y - lineStart.y
// 线段长度的平方
const lengthSquared = dx * dx + dy * dy
// 线段长度为0（起点终点重合），直接返回点到起点的距离
if (lengthSquared === 0) {
return Math.hypot(point.x - lineStart.x, point.y - lineStart.y)
}
// 计算点击点在投影到线段上的位置比例（0~1之间为在线段上）
let t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / lengthSquared
t = Math.max(0, Math.min(1, t)) // 限制在0~1范围内
// 投影点坐标
const projectionX = lineStart.x + t * dx
const projectionY = lineStart.y + t * dy
// 点到投影点的距离
return Math.hypot(point.x - projectionX, point.y - projectionY)
},
handlePointSelect (point, event) {
this.resetPathSelection()
if (this.selectedPointId === point.station_id) {
this.resetSelection()
} else {
@@ -302,6 +442,20 @@ export default {
this.redrawCanvas()
}
},
// 处理路径选中
handlePathSelect (path, event) {
// 关闭点位弹窗（避免冲突）
this.resetPointSelection()
if (this.selectedPath.route_id === path.route_id) {
// 再次点击同一路径关闭弹窗
this.resetPathSelection()
} else {
this.selectedPath = path
this.showPathPopup = true
this.calculatePathPopupPosition(event)
this.redrawCanvas() // 高亮显示选中路径
}
},
calculatePopupPosition (event) {
const popupWidth = 200
const popupHeight = 180
@@ -314,16 +468,43 @@ export default {
this.popupStyle = { left: `${left}px`, top: `${top}px` }
},
// 计算路径弹窗位置
calculatePathPopupPosition (event) {
const popupWidth = 160
const popupHeight = 100
let left = event.clientX - 40
let top = event.clientY - 120
// 限制弹窗在窗口可视范围内
left = Math.max(10, Math.min(left, window.innerWidth - popupWidth - 10))
top = Math.max(10, Math.min(top, window.innerHeight - popupHeight - 10))
this.pathPopupStyle = { left: `${left}px`, top: `${top}px` }
},
handleDocumentClick () {
this.resetSelection()
},
resetSelection () {
resetPointSelection () {
if (this.selectedPointId) {
this.selectedPointId = null
this.selectedPoint = null
this.showPopup = false
this.redrawCanvas()
}
},
// 重置路径选中状态
resetPathSelection () {
if (this.selectedPath) {
this.selectedPath = {route_id: null}
this.showPathPopup = false
}
},
resetSelection () {
this.resetPointSelection()
this.resetPathSelection()
this.redrawCanvas()
},
getStationNameById (stationId) {
if (!stationId || !this.pointData || !this.pointData.length) return null
const station = this.pointData.find(point => point.station_id === stationId)
return station ? station.station_name : null
}
}
}
@@ -360,7 +541,7 @@ export default {
padding 10px
box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
z-index 100
min-width 150px
min-width 160px
animation fadeIn 0.2s ease-out
h3
color #fff