优化
This commit is contained in:
273
src/pages/modules/map1.vue
Normal file
273
src/pages/modules/map1.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
|
||||
<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/mork.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.src = `${this.mapData.mapImageAddress}`
|
||||
img.onload = () => {
|
||||
this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
|
||||
this.ctx.save()
|
||||
this.drawPath()
|
||||
this.drawMarkers()
|
||||
}
|
||||
},
|
||||
drawPath () {
|
||||
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.moveTo(startX, startY)
|
||||
this.ctx.lineTo(endX, endY)
|
||||
this.ctx.strokeStyle = '#009de5'
|
||||
this.ctx.lineWidth = 2
|
||||
this.ctx.stroke()
|
||||
})
|
||||
},
|
||||
drawMarkers () {
|
||||
const markerImg = new Image()
|
||||
markerImg.src = markerImage
|
||||
markerImg.onload = () => {
|
||||
this.pointData.forEach(point => {
|
||||
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, 5, 0, Math.PI * 2)
|
||||
this.ctx.fillStyle = '#59ccd2'
|
||||
this.ctx.fill()
|
||||
} else {
|
||||
this.ctx.drawImage(markerImg, x - 5, y - 5, 10, 10)
|
||||
}
|
||||
this.ctx.font = '12px Arial'
|
||||
this.ctx.fillStyle = 'white'
|
||||
this.ctx.textAlign = 'center'
|
||||
this.ctx.fillText(point.station_name, x, y + 18)
|
||||
})
|
||||
}
|
||||
},
|
||||
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 = 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
|
||||
// 检查点击位置是否在标记图片内
|
||||
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 - 150}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 150px
|
||||
animation fadeIn 0.2s ease-out
|
||||
h3
|
||||
color #fff
|
||||
font-size 14px
|
||||
line-height 24px
|
||||
text-align center
|
||||
p
|
||||
color #fff
|
||||
font-size 14px
|
||||
line-height 24px
|
||||
text-align center
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user