278 lines
8.8 KiB
Vue
278 lines
8.8 KiB
Vue
|
|
<template>
|
|
<div class="page_container">
|
|
<div class="canvas-container">
|
|
<canvas
|
|
id="mapCanvas"
|
|
ref="mapCanvas"
|
|
@wheel="handleZoom"
|
|
@click="handleCanvasClick"
|
|
@touchstart="handleTouchStart"
|
|
@touchmove="handleTouchMove"
|
|
@mousedown="handleMouseDown"
|
|
@mousemove="handleMouseMove"
|
|
@mouseup="handleMouseUp"
|
|
@mouseleave="handleMouseUp"
|
|
></canvas>
|
|
<el-row type="flex" justify="end" class="map_tools">
|
|
<el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
|
|
<div class="zoom_data">{{ zoomPercentage }}%</div>
|
|
<el-button type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" style="border: 0;border-radius: 0;" @click="zoomIn"></el-button>
|
|
</el-row>
|
|
</div>
|
|
<div
|
|
v-if="showPopup"
|
|
class="point-popup"
|
|
:style="popupStyle"
|
|
@click.stop
|
|
>
|
|
<el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
|
|
<el-col :span="10"><h3>编号</h3></el-col>
|
|
<el-col :span="14"><p>{{selectedPoint.station_code}}</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>{{selectedPoint.station_name}}</p></el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="space-between" class="popup-content">
|
|
<el-col :span="10"><h3>X坐标</h3></el-col>
|
|
<el-col :span="14"><p>{{ selectedPoint.x }}</p></el-col>
|
|
</el-row>
|
|
<el-row type="flex" justify="space-between" class="popup-content">
|
|
<el-col :span="10"><h3>Y坐标</h3></el-col>
|
|
<el-col :span="14"><p>{{ selectedPoint.y }}</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>{{ selectedPoint.angle }}</p></el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { throttle } from 'lodash'
|
|
import markerImage from '@images/new/agv.png'
|
|
import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
|
|
import canvasZoomDrag from '@config/canvasZoomDrag'
|
|
export default {
|
|
data () {
|
|
return {
|
|
canvas: null, // Canvas 元素
|
|
ctx: null, // Canvas 绘图上下文
|
|
mapData: null, // 地图数据
|
|
pathData: null, // 路径数据
|
|
pointData: null, // 点位数据
|
|
showPopup: false,
|
|
selectedPoint: {},
|
|
popupStyle: {left: '0px', top: '0px'},
|
|
selectedPointId: null
|
|
}
|
|
},
|
|
mixins: [canvasZoomDrag],
|
|
mounted () {
|
|
this._getMapInfoByCode()
|
|
document.addEventListener('click', this.handleDocumentClick)
|
|
},
|
|
beforeDestroy () {
|
|
// 移除事件监听
|
|
document.removeEventListener('click', this.handleDocumentClick)
|
|
},
|
|
methods: {
|
|
async _getMapInfoByCode () {
|
|
try {
|
|
let res = await getMapInfoByCode()
|
|
if (res) {
|
|
this.mapData = res
|
|
this._getRouteInfo()
|
|
}
|
|
} catch (e) {
|
|
this.$message.error(e)
|
|
}
|
|
},
|
|
async _getRouteInfo () {
|
|
try {
|
|
let res = await getRouteInfo()
|
|
this.pathData = [...res]
|
|
this._queryMapAllStation()
|
|
} catch (e) {
|
|
this.$message.error(e)
|
|
}
|
|
},
|
|
async _queryMapAllStation () {
|
|
try {
|
|
let res = await queryMapAllStation()
|
|
const stations = [...res]
|
|
this.pointData = this.filterPointData(this.pathData, stations)
|
|
this.initCanvas()
|
|
} catch (e) {
|
|
this.$message.error(e)
|
|
}
|
|
},
|
|
filterPointData (routes, stations) {
|
|
const result = []
|
|
const seenStationIds = new Set()
|
|
routes.forEach((route) => {
|
|
const startStation = stations.find((station) => station.station_id === route.start_id)
|
|
const endStation = stations.find((station) => station.station_id === route.end_id)
|
|
if (startStation && !seenStationIds.has(startStation.station_id)) {
|
|
result.push(startStation)
|
|
seenStationIds.add(startStation.station_id)
|
|
}
|
|
if (endStation && !seenStationIds.has(endStation.station_id)) {
|
|
result.push(endStation)
|
|
seenStationIds.add(endStation.station_id) // 标记为已添加
|
|
}
|
|
})
|
|
return result
|
|
},
|
|
initCanvas () {
|
|
this.canvas = this.$refs.mapCanvas
|
|
this.ctx = this.canvas.getContext('2d')
|
|
this.canvas.width = this.mapData.width
|
|
this.canvas.height = this.mapData.height
|
|
this.redrawCanvas()
|
|
},
|
|
redrawCanvas () {
|
|
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.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()
|
|
}
|
|
},
|
|
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
|
|
this.ctx.moveTo(startX, startY)
|
|
this.ctx.lineTo(endX, endY)
|
|
this.ctx.strokeStyle = '#009de5'
|
|
this.ctx.lineWidth = 3
|
|
this.ctx.stroke()
|
|
})
|
|
},
|
|
drawMarkers () {
|
|
const markerImg = new Image()
|
|
markerImg.src = markerImage
|
|
markerImg.onload = () => {
|
|
this.pointData.forEach(point => {
|
|
const x = point.x * this.mapData.resolution
|
|
const y = point.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.fillStyle = '#59ccd2'
|
|
this.ctx.fill()
|
|
} else {
|
|
this.ctx.drawImage(markerImg, x - 10, y - 10, 20, 20)
|
|
}
|
|
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()
|
|
})
|
|
}
|
|
},
|
|
handleCanvasClick (event) {
|
|
const rect = this.canvas.getBoundingClientRect()
|
|
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
|
|
x = Math.abs(x) === 0 ? 0 : x
|
|
y = Math.abs(y) === 0 ? 0 : y
|
|
// 检查点击位置是否在标记图片内
|
|
if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
|
|
if (this.selectedPointId === point.station_id) {
|
|
this.resetSelection()
|
|
} else {
|
|
this.selectedPointId = point.station_id
|
|
this.selectedPoint = point
|
|
this.showPopup = true
|
|
this.popupStyle = {
|
|
left: `${event.clientX - 40}px`,
|
|
top: `${event.clientY - 200}px`
|
|
}
|
|
this.initCanvas()
|
|
event.stopPropagation()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
handleDocumentClick () {
|
|
this.resetSelection()
|
|
},
|
|
resetSelection () {
|
|
if (this.selectedPointId) {
|
|
this.selectedPointId = null
|
|
this.selectedPoint = null
|
|
this.showPopup = false
|
|
this.initCanvas()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.canvas-container
|
|
position relative
|
|
display flex
|
|
justify-content: center;
|
|
align-items: center;
|
|
height calc(100% - .32rem)
|
|
background-color rgba(4, 33, 58, 70%)
|
|
box-shadow inset 1px 1px 7px 2px #4d9bcd
|
|
overflow hidden
|
|
.map_tools
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
.zoom_data
|
|
width .6rem
|
|
font-size .16rem
|
|
height .32rem
|
|
line-height .32rem
|
|
color #00d9f3
|
|
text-align center
|
|
border-top 1px solid #009fde
|
|
border-bottom 1px solid #009fde
|
|
.point-popup
|
|
position fixed
|
|
background rgba(0, 0, 0, 70%)
|
|
border 1px solid rgba(255, 255, 255, .3)
|
|
border-radius: 8px;
|
|
padding 10px
|
|
box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
|
|
z-index 100
|
|
min-width 180px
|
|
animation fadeIn 0.2s ease-out
|
|
h3
|
|
color #fff
|
|
font-size 16px
|
|
line-height 30px
|
|
text-align center
|
|
p
|
|
color #fff
|
|
font-size 16px
|
|
line-height 30px
|
|
text-align center
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(5px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|