290 lines
9.0 KiB
Vue
290 lines
9.0 KiB
Vue
|
|
<template>
|
|
<div class="page_container">
|
|
<div class="canvas-container">
|
|
<canvas id="mapCanvas" ref="mapCanvas" @wheel="handleZoom" @click="handleCanvasClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove"></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.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>-</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>0</p></el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { throttle } from 'lodash'
|
|
import markerImage from '@images/new/agv.png'
|
|
import { fetchMapData, fetchPathData } from '@config/getData.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
scale: 1, // 缩放比例
|
|
canvas: null, // Canvas 元素
|
|
ctx: null, // Canvas 绘图上下文
|
|
touchStart: null, // 触摸起点
|
|
zoomPercentage: 100, // 当前缩放百分比
|
|
mapData: null, // 存储从后端获取的地图数据
|
|
pathData: null, // 存储从后端获取的路径数据
|
|
showPopup: false,
|
|
selectedPoint: {},
|
|
popupStyle: {left: '0px', top: '0px'},
|
|
selectedPointId: null
|
|
|
|
}
|
|
},
|
|
mounted () {
|
|
this._fetchMapData()
|
|
document.addEventListener('click', this.handleDocumentClick)
|
|
},
|
|
beforeDestroy () {
|
|
// 移除事件监听
|
|
document.removeEventListener('click', this.handleDocumentClick)
|
|
},
|
|
methods: {
|
|
async _fetchMapData () {
|
|
try {
|
|
let res = await fetchMapData()
|
|
if (res) {
|
|
this.mapData = res.data
|
|
this._fetchPathData()
|
|
}
|
|
} catch (e) {
|
|
this.$message.error(e)
|
|
}
|
|
},
|
|
async _fetchPathData () {
|
|
try {
|
|
let res = await fetchPathData()
|
|
this.pathData = [...res.data]
|
|
this.initCanvas()
|
|
} catch (e) {
|
|
this.$message.error(e)
|
|
}
|
|
},
|
|
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.mapData.image
|
|
img.onload = () => {
|
|
this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
|
|
this.ctx.save()
|
|
this.ctx.translate(this.mapData.leftBottomCoordinate.x * -1 * this.mapData.pixelRatio, 0)
|
|
this.ctx.scale(1, -1)
|
|
this.drawPath()
|
|
this.drawMarkers()
|
|
}
|
|
},
|
|
drawPath () {
|
|
this.ctx.beginPath()
|
|
this.pathData.forEach((point, index) => {
|
|
const x = point.x * this.mapData.pixelRatio
|
|
const y = point.y * this.mapData.pixelRatio
|
|
if (index === 0) {
|
|
this.ctx.moveTo(x, y)
|
|
} else {
|
|
this.ctx.lineTo(x, y)
|
|
}
|
|
})
|
|
this.ctx.strokeStyle = '#009de5'
|
|
this.ctx.lineWidth = 3
|
|
this.ctx.stroke()
|
|
},
|
|
drawMarkers () {
|
|
const markerImg = new Image()
|
|
markerImg.src = markerImage
|
|
markerImg.onload = () => {
|
|
this.pathData.forEach(point => {
|
|
const x = point.x * this.mapData.pixelRatio
|
|
const y = point.y * this.mapData.pixelRatio
|
|
if (point.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.id, x, -y + 25)
|
|
this.ctx.restore()
|
|
})
|
|
}
|
|
},
|
|
handleCanvasClick (event) {
|
|
const rect = this.canvas.getBoundingClientRect()
|
|
const mouseX = event.clientX - rect.left
|
|
const mouseY = event.clientY - rect.top
|
|
this.pathData.forEach(point => {
|
|
const x = (point.x - this.mapData.leftBottomCoordinate.x) * this.mapData.pixelRatio
|
|
const y = point.y * -1 * this.mapData.pixelRatio
|
|
// 检查点击位置是否在标记图片内
|
|
if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
|
|
if (this.selectedPointId === point.id) {
|
|
this.resetSelection()
|
|
} else {
|
|
this.selectedPointId = point.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()
|
|
}
|
|
},
|
|
zoom (step) {
|
|
this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
|
|
this.zoomPercentage = Math.round(this.scale * 100)
|
|
this.applyTransform()
|
|
},
|
|
applyTransform () {
|
|
this.canvas.style.transform = `scale(${this.scale})`
|
|
},
|
|
// 鼠标滚动缩放
|
|
handleZoom (event) {
|
|
event.preventDefault()
|
|
const delta = event.deltaY
|
|
const step = delta > 0 ? -1 : 1
|
|
this.zoom(step)
|
|
},
|
|
// 触摸开始事件
|
|
handleTouchStart (event) {
|
|
this.touchStart = Array.from(event.touches).map(touch => ({
|
|
x: touch.clientX,
|
|
y: touch.clientY
|
|
}))
|
|
},
|
|
// 触摸移动事件
|
|
handleTouchMove (event) {
|
|
if (this.touchStart && this.touchStart.length === 2 && event.touches.length === 2) {
|
|
const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
|
|
const currentDist = this.getDistance(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY)
|
|
const step = (currentDist - startDist) / startDist
|
|
this.zoom(step)
|
|
}
|
|
this.touchStart = Array.from(event.touches).map(touch => ({
|
|
x: touch.clientX,
|
|
y: touch.clientY
|
|
}))
|
|
},
|
|
// 计算两点之间的距离
|
|
getDistance (x1, y1, x2, y2) {
|
|
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
|
|
},
|
|
zoomIn () {
|
|
if (this.scale < 2) {
|
|
this.zoom(8) // 每次放大8%
|
|
}
|
|
},
|
|
zoomOut () {
|
|
if (this.scale > 0.02) {
|
|
this.zoom(-8) // 每次缩小8%
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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%)
|
|
// background-color rgb(11 68 137 / 70%)
|
|
box-shadow inset 1px 1px 7px 2px #4d9bcd
|
|
overflow auto
|
|
.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>
|