重定位修改
This commit is contained in:
@@ -13,7 +13,7 @@ export const stopMapping = () => post('teaching/stopMapping', {})
|
|||||||
export const getLocalMaps = () => post('teaching/getLocalMaps', {})
|
export const getLocalMaps = () => post('teaching/getLocalMaps', {})
|
||||||
export const oneClickDeployment = (map) => post('teaching/oneClickDeployment?mapName=' + map, {})
|
export const oneClickDeployment = (map) => post('teaching/oneClickDeployment?mapName=' + map, {})
|
||||||
export const abandonMapping = () => post('teaching/abandonMapping', {})
|
export const abandonMapping = () => post('teaching/abandonMapping', {})
|
||||||
export const sendAutoBack = () => post('teaching/sendAutoBack', {})
|
export const sendAutoBack = (is) => post('teaching/sendAutoBack?isBack=' + is, {})
|
||||||
|
|
||||||
// 操作
|
// 操作
|
||||||
export const queryStation = () => post('api/operate/queryStation', {})
|
export const queryStation = () => post('api/operate/queryStation', {})
|
||||||
|
|||||||
@@ -225,3 +225,11 @@ export const abandonMapping = (sn, code) => {
|
|||||||
}
|
}
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const relocate = (x, y, angle) => {
|
||||||
|
let res = {
|
||||||
|
code: 200,
|
||||||
|
message: 'ok'
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
// import router from './router'
|
import router from './router'
|
||||||
import router from './hubRouter'
|
// import router from './hubRouter'
|
||||||
import store from './vuex/store'
|
import store from './vuex/store'
|
||||||
import './style/reset.css'
|
import './style/reset.css'
|
||||||
import { Row, Col, Button, Icon, Dialog, Form, FormItem, Input, Select, Option, Table, TableColumn, Tabs, TabPane, Popover, Loading, MessageBox, Message, Progress, Upload } from 'element-ui'
|
import { Row, Col, Button, Icon, Dialog, Form, FormItem, Input, Select, Option, Table, TableColumn, Tabs, TabPane, Popover, Loading, MessageBox, Message, Progress, Upload } from 'element-ui'
|
||||||
|
|||||||
@@ -538,7 +538,7 @@ export default {
|
|||||||
this.lastUpdateTime = now
|
this.lastUpdateTime = now
|
||||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
|
||||||
const pointData = JSON.parse(event.data)
|
const pointData = JSON.parse(event.data)
|
||||||
this.updatePointCloud(pointData.data)
|
this.updatePointCloud(pointData.globalData)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('解析点云数据失败:', error)
|
console.error('解析点云数据失败:', error)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -209,9 +209,10 @@ export default {
|
|||||||
cancelButtonText: this.$t('no'),
|
cancelButtonText: this.$t('no'),
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
this._sendAutoBack()
|
this._sendAutoBack('0')
|
||||||
this.backActive = false
|
this.backActive = false
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
|
this._sendAutoBack('1')
|
||||||
this.backActive = false
|
this.backActive = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -505,19 +506,21 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 打点功能点击返回成功后
|
// 打点功能点击返回成功后
|
||||||
async _sendAutoBack () {
|
async _sendAutoBack (flag) {
|
||||||
try {
|
try {
|
||||||
this.loading = this.$loading({
|
this.loading = this.$loading({
|
||||||
lock: true,
|
lock: true,
|
||||||
spinner: 'el-icon-loading',
|
spinner: 'el-icon-loading',
|
||||||
background: 'rgba(0, 0, 0, 0.6)'
|
background: 'rgba(0, 0, 0, 0.6)'
|
||||||
})
|
})
|
||||||
let res = await sendAutoBack()
|
let res = await sendAutoBack(flag)
|
||||||
if (res && res.code === 200) {
|
if (res && res.code === 200) {
|
||||||
this.$nextTick(() => {
|
if (flag === '0') {
|
||||||
this.$refs.glMap.closeWebSocket()
|
this.$nextTick(() => {
|
||||||
})
|
this.$refs.glMap.closeWebSocket()
|
||||||
this.tipShow = true
|
})
|
||||||
|
this.tipShow = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
this.loading.close()
|
this.loading.close()
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ export default {
|
|||||||
tab: 0,
|
tab: 0,
|
||||||
username: null,
|
username: null,
|
||||||
password: null,
|
password: null,
|
||||||
baseUrl: this.$store.getters.baseUrl,
|
baseUrl: null,
|
||||||
setTime: 1000,
|
setTime: 1000,
|
||||||
disabled: false
|
disabled: false
|
||||||
}
|
}
|
||||||
@@ -76,6 +76,13 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['serverUrl'])
|
...mapGetters(['serverUrl'])
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
serverUrl (newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.baseUrl = newVal
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.baseUrl = this.serverUrl
|
this.baseUrl = this.serverUrl
|
||||||
},
|
},
|
||||||
@@ -103,10 +110,10 @@ export default {
|
|||||||
try {
|
try {
|
||||||
let res = await authlogin(this.username, this.encryptData(this.password))
|
let res = await authlogin(this.username, this.encryptData(this.password))
|
||||||
if (res.code === '1') {
|
if (res.code === '1') {
|
||||||
let obj = {}
|
// let obj = {}
|
||||||
obj = Object.assign({}, res.result)
|
// obj = Object.assign({}, res.result)
|
||||||
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
// this.$store.dispatch('userInfo', JSON.stringify(obj))
|
||||||
this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
|
// this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
|
||||||
this.$router.push('/hub')
|
this.$router.push('/hub')
|
||||||
} else {
|
} else {
|
||||||
this.Dialog(res.desc)
|
this.Dialog(res.desc)
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
:key="`point-${index}`"
|
:key="`point-${index}`"
|
||||||
:cx="point.px_x"
|
:cx="point.px_x"
|
||||||
:cy="point.px_y"
|
:cy="point.px_y"
|
||||||
r="1"
|
r="3"
|
||||||
fill="green"
|
fill="green"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
@@ -181,7 +181,7 @@ export default {
|
|||||||
this._queryMapAllStation()
|
this._queryMapAllStation()
|
||||||
])
|
])
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
this.preloadImage('map', mapData.mapImageAddress),
|
this.preloadImage('map', `${this.serverUrl}${mapData.mapImageAddress}`),
|
||||||
this.preloadImage('marker', markerImage)
|
this.preloadImage('marker', markerImage)
|
||||||
])
|
])
|
||||||
this.mapData = mapData
|
this.mapData = mapData
|
||||||
@@ -664,13 +664,13 @@ export default {
|
|||||||
this.websocket.onopen = () => {}
|
this.websocket.onopen = () => {}
|
||||||
this.websocket.onmessage = (event) => {
|
this.websocket.onmessage = (event) => {
|
||||||
try {
|
try {
|
||||||
const res = JSON.parse(event.data)
|
const pointData = JSON.parse(event.data)
|
||||||
res.forEach(point => {
|
pointData.currentData.forEach(point => {
|
||||||
const pt = this.pointCmToPx(point.x, point.y)
|
const pt = this.pointCmToPx(point.x, point.y)
|
||||||
this.$set(point, 'px_x', pt.x)
|
this.$set(point, 'px_x', pt.x)
|
||||||
this.$set(point, 'px_y', pt.y)
|
this.$set(point, 'px_y', pt.y)
|
||||||
})
|
})
|
||||||
this.greenPoints = res
|
this.greenPoints = pointData.currentData
|
||||||
this.loading.close()
|
this.loading.close()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('WebSocket消息解析失败:', error)
|
console.error('WebSocket消息解析失败:', error)
|
||||||
@@ -794,6 +794,11 @@ export default {
|
|||||||
this.isCarLocked = false
|
this.isCarLocked = false
|
||||||
this.carOffsetX = 0
|
this.carOffsetX = 0
|
||||||
this.carOffsetY = 0
|
this.carOffsetY = 0
|
||||||
|
this.greenPoints = []
|
||||||
|
this.carLastX = 0
|
||||||
|
this.carLastY = 0
|
||||||
|
this.carCenterX = 0
|
||||||
|
this.carCenterY = 0
|
||||||
},
|
},
|
||||||
confirmLocked () {
|
confirmLocked () {
|
||||||
const carImage = this.$refs.carImage
|
const carImage = this.$refs.carImage
|
||||||
|
|||||||
@@ -1,838 +0,0 @@
|
|||||||
|
|
||||||
<template>
|
|
||||||
<div class="page_container" :class="{'enClass': $i18n.locale === 'en-us'}">
|
|
||||||
<div class="canvas-container" ref="mapContainer">
|
|
||||||
<canvas
|
|
||||||
class="mapCanvas"
|
|
||||||
ref="mapCanvas"
|
|
||||||
@click="handleCanvasClick"
|
|
||||||
@touchstart="handleTouchStart"
|
|
||||||
@touchmove="handleTouchMove"
|
|
||||||
@touchend="handleTouchEnd"
|
|
||||||
@mousedown="handleMouseDown"
|
|
||||||
@mousemove="handleMouseMove"
|
|
||||||
@mouseup="handleMouseUp"
|
|
||||||
@mouseleave="handleMouseUp"
|
|
||||||
@wheel="handleZoom"
|
|
||||||
></canvas>
|
|
||||||
<svg
|
|
||||||
class="mapSvg"
|
|
||||||
ref="mapSvg"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<g ref="svgPoints">
|
|
||||||
<circle
|
|
||||||
v-for="(point, index) in greenPoints"
|
|
||||||
:key="index"
|
|
||||||
:cx="convertToSvgX(point.x)"
|
|
||||||
:cy="convertToSvgY(point.y)"
|
|
||||||
r="1"
|
|
||||||
fill="red"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<image
|
|
||||||
ref="carImage"
|
|
||||||
:href="require('../../images/new/agv.png')"
|
|
||||||
alt="小车"
|
|
||||||
width="30"
|
|
||||||
height="30"
|
|
||||||
:x="carX"
|
|
||||||
:y="carY"
|
|
||||||
:transform="`rotate(${rotateAngle} ${carX + 15} ${carY + 15})`"
|
|
||||||
@mousedown="startCarDrag"
|
|
||||||
@touchstart="startCarDrag"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div class="map_tools">
|
|
||||||
<el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" @click="zoomOut"></el-button>
|
|
||||||
<div class="zoom_data">{{ zoomPercentage }}%</div>
|
|
||||||
<el-button class="zoom_btn" type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" @click="zoomIn"></el-button>
|
|
||||||
<el-button class="zoom_btn" style="margin-top: .2rem !important" type="primary" icon="el-icon-rank" size="mini"></el-button>
|
|
||||||
<el-button class="zoom_btn" type="primary" icon="el-icon-location" size="mini" @click="handleRelocate"></el-button>
|
|
||||||
</div>
|
|
||||||
</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>{{$t('Number')}}</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>{{$t('Alias')}}</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>{{$t('XCoordinate')}}</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>{{ $t('YCoordinate') }}</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>{{$t('AngleValue')}}</h3></el-col>
|
|
||||||
<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>{{ $t('PathID') }}</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>{{$t('StartCode')}}</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>{{$t('EndCode')}}</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/station.png'
|
|
||||||
import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@/config/mork.js'
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import { points } from '@/config/point.js'
|
|
||||||
/* eslint-disable */
|
|
||||||
export default {
|
|
||||||
name: 'ModuleMap',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
canvas: null, // Canvas元素
|
|
||||||
ctx: null, // Canvas绘图上下文
|
|
||||||
canvasWidth: 0, // Canvas/SVG 宽度（同步更新）
|
|
||||||
canvasHeight: 0, // Canvas/SVG 高度（同步更新）
|
|
||||||
originX: 0, // Canvas原点X
|
|
||||||
originY: 0, // Canvas原点Y
|
|
||||||
cachedImages: {
|
|
||||||
map: null,
|
|
||||||
marker: null
|
|
||||||
},
|
|
||||||
mapData: null, // 地图数据
|
|
||||||
pathData: null, // 路径数据
|
|
||||||
pointData: null, // 点位数据
|
|
||||||
mapScale: 1, // 地图图片缩放比例
|
|
||||||
showPopup: false,
|
|
||||||
selectedPoint: {},
|
|
||||||
popupStyle: {left: '0px', top: '0px'},
|
|
||||||
selectedPointId: null,
|
|
||||||
showPathPopup: false,
|
|
||||||
selectedPath: {route_id: null},
|
|
||||||
pathPopupStyle: { left: '0px', top: '0px' },
|
|
||||||
pathClickThreshold: 5,
|
|
||||||
touchStart: null, // 触摸起点
|
|
||||||
isDragging: false, // 是否正在拖动地图
|
|
||||||
lastX: 0, // 上一次鼠标/触摸X位置
|
|
||||||
lastY: 0, // 上一次鼠标/触摸Y位置
|
|
||||||
offsetX: 0, // Canvas偏移X
|
|
||||||
offsetY: 0, // Canvas偏移Y
|
|
||||||
scale: 1, // 缩放比例
|
|
||||||
zoomPercentage: 100, // 当前缩放百分比
|
|
||||||
greenPoints: [], // 绿色点位数组
|
|
||||||
websocket: null, // WebSocket实例
|
|
||||||
isCarLocked: false, // 是否锁定小车位置（点击relocate后为true）
|
|
||||||
isDraggingCar: false, // 是否正在拖拽小车
|
|
||||||
carX: 0, // 小车自然坐标转页面坐标
|
|
||||||
carY: 0, // 小车自然坐标转页面坐标
|
|
||||||
rotateAngle: 0, // 旋转弧度
|
|
||||||
dragStartX: 0, // 记录拖拽开始的偏移量
|
|
||||||
dragStartY: 0 // 记录拖拽开始的偏移量
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters(['serverUrl', 'carPosition', 'userRole'])
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
carPosition: {
|
|
||||||
handler(newVal) {
|
|
||||||
this.updateCarPosition(newVal)
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
},
|
|
||||||
mapData: {
|
|
||||||
handler(newVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.updateCarPosition(this.carPosition)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.loadAllDataInParallel()
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
|
||||||
this.closeWebSocket()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async loadAllDataInParallel () {
|
|
||||||
try {
|
|
||||||
this.loading = this.$loading({
|
|
||||||
lock: true,
|
|
||||||
spinner: 'el-icon-loading',
|
|
||||||
background: 'rgba(0, 0, 0, 0.6)'
|
|
||||||
})
|
|
||||||
const [mapData, pathData, stations] = await Promise.all([
|
|
||||||
this._getMapInfoByCode(),
|
|
||||||
this._getRouteInfo(),
|
|
||||||
this._queryMapAllStation()
|
|
||||||
])
|
|
||||||
await Promise.all([
|
|
||||||
this.preloadImage('map', mapData.mapImageAddress),
|
|
||||||
this.preloadImage('marker', markerImage)
|
|
||||||
])
|
|
||||||
this.mapData = mapData
|
|
||||||
this.pathData = [...pathData]
|
|
||||||
this.pointData = this.filterPointData(pathData, stations)
|
|
||||||
this.initCanvas()
|
|
||||||
this.loading.close()
|
|
||||||
return true
|
|
||||||
} catch (e) {
|
|
||||||
this.$message.error(e.message)
|
|
||||||
this.loading.close()
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
preloadImage(key, url) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const img = new Image()
|
|
||||||
img.src = url
|
|
||||||
img.onload = () => {
|
|
||||||
this.cachedImages[key] = img
|
|
||||||
resolve()
|
|
||||||
}
|
|
||||||
img.onerror = () => reject(new Error(`图片加载失败: ${url}`))
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async _getMapInfoByCode () {
|
|
||||||
try {
|
|
||||||
const res = await getMapInfoByCode()
|
|
||||||
if (!res) throw new Error('地图信息为空')
|
|
||||||
return res
|
|
||||||
} catch (e) {
|
|
||||||
console.error('获取地图信息失败:', e)
|
|
||||||
throw new Error(`获取地图信息失败: ${e.message}`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async _getRouteInfo () {
|
|
||||||
try {
|
|
||||||
const res = await getRouteInfo()
|
|
||||||
if (!res) throw new Error('路径信息为空')
|
|
||||||
return res
|
|
||||||
} catch (e) {
|
|
||||||
console.error('获取路径信息失败:', e)
|
|
||||||
throw new Error(`获取路径信息失败: ${e.message}`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async _queryMapAllStation () {
|
|
||||||
try {
|
|
||||||
const res = await queryMapAllStation()
|
|
||||||
if (!res) throw new Error('站点信息为空')
|
|
||||||
return res
|
|
||||||
} catch (e) {
|
|
||||||
console.error('获取站点信息失败:', e)
|
|
||||||
throw new Error(`获取站点信息失败: ${e.message}`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filterPointData (routes, stations) {
|
|
||||||
const result = []
|
|
||||||
const seenStationIds = new Set()
|
|
||||||
routes.forEach(route => {
|
|
||||||
const startStation = stations.find(s => s.station_id === route.start_id)
|
|
||||||
const endStation = stations.find(s => s.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')
|
|
||||||
const container = this.$refs.mapContainer
|
|
||||||
this.canvasWidth = container.clientWidth
|
|
||||||
this.canvasHeight = container.clientHeight
|
|
||||||
this.canvas.width = this.canvasWidth
|
|
||||||
this.canvas.height = this.canvasHeight
|
|
||||||
// 计算地图图片缩放比例
|
|
||||||
if (this.mapData.width > this.canvas.width || this.mapData.height > this.canvas.height) {
|
|
||||||
const scaleX = this.canvas.width / this.mapData.width
|
|
||||||
const scaleY = this.canvas.height / this.mapData.height
|
|
||||||
this.mapScale = Math.min(scaleX, scaleY)
|
|
||||||
}
|
|
||||||
const scaledWidth = this.mapData.width * this.mapScale
|
|
||||||
const scaledHeight = this.mapData.height * this.mapScale
|
|
||||||
// 计算地图图片左上角位置（即要移动到的原点）
|
|
||||||
this.originX = (this.canvas.width - scaledWidth) / 2
|
|
||||||
this.originY = (this.canvas.height - scaledHeight) / 2
|
|
||||||
this.ctx.translate(this.originX, this.originY)
|
|
||||||
this.ctx.save()
|
|
||||||
this.redrawCanvas()
|
|
||||||
// svg
|
|
||||||
const mapSvg = this.$refs.mapSvg
|
|
||||||
mapSvg.setAttribute('width', this.canvasWidth);
|
|
||||||
mapSvg.setAttribute('height', this.canvasHeight);
|
|
||||||
mapSvg.setAttribute('viewBox', `-${this.originX} -${this.originY} ${this.canvasWidth} ${this.canvasHeight}`)
|
|
||||||
},
|
|
||||||
updateCarPosition(newVal) {
|
|
||||||
if (!this.mapData) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (typeof newVal?.x !== 'number' || typeof newVal?.y !== 'number') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!this.isCarLocked) {
|
|
||||||
const carX = ((newVal.x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
const carY = (this.mapData.height - (newVal.y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
const rotateAngle = -newVal.angle * 57.295779513
|
|
||||||
this.carX = carX - 15
|
|
||||||
this.carY = carY - 15
|
|
||||||
this.rotateAngle = rotateAngle
|
|
||||||
}
|
|
||||||
},
|
|
||||||
redrawCanvas: throttle(function () {
|
|
||||||
if (!this.ctx || !this.mapData) return
|
|
||||||
const scaledWidth = this.mapData.width * this.mapScale
|
|
||||||
const scaledHeight = this.mapData.height * this.mapScale
|
|
||||||
this.ctx.save()
|
|
||||||
this.ctx.setTransform(1, 0, 0, 1, 0, 0)
|
|
||||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
|
||||||
this.ctx.restore()
|
|
||||||
if (!this.cachedImages.map) {
|
|
||||||
this.cachedImages.map = new Image()
|
|
||||||
this.cachedImages.map.src = this.mapData.mapImageAddress
|
|
||||||
this.cachedImages.map.onload = () => {
|
|
||||||
this.drawMapAndOverlays(scaledWidth, scaledHeight)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.drawMapAndOverlays(scaledWidth, scaledHeight)
|
|
||||||
}
|
|
||||||
}, 30),
|
|
||||||
drawMapAndOverlays(scaledWidth, scaledHeight) {
|
|
||||||
if (!this.ctx || !this.cachedImages.map) return
|
|
||||||
// 绘制地图背景
|
|
||||||
this.ctx.drawImage(this.cachedImages.map, 0, 0, scaledWidth, scaledHeight)
|
|
||||||
// 绘制路径（叠加在地图上）
|
|
||||||
this.drawPath()
|
|
||||||
// 绘制点位（叠加在最上层）
|
|
||||||
this.drawMarkers()
|
|
||||||
},
|
|
||||||
drawPath () {
|
|
||||||
if (!this.pathData.length) return
|
|
||||||
this.pathData.forEach((point, index) => {
|
|
||||||
const startX = ((point.start_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
const startY = (this.mapData.height - (point.start_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
const endX = ((point.end_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
const endY = (this.mapData.height - (point.end_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
const nextPoint = this.pathData[index + 1];
|
|
||||||
let controlX, controlY;
|
|
||||||
if (nextPoint) {
|
|
||||||
// 有下一个点时，使用当前终点和下一个起点的中点作为控制点
|
|
||||||
const nextStartX = ((nextPoint.start_x - this.mapData.x) / this.mapData.resolution) * this.mapScale;
|
|
||||||
const nextStartY = (this.mapData.height - (nextPoint.start_y - this.mapData.y) / this.mapData.resolution) * this.mapScale;
|
|
||||||
controlX = (endX + nextStartX) / 2;
|
|
||||||
controlY = (endY + nextStartY) / 2;
|
|
||||||
} else {
|
|
||||||
// 最后一个点，使用当前终点作为控制点
|
|
||||||
controlX = endX;
|
|
||||||
controlY = endY;
|
|
||||||
}
|
|
||||||
this.ctx.beginPath()
|
|
||||||
this.ctx.moveTo(startX, startY)
|
|
||||||
this.ctx.quadraticCurveTo(controlX, controlY, 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()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
drawMarkers () {
|
|
||||||
if (!this.pointData.length || !this.ctx) return
|
|
||||||
const markerSize = 16
|
|
||||||
if (!this.cachedImages.marker) {
|
|
||||||
this.cachedImages.marker = new Image()
|
|
||||||
this.cachedImages.marker.src = markerImage
|
|
||||||
// 图标加载完成后重新绘制，确保点位显示
|
|
||||||
this.cachedImages.marker.onload = () => {
|
|
||||||
this.redrawCanvas()
|
|
||||||
}
|
|
||||||
return // 等待图标加载完成后再绘制
|
|
||||||
}
|
|
||||||
this.pointData.forEach(point => {
|
|
||||||
const x = ((point.x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
const y = (this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
// 绘制选中状态
|
|
||||||
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(this.cachedImages.marker, x - markerSize / 2, y - markerSize / 2, markerSize, markerSize)
|
|
||||||
}
|
|
||||||
// 绘制点位名称（文字大小随缩放变化）
|
|
||||||
if (point.station_type !== 'Station') {
|
|
||||||
this.ctx.font = '12px Arial'
|
|
||||||
this.ctx.fillStyle = '#62fa0a'
|
|
||||||
this.ctx.textAlign = 'center'
|
|
||||||
this.ctx.fillText(point.station_name, x, y + 22)
|
|
||||||
this.ctx.fillText(point.x, x, y + 34)
|
|
||||||
this.ctx.fillText(point.y, x, y + 50)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCanvasClick (event) {
|
|
||||||
const rect = this.canvas.getBoundingClientRect()
|
|
||||||
const mouseX = (event.clientX - rect.left - this.originX) / this.scale
|
|
||||||
const mouseY = (event.clientY - rect.top - this.originY) / this.scale
|
|
||||||
// 1. 优先检测点位点击
|
|
||||||
let pointClicked = false
|
|
||||||
for (const point of this.pointData) {
|
|
||||||
let x = ((point.x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
let y = (this.mapData.height - (point.y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
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) {
|
|
||||||
this.handlePointSelect(point, event)
|
|
||||||
event.stopPropagation()
|
|
||||||
pointClicked = true
|
|
||||||
if (this.showPathPopup) {
|
|
||||||
this.selectedPath = {route_id: null}
|
|
||||||
this.showPathPopup = false
|
|
||||||
this.redrawCanvas()
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 2. 只有点位未被点击时，才检测路径点击
|
|
||||||
if (!pointClicked) {
|
|
||||||
if (this.showPopup) {
|
|
||||||
this.selectedPointId = null
|
|
||||||
this.selectedPoint = null
|
|
||||||
this.showPopup = false
|
|
||||||
this.redrawCanvas()
|
|
||||||
}
|
|
||||||
let pathClicked = false
|
|
||||||
for (const path of this.pathData) {
|
|
||||||
// 计算路径线段的Canvas坐标
|
|
||||||
const startX = ((path.start_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
const startY = (this.mapData.height - (path.start_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
const endX = ((path.end_x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
const endY = (this.mapData.height - (path.end_y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
// 计算点击点到线段的距离
|
|
||||||
const distance = this.pointToLineDistance(
|
|
||||||
{ x: mouseX, y: mouseY },
|
|
||||||
{ x: startX, y: startY },
|
|
||||||
{ x: endX, y: endY }
|
|
||||||
)
|
|
||||||
// 距离小于阈值则认为点击了该路径
|
|
||||||
if (distance <= this.pathClickThreshold) {
|
|
||||||
this.handlePathSelect(path, event)
|
|
||||||
event.stopPropagation()
|
|
||||||
pathClicked = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!pathClicked && this.showPathPopup) {
|
|
||||||
this.selectedPath = {route_id: null}
|
|
||||||
this.showPathPopup = false
|
|
||||||
this.redrawCanvas()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 计算点到线段的最短距离
|
|
||||||
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) {
|
|
||||||
if (this.selectedPointId === point.station_id) {
|
|
||||||
this.selectedPointId = null
|
|
||||||
this.selectedPoint = null
|
|
||||||
this.showPopup = false
|
|
||||||
} else {
|
|
||||||
this.selectedPointId = point.station_id
|
|
||||||
this.selectedPoint = point
|
|
||||||
this.showPopup = true
|
|
||||||
this.calculatePopupPosition(event)
|
|
||||||
}
|
|
||||||
this.redrawCanvas()
|
|
||||||
},
|
|
||||||
// 处理路径选中
|
|
||||||
handlePathSelect (path, event) {
|
|
||||||
if (this.selectedPath.route_id === path.route_id) {
|
|
||||||
this.selectedPath = {route_id: null}
|
|
||||||
this.showPathPopup = false
|
|
||||||
} else {
|
|
||||||
this.selectedPath = path
|
|
||||||
this.showPathPopup = true
|
|
||||||
this.calculatePathPopupPosition(event)
|
|
||||||
}
|
|
||||||
this.redrawCanvas()
|
|
||||||
},
|
|
||||||
// 计算弹窗位置
|
|
||||||
calculatePopupPosition (event) {
|
|
||||||
const popupWidth = 200
|
|
||||||
const popupHeight = 180
|
|
||||||
let left = event.clientX - 40
|
|
||||||
let top = event.clientY - 150
|
|
||||||
|
|
||||||
// 限制弹窗在窗口可视范围内
|
|
||||||
left = Math.max(10, Math.min(left, window.innerWidth - popupWidth - 10))
|
|
||||||
top = Math.max(10, Math.min(top, window.innerHeight - popupHeight - 10))
|
|
||||||
|
|
||||||
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` }
|
|
||||||
},
|
|
||||||
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
|
|
||||||
},
|
|
||||||
// 触摸事件：支持单指拖动和双指缩放
|
|
||||||
handleTouchStart (event) {
|
|
||||||
// 记录触摸点
|
|
||||||
const touches = Array.from(event.touches)
|
|
||||||
if (touches.length === 1) {
|
|
||||||
// 单指：准备拖动
|
|
||||||
this.isDragging = true
|
|
||||||
this.lastX = touches[0].clientX
|
|
||||||
this.lastY = touches[0].clientY
|
|
||||||
} else if (touches.length === 2) {
|
|
||||||
// 双指：准备缩放（禁用拖动）
|
|
||||||
this.isDragging = false
|
|
||||||
this.touchStart = touches.map(touch => ({
|
|
||||||
x: touch.clientX,
|
|
||||||
y: touch.clientY
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
applyTransform () {
|
|
||||||
const mapSvg = this.$refs.mapSvg
|
|
||||||
if (this.canvas) {
|
|
||||||
this.canvas.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
|
|
||||||
mapSvg.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 计算两点之间的距离
|
|
||||||
getDistance (x1, y1, x2, y2) {
|
|
||||||
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
|
|
||||||
},
|
|
||||||
zoom (step) {
|
|
||||||
this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
|
|
||||||
this.zoomPercentage = Math.round(this.scale * 100)
|
|
||||||
this.applyTransform()
|
|
||||||
},
|
|
||||||
handleTouchMove (event) {
|
|
||||||
event.preventDefault() // 阻止页面滚动
|
|
||||||
const touches = Array.from(event.touches)
|
|
||||||
if (this.isDragging && touches.length === 1) {
|
|
||||||
// 单指拖动
|
|
||||||
const currentX = touches[0].clientX
|
|
||||||
const currentY = touches[0].clientY
|
|
||||||
// 计算移动距离（考虑缩放影响，拖动速度与缩放比例成反比）
|
|
||||||
const moveX = (currentX - this.lastX) / this.scale
|
|
||||||
const moveY = (currentY - this.lastY) / this.scale
|
|
||||||
// 更新偏移量
|
|
||||||
this.offsetX += moveX
|
|
||||||
this.offsetY += moveY
|
|
||||||
// 更新上一次位置
|
|
||||||
this.lastX = currentX
|
|
||||||
this.lastY = currentY
|
|
||||||
// 应用变换
|
|
||||||
this.applyTransform()
|
|
||||||
} else if (this.touchStart && 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(touches[0].clientX, touches[0].clientY, touches[1].clientX, touches[1].clientY)
|
|
||||||
// 计算缩放步长（更平滑的缩放）
|
|
||||||
const scaleFactor = currentDist / startDist
|
|
||||||
const step = (scaleFactor - 1) * 50; // 调整缩放灵敏度
|
|
||||||
this.zoom(step)
|
|
||||||
// 更新触摸起点
|
|
||||||
this.touchStart = touches.map(touch => ({
|
|
||||||
x: touch.clientX,
|
|
||||||
y: touch.clientY
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleTouchEnd () {
|
|
||||||
this.touchStart = null
|
|
||||||
this.isDragging = false
|
|
||||||
},
|
|
||||||
// 鼠标按下（开始拖动）
|
|
||||||
handleMouseDown (event) {
|
|
||||||
event.preventDefault()
|
|
||||||
this.isDragging = true
|
|
||||||
// 记录初始鼠标位置
|
|
||||||
this.lastX = event.clientX
|
|
||||||
this.lastY = event.clientY
|
|
||||||
// 鼠标样式变为抓手
|
|
||||||
this.canvas.style.cursor = 'grabbing'
|
|
||||||
},
|
|
||||||
// 鼠标移动（拖动中）
|
|
||||||
handleMouseMove (event) {
|
|
||||||
if (!this.isDragging) return
|
|
||||||
event.preventDefault()
|
|
||||||
// 计算移动距离（考虑缩放影响）
|
|
||||||
const currentX = event.clientX
|
|
||||||
const currentY = event.clientY
|
|
||||||
const moveX = (currentX - this.lastX) / this.scale
|
|
||||||
const moveY = (currentY - this.lastY) / this.scale
|
|
||||||
// 更新偏移量
|
|
||||||
this.offsetX += moveX
|
|
||||||
this.offsetY += moveY
|
|
||||||
// 更新上一次位置
|
|
||||||
this.lastX = currentX
|
|
||||||
this.lastY = currentY
|
|
||||||
// 应用变换
|
|
||||||
this.applyTransform()
|
|
||||||
},
|
|
||||||
// 鼠标松开（结束拖动）
|
|
||||||
handleMouseUp () {
|
|
||||||
this.isDragging = false
|
|
||||||
this.canvas.style.cursor = 'default'
|
|
||||||
},
|
|
||||||
// 鼠标滚动缩放
|
|
||||||
handleZoom (event) {
|
|
||||||
event.preventDefault()
|
|
||||||
const delta = event.deltaY
|
|
||||||
const step = delta > 0 ? -1 : 1
|
|
||||||
this.zoom(step)
|
|
||||||
},
|
|
||||||
zoomIn () {
|
|
||||||
if (this.scale < 2) {
|
|
||||||
this.zoom(8) // 每次放大8%
|
|
||||||
}
|
|
||||||
},
|
|
||||||
zoomOut () {
|
|
||||||
if (this.scale > 0.02) {
|
|
||||||
this.zoom(-8) // 每次缩小8%
|
|
||||||
}
|
|
||||||
},
|
|
||||||
initWebSocket () {
|
|
||||||
this.loading = this.$loading({
|
|
||||||
lock: true,
|
|
||||||
spinner: 'el-icon-loading',
|
|
||||||
background: 'rgba(0, 0, 0, 0.6)'
|
|
||||||
})
|
|
||||||
const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
|
|
||||||
const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
|
|
||||||
this.closeWebSocket()
|
|
||||||
this.websocket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
|
|
||||||
this.websocket.onopen = () => {}
|
|
||||||
this.websocket.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const res = JSON.parse(event.data)
|
|
||||||
this.greenPoints = res
|
|
||||||
this.loading.close()
|
|
||||||
} catch (error) {
|
|
||||||
console.error('WebSocket消息解析失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.websocket.onerror = (error) => {
|
|
||||||
this.$message.error(this.$t('WebSocketerror') + ':', error)
|
|
||||||
}
|
|
||||||
this.websocket.onclose = () => {
|
|
||||||
this.loading.close()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closeWebSocket () {
|
|
||||||
if (this.websocket) {
|
|
||||||
this.websocket.close(1000, '正常关闭')
|
|
||||||
this.websocket = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 点击重定位：锁定小车位置，初始化拖拽起点
|
|
||||||
handleRelocate () {
|
|
||||||
this.greenPoints = []
|
|
||||||
this.greenPoints = points.data
|
|
||||||
// this.initWebSocket()
|
|
||||||
if (typeof this.carPosition?.x !== 'number' || typeof this.carPosition?.y !== 'number' || !this.mapData) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 锁定小车（不再响应carPosition变化）
|
|
||||||
this.isCarLocked = true
|
|
||||||
},
|
|
||||||
// 开始拖拽小车
|
|
||||||
startCarDrag (e) {
|
|
||||||
if (!this.isCarLocked) return // 未锁定时不允许拖拽
|
|
||||||
this.isDraggingCar = true
|
|
||||||
// 初始化拖拽起点
|
|
||||||
const clientX = e.clientX || e.touches[0].clientX
|
|
||||||
const clientY = e.clientY || e.touches[0].clientY
|
|
||||||
// 将 clientX 转换为 SVG 坐标系中的 carX
|
|
||||||
const svgPoint = this.clientToSvg(clientX, clientY)
|
|
||||||
// 记录拖拽开始的偏移量
|
|
||||||
this.dragStartX = svgPoint.x - this.carX
|
|
||||||
this.dragStartY = svgPoint.y - this.carY
|
|
||||||
const options = { passive: false }
|
|
||||||
document.addEventListener('mousemove', this.onCarDragMove, options)
|
|
||||||
document.addEventListener('mouseup', this.endCarDrag, options)
|
|
||||||
document.addEventListener('touchmove', this.onCarDragMove, options)
|
|
||||||
document.addEventListener('touchend', this.endCarDrag, options)
|
|
||||||
e.preventDefault()
|
|
||||||
},
|
|
||||||
// 拖拽小车移动
|
|
||||||
onCarDragMove: throttle(function (e) {
|
|
||||||
if (!this.isDraggingCar || !this.isCarLocked) return
|
|
||||||
e.preventDefault()
|
|
||||||
const clientX = e.clientX || e.touches[0].clientX
|
|
||||||
const clientY = e.clientY || e.touches[0].clientY
|
|
||||||
// 转换为 SVG 坐标
|
|
||||||
const svgPoint = this.clientToSvg(clientX, clientY)
|
|
||||||
// 计算新的车辆位置（减去偏移量）
|
|
||||||
this.carX = svgPoint.x - this.dragStartX
|
|
||||||
this.carY = svgPoint.y - this.dragStartY
|
|
||||||
}, 16),
|
|
||||||
// 结束拖拽小车
|
|
||||||
endCarDrag () {
|
|
||||||
if (this.isDraggingCar) {
|
|
||||||
this.isDraggingCar = false
|
|
||||||
const options = { passive: false }
|
|
||||||
document.removeEventListener('mousemove', this.onCarDragMove, options)
|
|
||||||
document.removeEventListener('mouseup', this.endCarDrag, options)
|
|
||||||
document.removeEventListener('touchmove', this.onCarDragMove, options)
|
|
||||||
document.removeEventListener('touchend', this.endCarDrag, options)
|
|
||||||
const mapCoord = this.svgToMapCoordinate(this.carX + 15, this.carY + 15)
|
|
||||||
console.log(mapCoord)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 将 clientX 转换为 SVG 坐标系
|
|
||||||
clientToSvg(clientX, clientY) {
|
|
||||||
const svg = this.$refs.mapSvg
|
|
||||||
const pt = svg.createSVGPoint()
|
|
||||||
|
|
||||||
pt.x = clientX
|
|
||||||
pt.y = clientY
|
|
||||||
|
|
||||||
// 使用 SVG 的变换矩阵将屏幕坐标转换为 SVG 内部坐标
|
|
||||||
return pt.matrixTransform(svg.getScreenCTM().inverse())
|
|
||||||
},
|
|
||||||
// 将 SVG 坐标转换为 clientX
|
|
||||||
svgToClient(svgX, svgY) {
|
|
||||||
const svg = this.$refs.mapSvg
|
|
||||||
const pt = svg.createSVGPoint()
|
|
||||||
|
|
||||||
pt.x = svgX
|
|
||||||
pt.y = svgY
|
|
||||||
|
|
||||||
// 将 SVG 坐标转换为屏幕坐标
|
|
||||||
return pt.matrixTransform(svg.getScreenCTM())
|
|
||||||
},
|
|
||||||
// 将 SVG 坐标 carX 转换回地图坐标系
|
|
||||||
svgToMapCoordinate(svgX, svgY) {
|
|
||||||
if (!this.mapData) return null
|
|
||||||
// 反向计算您的原始公式
|
|
||||||
const mapX = (svgX / this.mapScale) * this.mapData.resolution + this.mapData.x
|
|
||||||
const mapY = this.mapData.y + (this.mapData.height - (svgY / this.mapScale)) * this.mapData.resolution
|
|
||||||
|
|
||||||
return { x: mapX, y: mapY }
|
|
||||||
},
|
|
||||||
convertToSvgX (x) {
|
|
||||||
if (!this.mapData || !this.mapScale) return 0
|
|
||||||
const svgX = ((x - this.mapData.x) / this.mapData.resolution) * this.mapScale
|
|
||||||
return svgX
|
|
||||||
},
|
|
||||||
convertToSvgY (y) {
|
|
||||||
if (!this.mapData || !this.mapScale) return 0
|
|
||||||
const svgY = (this.mapData.height - (y - this.mapData.y) / this.mapData.resolution) * this.mapScale
|
|
||||||
return svgY
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
.canvas-container
|
|
||||||
position relative
|
|
||||||
height 100%
|
|
||||||
background-color rgba(4, 33, 58, 70%)
|
|
||||||
box-shadow inset 1px 1px 7px 2px #4d9bcd
|
|
||||||
overflow hidden
|
|
||||||
.mapCanvas, .mapSvg
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
.mapSvg
|
|
||||||
pointer-events none
|
|
||||||
z-index 10
|
|
||||||
image
|
|
||||||
pointer-events auto
|
|
||||||
.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 160px
|
|
||||||
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); }
|
|
||||||
}
|
|
||||||
.enClass
|
|
||||||
.point-popup
|
|
||||||
min-width 240px
|
|
||||||
</style>
|
|
||||||
@@ -8,6 +8,8 @@ const Warning = r => require.ensure([], () => r(require('../pages/modules/warn/i
|
|||||||
const Building = r => require.ensure([], () => r(require('../pages/modules/build/index.vue')), 'Building')
|
const Building = r => require.ensure([], () => r(require('../pages/modules/build/index.vue')), 'Building')
|
||||||
const Map = r => require.ensure([], () => r(require('../pages/modules/map/index.vue')), 'Map')
|
const Map = r => require.ensure([], () => r(require('../pages/modules/map/index.vue')), 'Map')
|
||||||
const Relocation = r => require.ensure([], () => r(require('../pages/modules/relocation.vue')), 'Relocation')
|
const Relocation = r => require.ensure([], () => r(require('../pages/modules/relocation.vue')), 'Relocation')
|
||||||
|
const Login = r => require.ensure([], () => r(require('../pages/modules/login/index.vue')), 'login')
|
||||||
|
const Hub = r => require.ensure([], () => r(require('../pages/modules/hub/index.vue')), 'Hub')
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
@@ -38,6 +40,14 @@ const router = new VueRouter({
|
|||||||
path: 'relocation',
|
path: 'relocation',
|
||||||
component: Relocation
|
component: Relocation
|
||||||
}]
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
component: Login
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/hub',
|
||||||
|
component: Hub
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user