Skip to content

F
FleetTruckView
Commit 8b5440d8 authored by 高晓帆's avatar 高晓帆
Browse files
Options

最新代码

parent 40ebeb68
Hide whitespace changes
Inline Side-by-side
Showing with 703 additions and 740 deletions
package.json
View file @ 8b5440d8
......@@ -10,7 +10,6 @@
"dependencies": {
"@turf/turf": "^6.5.0",
"axios": "^1.3.4",
"deck.gl": "^8.9.21",
"dexie": "^3.2.3",
"leaflet": "^1.9.3",
"leaflet-rotate": "^0.2.5",
......
src/views/js/view_def.js
View file @ 8b5440d8
......@@ -71,6 +71,30 @@ export const INFORMATION_MESSAGE = [
],
[
{
name: 'loadBrakeCmd',
label: '装载制动给定'
},
],
[
{
name: 'loadBrakeStatus',
label: '装载制动反馈'
},
],
[
{
name: 'mechBrakeCmd',
label: '机械制动给定'
},
],
[
{
name: 'mechBrakeStatus',
label: '机械制动反馈'
},
],
[
{
name: 'AutoChangeFlag',
label: '转向状态码'
},
......
src/views/map/MapLeaflet.vue
View file @ 8b5440d8
<template>
<div class="map-contain" id="container">
<!-- <div id="map" ref="root"></div> -->
<img src="/image/compass.png" class="compass" ref="compass"
:style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
<div class="map-contain">
<div id="map" ref="root"></div>
<img src="/image/compass.png" class="compass" ref="compass" :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
<div class="navigate-preview">
<img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
</div>
......@@ -10,812 +9,735 @@
</template>
<script setup>
import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
import { useMapStore } from '@/store/MapStore.js'
import { useVehicleStore } from '@/store/VehicleStore'
import { storeToRefs } from 'pinia'
import { vehicleScale } from '../js/tools'
import Deck from "@/tools/Deck"
import L from 'leaflet'
import 'leaflet-rotate'
import '@/tools/Leaflet.LayerGroup.Collision'
import * as turf from '@turf/turf'
const safe_color = '#FFA500'
const BASE_RAD = 1.5707963267948966
const MAP_ZOOM = 18
const LAYER_PROPOITY = {
runablearea: 1,
staticobjs: 2,
diggingarea: 3,
diggingworkarea: 3,
dumparea: 4,
barricade: 5,
electronicFence: 6,
wetArea: 7,
lane: 8,
obstacles: 9,
stationarea: 10,
parkspot: 11,
lanenode: 12,
currPathinfo: 13,
nextPathinfo: 14,
avoidancePath: 15,
traj: 16,
obstacle: 17
}
import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
import { useMapStore } from '@/store/MapStore.js'
import { useVehicleStore } from '@/store/VehicleStore'
import { storeToRefs } from 'pinia'
import { vehicleScale } from '../js/tools'
import L from 'leaflet'
import 'leaflet-rotate'
import '@/tools/Leaflet.LayerGroup.Collision'
import * as turf from '@turf/turf'
const safe_color = '#FFA500'
const BASE_RAD = 1.5707963267948966
const MAP_ZOOM = 18
const LAYER_PROPOITY = {
runablearea: 1,
staticobjs: 2,
diggingarea: 3,
diggingworkarea: 3,
dumparea: 4,
barricade: 5,
electronicFence: 6,
wetArea: 7,
lane: 8,
obstacles: 9,
stationarea: 10,
parkspot: 11,
lanenode: 12,
currPathinfo: 13,
nextPathinfo: 14,
avoidancePath: 15,
traj: 16,
obstacle: 17
}
const vehicles = {}
let ismousedown = false
let ismousemove = false
let resetTime = null
let obstaclePolygons = []
let dynamicPaths=[]
const vehicles = {}
let ismousedown = false
let ismousemove = false
let resetTime = null
let obstaclePolygons = []
let dynamicPaths = []
const reNavigateTime = 10 * 1000
const props = defineProps({
isShowBasic: Boolean,
clearSinglePointEnable: Boolean,
reloadData: Boolean
})
let map = markRaw({})
const layers = ref([])
let currentPosition = markRaw([])
const root = ref(null)
const mapLayers = markRaw({})
const safeObjects = markRaw({})
const safeTrajs = markRaw({})
const singlePaths = markRaw([])
const navigate = ref(true)
const currentRotation = ref(0)
const markerLayerGroupLists = markRaw({})
const isSinglePreview = ref(false)
const compassRotationAngle = ref(0)
const compass = ref(null)
const mapStore = useMapStore()
const mapStoreToRefs = storeToRefs(mapStore)
const {
lanenode,
lane,
runablearea,
centerline,
obstacles,
diggingworkarea,
dumparea,
barricade,
stationarea,
parkspot,
staticobjs,
electronicFence,
morepoint, // 单机循迹单路径
morepath, // 单机循迹多路径
nextPathinfo,
currPathinfo,
nextPathAvailable,
avoidancePath, // 绕障路径
obstacleData,
dynamicPathinfo, // 车辆动态路权信息
} = mapStoreToRefs
const vehicleStore = useVehicleStore()
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
const deviceId = computed(() => {
return paraminfo.value.deviceId
})
const emits = defineEmits(['handleSend'])
onMounted(() => {
let timer=null
map = new Deck({
id:'maps',
parent: document.getElementById('container'),
initialViewState: {
latitude: document.location.mapCenter[0],
longitude: document.location.mapCenter[1],
zoom: 15,
maxZoom: 20,
pitch: 0,
bearing: 0
},
controller: true,
onViewStateChange: f => {
// navigate.value = false
// if(timer){
// clearTimeout(timer)
// timer = null
// }
// timer=setTimeout(() => {
// navigate.value = true
// }, 3 * 1000)
},
const reNavigateTime = 10 * 1000
const props = defineProps({
isShowBasic: Boolean,
clearSinglePointEnable: Boolean,
reloadData: Boolean
})
// map = L.map(root.value, {
// center: document.location.mapCenter,
// zoom: 14,
// zoomControl: false,
// minZoom: 10,
// maxZoom: 21,
// rotate: true,
// touchRotate: true
// })
// map.on('zoomend', () => {
// let zoom = map.getZoom()
// let { iconSize, iconAnchor } = vehicleScale(zoom)
// for (let vehicle in vehicles) {
// let icon = vehicles[vehicle].getIcon()
// let { iconUrl } = icon.options
// let newIcon = L.icon({
// iconUrl,
// iconSize,
// iconAnchor
// })
// vehicles[vehicle].setIcon(newIcon)
// }
// })
// let mapDom = root.value
// mapDom.addEventListener('mousedown', () => {
// changeMouseDown()
// })
// mapDom.addEventListener('mousemove', (evt) => {
// changeMouseMove()
// })
// mapDom.addEventListener('mouseup', (evt) => {
// changeMouseUp()
// })
emits('handleSend', {
type: 'syncMapVersion',
msg: {}
let map = markRaw({})
let currentPosition = markRaw([])
const root = ref(null)
const mapLayers = markRaw({})
const safeObjects = markRaw({})
const safeTrajs = markRaw({})
const singlePaths = markRaw([])
const navigate = ref(true)
const currentRotation = ref(0)
const markerLayerGroupLists = markRaw({})
const isSinglePreview = ref(false)
const compassRotationAngle = ref(0)
const compass = ref(null)
const mapStore = useMapStore()
const mapStoreToRefs = storeToRefs(mapStore)
const {
lanenode,
lane,
runablearea,
centerline,
obstacles,
diggingworkarea,
dumparea,
barricade,
stationarea,
parkspot,
staticobjs,
electronicFence,
morepoint, // 单机循迹单路径
morepath, // 单机循迹多路径
nextPathinfo,
currPathinfo,
nextPathAvailable,
avoidancePath, // 绕障路径
obstacleData,
dynamicPathinfo, // 车辆动态路权信息
} = mapStoreToRefs
const vehicleStore = useVehicleStore()
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
const deviceId = computed(() => {
return paraminfo.value.deviceId
})
})
function changeNavigate() {
navigate.value = true
// dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
const emits = defineEmits(['handleSend'])
onMounted(() => {
map = L.map(root.value, {
center: document.location.mapCenter,
zoom: 14,
zoomControl: false,
minZoom: 10,
maxZoom: 21,
rotate: true,
touchRotate: true
})
map.on('zoomend', () => {
let zoom = map.getZoom()
let { iconSize, iconAnchor } = vehicleScale(zoom)
for (let vehicle in vehicles) {
let icon = vehicles[vehicle].getIcon()
let { iconUrl } = icon.options
let newIcon = L.icon({
iconUrl,
iconSize,
iconAnchor
})
vehicles[vehicle].setIcon(newIcon)
}
})
// 指南针
function changeCompass() {
dealVehicleRotate(0)
currentRotation.value = BASE_RAD
if (navigate.value) {
setTimeout(() => {
dealVehicleRotate()
}, 3 * 1000)
}
}
let mapDom = root.value
mapDom.addEventListener('mousedown', () => {
changeMouseDown()
})
function changeMouseDown() {
ismousedown = true
}
mapDom.addEventListener('mousemove', (evt) => {
changeMouseMove()
})
function changeMouseMove() {
if (ismousedown) {
ismousemove = true
if (resetTime) {
window.clearTimeout(resetTime)
resetTime = null
}
mapDom.addEventListener('mouseup', (evt) => {
changeMouseUp()
})
emits('handleSend', {
type: 'syncMapVersion',
msg: {}
})
})
function changeNavigate() {
navigate.value = true
dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
}
function changeMouseUp() {
if (!currentPosition) return
if (ismousedown && ismousemove) {
navigate.value = false
resetTime = window.setTimeout(() => {
if (!navigate.value) {
navigate.value = true
// 指南针
function changeCompass() {
dealVehicleRotate(0)
currentRotation.value = BASE_RAD
if (navigate.value) {
setTimeout(() => {
dealVehicleRotate()
currentRotation.value = BASE_RAD
}
}, reNavigateTime)
ismousedown = false
ismousemove = false
}, 3 * 1000)
}
}
}
function dealVehicleRotate(rotate) {
let keys = Object.keys(vehicles)
let target = keys.find(item => item === deviceId.value)
let currentTarget = vehicles[target]
let vehicleHeading = BASE_RAD
let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
if (typeof rotate === 'number') {
dealMapRotate(0, currentPosition, map.getZoom())
currentTarget.setRotation(-currentOldHeading + vehicleHeading)
} else {
vehicleHeading = currentOldHeading
currentRotation.value = vehicleHeading
dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
currentTarget.setRotation(0)
function changeMouseDown() {
ismousedown = true
}
for (let key in vehicles) {
if (key !== deviceId.value) {
let oldHeading = vehicles[key].options['vehicleHeading']
vehicles[key].setRotation(-oldHeading + vehicleHeading)
function changeMouseMove() {
if (ismousedown) {
ismousemove = true
if (resetTime) {
window.clearTimeout(resetTime)
resetTime = null
}
}
}
}
function dealMapLayer(value, color, layerName) {
if (!value || !map) return
let result = JSON.parse(value)
if (!result) return
// if (mapLayers[layerName]) {
// map.removeLayer(mapLayers[layerName])
// delete mapLayers[layerName]
// }
let obj = {};
if (layerName === 'barricade') {
obj = {
getLineColor: map.convertColor('#0066ff'),
opacity: 1,
width: 5
}
} else {
obj = {
getLineColor: feature => {
return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
},
getFillColor: feature => {
let opacity = layerName === 'runablearea' ? .5 : .7
return layerName === 'electronicFence'
? map.convertColor(feature.properties.color, opacity)
: map.convertColor(color, opacity) ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
// const hex = f.properties.color;
// // convert to RGB
// return color ? color.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : hex ? hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : [0, 0, 0];
},
function changeMouseUp() {
if (!currentPosition) return
if (ismousedown && ismousemove) {
navigate.value = false
resetTime = window.setTimeout(() => {
if (!navigate.value) {
navigate.value = true
dealVehicleRotate()
currentRotation.value = BASE_RAD
}
}, reNavigateTime)
ismousedown = false
ismousemove = false
}
}
map.createGeoJsonLayer(result, obj, layerName)
// let layer = L.geoJSON(result, {
// style: function (feature) {
// if (layerName === 'barricade') {
// return {
// color: '#0066ff',
// opacity: 1,
// width: 5
// }
// } else {
// return {
// color: layerName === 'lane' ? '#eee' : feature.properties.color,
// opacity: layerName === 'lane' ? .5 : 1,
// fillColor: layerName === 'electronicFence'
// ? feature.properties.color
// : color ? color : feature.properties.color,
// fillOpacity: layerName === 'runablearea' ? .5 : .7
// }
// }
// },
// })
// mapLayers[layerName] = layer.addTo(map)
// let bottomLayerOne = mapLayers['diggingworkarea']
// let bottomLayerTwo = mapLayers['runablearea']
// let bottomLayerThree = mapLayers['barricade']
// bottomLayerThree && bottomLayerThree.bringToFront()
// bottomLayerOne && bottomLayerOne.bringToBack()
// bottomLayerTwo && bottomLayerTwo.bringToBack()
// mapStore.setData(layerName, null)
}
function dealMapPath(value, layerName, color) {
if (mapLayers[layerName]) {
map.removeLayer(mapLayers[layerName])
delete mapLayers[layerName]
}
if (mapLayers[`${layerName}Buffer`]) {
map.removeLayer(mapLayers[`${layerName}Buffer`])
delete mapLayers[`${layerName}Buffer`]
function dealVehicleRotate(rotate) {
let keys = Object.keys(vehicles)
let target = keys.find(item => item === deviceId.value)
let currentTarget = vehicles[target]
let vehicleHeading = BASE_RAD
let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
if (typeof rotate === 'number') {
dealMapRotate(0, currentPosition, map.getZoom())
currentTarget.setRotation(-currentOldHeading + vehicleHeading)
} else {
vehicleHeading = currentOldHeading
currentRotation.value = vehicleHeading
dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
currentTarget.setRotation(0)
}
for (let key in vehicles) {
if (key !== deviceId.value) {
let oldHeading = vehicles[key].options['vehicleHeading']
vehicles[key].setRotation(-oldHeading + vehicleHeading)
}
}
}
if (value && value.length) {
let data = JSON.parse(JSON.stringify(value))
let path = L.polyline(data, {
color: '#ffff00',
opacity: 1,
className: 'middle-line',
fillColor: '#ffff00',
fillOpacity: 1,
}).addTo(map)
mapLayers[layerName] = path
let bufferLine = turf.buffer(path.toGeoJSON(), 6.5, { units: "meters" })
mapLayers[`${layerName}Buffer`] = L.geoJSON(bufferLine, {
style: function () { return { color, fillOpacity: .6 } },
}).addTo(map)
mapLayers[`${layerName}Buffer`].bringToFront()
}
}
function dealMapLayer(value, color, layerName) {
if (!value || !map) return
function deleteMarker(features, layerName) {
Object.keys(markerLayerGroupLists).forEach(item => {
if (item.includes(layerName)) {
map.removeLayer(markerLayerGroupLists[item])
let result = JSON.parse(value)
if (!result) return
if (mapLayers[layerName]) {
map.removeLayer(mapLayers[layerName])
delete mapLayers[layerName]
}
})
let marker = Object.keys(markerLayerGroupLists).filter(item => item.includes(layerName))
for (let i = 0; i < marker.length; i++) {
let item = marker[i]
let isIn = features.find(f => `${layerName}${f.properties.id}` === item)
if (isIn) continue
if (item.includes('point')) continue
let id = item.replace(`${layerName}`, '')
let icon = L.divIcon({
html: `<span class="icon-node-name"></span>`,
className: 'icon-node',
})
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon)
let layer = L.geoJSON(result, {
style: function (feature) {
if(layerName === 'barricade'){
return {
color: '#0066ff',
opacity: 1,
width:5
}
}else{
return {
color: layerName === 'lane' ? '#eee' : feature.properties.color,
opacity: layerName === 'lane' ? .5 : 1,
fillColor: layerName === 'electronicFence'
? feature.properties.color
: color ? color : feature.properties.color,
fillOpacity: layerName === 'runablearea' ? .5 : .7
}
}
},
})
mapLayers[layerName] = layer.addTo(map)
let bottomLayerOne = mapLayers['diggingworkarea']
let bottomLayerTwo = mapLayers['runablearea']
let bottomLayerThree = mapLayers['barricade']
bottomLayerThree && bottomLayerThree.bringToFront()
bottomLayerOne && bottomLayerOne.bringToBack()
bottomLayerTwo && bottomLayerTwo.bringToBack()
mapStore.setData(layerName, null)
}
}
function dealDivIcon(value, layerName) {
if (!value || !map) return
let result = JSON.parse(value)
if (!result) return
const { features } = result
deleteMarker(features, layerName)
let markerLayerGroup = L.LayerGroup.collision({ margin: 5 })
for (let i = 0; i < features.length; i++) {
let feature = features[i]
let { name, id } = feature.properties
let { coordinates } = feature.geometry
let markerCoor = null
if (layerName === 'lanenode') {
markerCoor = [coordinates[1], coordinates[0]]
} else {
let center = turf.center(feature)
markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
function dealMapPath(value, layerName, color) {
if (mapLayers[layerName]) {
map.removeLayer(mapLayers[layerName])
delete mapLayers[layerName]
}
if (mapLayers[`${layerName}Buffer`]) {
map.removeLayer(mapLayers[`${layerName}Buffer`])
delete mapLayers[`${layerName}Buffer`]
}
if (value && value.length) {
let data = JSON.parse(JSON.stringify(value))
let path = L.polyline(data, {
color: '#ffff00',
opacity: 1,
className: 'middle-line',
fillColor: '#ffff00',
fillOpacity: 1,
}).addTo(map)
mapLayers[layerName] = path
let bufferLine = turf.buffer(path.toGeoJSON(), 6.5, { units: "meters" })
mapLayers[`${layerName}Buffer`] = L.geoJSON(bufferLine, {
style: function () { return { color, fillOpacity: .6 } },
}).addTo(map)
mapLayers[`${layerName}Buffer`].bringToFront()
}
let icon = L.divIcon({
html: `<span class="icon-node-name">${name}</span>`,
className: 'icon-node',
}
function deleteMarker(features, layerName) {
Object.keys(markerLayerGroupLists).forEach(item => {
if(item.includes(layerName)){
map.removeLayer(markerLayerGroupLists[item])
}
})
if (markerLayerGroupLists[`${layerName}${id}`]) {
let marker = Object.keys(markerLayerGroupLists).filter(item => item.includes(layerName))
for (let i = 0; i < marker.length; i++) {
let item = marker[i]
let isIn = features.find(f => `${layerName}${f.properties.id}` === item)
if (isIn) continue
if (item.includes('point')) continue
let id = item.replace(`${layerName}`, '')
let icon = L.divIcon({
html: `<span class="icon-node-name"></span>`,
className: 'icon-node',
})
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon)
} else {
let nameMarker = L.marker(markerCoor, { icon, zIndexOffset: -100 })
markerLayerGroup.addLayer(nameMarker)
markerLayerGroupLists[`${layerName}${id}`] = nameMarker
}
markerLayerGroupLists[`${layerName}${id}point`] = L.marker(markerCoor, {
icon: L.icon({
iconUrl: '/image/bluePoint.png',
iconSize: [12, 12],
iconAnchor: [6, 6],
}),
zIndexOffset: -100,
}).addTo(map)
}
markerLayerGroup.addTo(map)
mapStore.setData(layerName, null)
}
function dealDivIcon(value, layerName) {
if (!value || !map) return
let result = JSON.parse(value)
if (!result) return
const { features } = result
deleteMarker(features, layerName)
let markerLayerGroup = L.LayerGroup.collision({ margin: 5 })
for (let i = 0; i < features.length; i++) {
let feature = features[i]
let { name, id } = feature.properties
let { coordinates } = feature.geometry
let markerCoor = null
if (layerName === 'lanenode') {
markerCoor = [coordinates[1], coordinates[0]]
} else {
let center = turf.center(feature)
markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
}
let icon = L.divIcon({
html: `<span class="icon-node-name">${name}</span>`,
className: 'icon-node',
})
if (markerLayerGroupLists[`${layerName}${id}`]) {
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon)
} else {
let nameMarker = L.marker(markerCoor, { icon, zIndexOffset: -100 })
markerLayerGroup.addLayer(nameMarker)
markerLayerGroupLists[`${layerName}${id}`] = nameMarker
}
function removeLayer(obj, vehicleID) {
if (obj[vehicleID]) {
for (let item in obj[vehicleID]) {
map.removeLayer(obj[vehicleID][item])
markerLayerGroupLists[`${layerName}${id}point`] = L.marker(markerCoor, {
icon: L.icon({
iconUrl: '/image/bluePoint.png',
iconSize: [12, 12],
iconAnchor: [6, 6],
}),
zIndexOffset: -100,
}).addTo(map)
}
markerLayerGroup.addTo(map)
mapStore.setData(layerName, null)
}
function removeLayer(obj, vehicleID) {
if (obj[vehicleID]) {
for (let item in obj[vehicleID]) {
map.removeLayer(obj[vehicleID][item])
}
}
}
}
function adjustmentLayer() {
mapLayers['currentPath'] && mapLayers['currentPath'].bringToFront()
mapLayers['nextPath'] && mapLayers['nextPath'].bringToFront()
function adjustmentLayer() {
mapLayers['currentPath'] && mapLayers['currentPath'].bringToFront()
mapLayers['nextPath'] && mapLayers['nextPath'].bringToFront()
for (let key in safeObjects) {
let safeLayer = safeObjects[key]
for (let lkey in safeLayer) {
lkey && safeLayer[lkey].bringToFront()
for (let key in safeObjects) {
let safeLayer = safeObjects[key]
for (let lkey in safeLayer) {
lkey && safeLayer[lkey].bringToFront()
}
}
}
for (let key in safeTrajs) {
safeTrajs[key] && safeTrajs[key]['pathBuffer'] && safeTrajs[key]['pathBuffer'].bringToFront()
for (let key in safeTrajs) {
safeTrajs[key] && safeTrajs[key]['pathBuffer'] && safeTrajs[key]['pathBuffer'].bringToFront()
}
}
}
function dealSafe(vehicleID, safe) {
if (!map) return
const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
removeLayer(safeObjects, vehicleID)
safeObjects[vehicleID] = {}
if (!enable) return
let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
let zIndex = 16
for (let i = 0; i < dealedData.length; i++) {
let item = JSON.parse(JSON.stringify(dealedData[i]))
let layer = safeType === 'rectangle' ? L.polygon(item, { color: safe_color, weight: 1 }) : L.circle([vehicleLatitude, vehicleLongtitude], { radius: data[i], color: safe_color })
safeObjects[vehicleID][i] = layer.addTo(map)
safeObjects[vehicleID][i].bringToFront()
function dealSafe(vehicleID, safe) {
if (!map) return
const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
removeLayer(safeObjects, vehicleID)
safeObjects[vehicleID] = {}
if (!enable) return
let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
let zIndex = 16
for (let i = 0; i < dealedData.length; i++) {
let item = JSON.parse(JSON.stringify(dealedData[i]))
let layer = safeType === 'rectangle' ? L.polygon(item, { color: safe_color, weight: 1 }) : L.circle([vehicleLatitude, vehicleLongtitude], { radius: data[i], color: safe_color })
safeObjects[vehicleID][i] = layer.addTo(map)
safeObjects[vehicleID][i].bringToFront()
}
}
}
function dealTraj(vehicleID, traj) {
if (!traj || !map) return
const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
removeLayer(safeTrajs, vehicleID)
safeTrajs[vehicleID] = {}
// if (!dealedData) return
// if ((dealedData && !dealedData.length) || !radius)) return
if ([1, 20, 21].includes(vehicleType && !radius)) return;
const zIndex = LAYER_PROPOITY['traj']
if ([1, 20, 21].includes(vehicleType) && radius) {
let layer = L.circle([vehicleLatitude, vehicleLongtitude], { radius, color: '#FFA500' })
safeTrajs[vehicleID]['circle'] = layer.addTo(map)
safeTrajs[vehicleID]['circle'].bringToFront()
} else {
if (dealedData && !dealedData.length) return;
let path = L.polyline(JSON.parse(JSON.stringify(dealedData)), {})
safeTrajs[vehicleID]['path'] = path
let bufferLine = turf.buffer(path.toGeoJSON(), trajPathWid / 2, { units: "meters" })
let layer = L.geoJSON(bufferLine, {
style: function () {
return {
color: safe_color,
fillOpacity: .4
}
},
})
safeTrajs[vehicleID]['pathBuffer'] = layer.addTo(map)
safeTrajs[vehicleID]['pathBuffer'].bringToFront()
function dealTraj(vehicleID, traj) {
if (!traj || !map) return
const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
removeLayer(safeTrajs, vehicleID)
safeTrajs[vehicleID] = {}
// if (!dealedData) return
// if ((dealedData && !dealedData.length) || !radius)) return
if([1, 20, 21].includes(vehicleType && !radius)) return;
const zIndex = LAYER_PROPOITY['traj']
if ([1, 20, 21].includes(vehicleType) && radius) {
let layer = L.circle([vehicleLatitude, vehicleLongtitude], { radius, color: '#FFA500' })
safeTrajs[vehicleID]['circle'] = layer.addTo(map)
safeTrajs[vehicleID]['circle'].bringToFront()
} else {
if(dealedData && !dealedData.length) return;
let path = L.polyline(JSON.parse(JSON.stringify(dealedData)), {})
safeTrajs[vehicleID]['path'] = path
let bufferLine = turf.buffer(path.toGeoJSON(), trajPathWid / 2, { units: "meters" })
let layer = L.geoJSON(bufferLine, {
style: function () {
return {
color: safe_color,
fillOpacity: .4
}
},
})
safeTrajs[vehicleID]['pathBuffer'] = layer.addTo(map)
safeTrajs[vehicleID]['pathBuffer'].bringToFront()
}
}
}
function rotateVehicles(vehicleHeading) {
for (let key in vehicles) {
if (key !== deviceId.value) {
let oldHeading = vehicles[key].options['vehicleHeading']
vehicles[key].setRotation(-oldHeading + vehicleHeading)
function rotateVehicles(vehicleHeading) {
for (let key in vehicles) {
if (key !== deviceId.value) {
let oldHeading = vehicles[key].options['vehicleHeading']
vehicles[key].setRotation(-oldHeading + vehicleHeading)
}
}
}
}
function dealMapRotate(rotationAngle, center, zoom) {
let rotate = 0
if (rotationAngle) {
rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
}
if (compass.value) {
compassRotationAngle.value = rotationAngle
map.setBearing(rotate)
}
center && center.length && map.flyTo(center, zoom, { animate: false })
}
let num = 0
let markerList = {}
function dealVehiclePosition(value) {
if (!map || !value.length) return
// if(num==1) return
let list = []
// let zoom = map.getZoom()
// let { iconSize, iconAnchor } = vehicleScale(zoom)
for (let i = 0; i < value.length; i++) {
const item = value[i]
const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
let vehiclePosition = [vehicleLongtitude, vehicleLatitude]
let obj = {
name: vehicleID,
coordinates: vehiclePosition,
rotate: vehicleHeading
function dealMapRotate(rotationAngle, center, zoom) {
let rotate = 0
if (rotationAngle) {
rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
}
markerList[vehicleID] = obj
if (vehicleID === deviceId.value) {
// map.setRotation(30)
// if (navigate.value) {
// map.flyTo(vehiclePosition)
// }
if(num==0){
map.flyTo(vehiclePosition)
}
if (compass.value) {
compassRotationAngle.value = rotationAngle
map.setBearing(rotate)
}
// if (vehicles[vehicleID]) {
// let beforeIconUrl = vehicles[vehicleID].getIcon().options
// ? vehicles[vehicleID].getIcon().options.iconUrl
// : vehicles[vehicleID].getIcon().iconUrl
// if (!beforeIconUrl.includes(image)) {
// let newIcon = L.icon({
// iconUrl: `/image/${image}.png`,
// iconSize,
// iconAnchor
// })
// vehicles[vehicleID].setIcon(newIcon)
// }
// vehicles[vehicleID].setLatLng(vehiclePosition)
// } else {
// let icon = L.icon({
// iconUrl: `/image/${image}.png`,
// iconSize,
// iconAnchor,
// })
// vehicles[vehicleID] = L.marker(vehiclePosition, {
// icon: icon,
// draggable: false,
// rotationOrigin: 'center',
// rotationAngle: 0,
// zIndexOffset: 999
// }).addTo(map)
// vehicles[vehicleID].bindTooltip(`${vehicleID}`, {
// permanent: true,
// direction: 'center',
// }).openTooltip()
// }
// vehicles[vehicleID].options = Object.assign({}, vehicles[vehicleID].options, {
// vehicleHeading,
// vehicleLongtitude,
// vehicleLatitude
// })
// if (vehicleID === deviceId.value) {
// currentPosition = vehiclePosition
// if (navigate.value) {
// if (vehicleHeading !== currentRotation.value) {
// rotateVehicles(vehicleHeading)
// }
// currentRotation.value = vehicleHeading
// dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
// vehicles[vehicleID].setRotation(0)
// } else {
// // 再不旋转地图的情况下，需要旋转车辆本身(弧度)
// vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
// }
// } else {
// // 非本车
// vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
// }
center && center.length && map.flyTo(center, zoom, {animate: false})
}
for (let key in markerList) {
list.push(markerList[key])
}
map.createCarModel(list, 'car-marker')
num++
}
function dealSingleDatas(datas) {
const { color, coor } = datas
let path = L.polyline(coor, {
color,
}).addTo(map)
singlePaths.push(path)
}
function dealVehiclePosition(value) {
if (!map || !value.length) return
function dealObtacleData(value) {
if (obstaclePolygons.length) {
obstaclePolygons.forEach(item => map.removeLayer(item))
obstaclePolygons = []
}
if (value && value.length) {
let zoom = map.getZoom()
let { iconSize, iconAnchor } = vehicleScale(zoom)
for (let i = 0; i < value.length; i++) {
let obstacle = value[i]
let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
let obstaclePolygon = L.polygon(JSON.parse(JSON.stringify(coordinate)), { color: typeColor }).addTo(map)
let point = turf.point([centerLon, centerLat])
let obstacleBuffer = turf.buffer(point, centerRadius, { units: "meters" })
let obstacleCircle = L.geoJSON(obstacleBuffer, {
style: () => {
return {
color: centerColor,
fillOpacity: .5
const item = value[i]
const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
if (vehicles[vehicleID]) {
let beforeIconUrl = vehicles[vehicleID].getIcon().options
? vehicles[vehicleID].getIcon().options.iconUrl
: vehicles[vehicleID].getIcon().iconUrl
if (!beforeIconUrl.includes(image)) {
let newIcon = L.icon({
iconUrl: `/image/${image}.png`,
iconSize,
iconAnchor
})
vehicles[vehicleID].setIcon(newIcon)
}
vehicles[vehicleID].setLatLng(vehiclePosition)
} else {
let icon = L.icon({
iconUrl: `/image/${image}.png`,
iconSize,
iconAnchor,
})
vehicles[vehicleID] = L.marker(vehiclePosition, {
icon: icon,
draggable: false,
rotationOrigin: 'center',
rotationAngle: 0,
zIndexOffset: 999
}).addTo(map)
vehicles[vehicleID].bindTooltip(`${vehicleID}`, {
permanent: true,
direction: 'center',
}).openTooltip()
}
vehicles[vehicleID].options = Object.assign({}, vehicles[vehicleID].options, {
vehicleHeading,
vehicleLongtitude,
vehicleLatitude
})
if (vehicleID === deviceId.value) {
currentPosition = vehiclePosition
if (navigate.value) {
if (vehicleHeading !== currentRotation.value) {
rotateVehicles(vehicleHeading)
}
currentRotation.value = vehicleHeading
dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
vehicles[vehicleID].setRotation(0)
} else {
// 再不旋转地图的情况下，需要旋转车辆本身(弧度)
vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
}
}).addTo(map)
obstaclePolygons.push(obstacleCircle)
obstaclePolygons.push(obstaclePolygon)
} else {
// 非本车
vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
}
}
}
}
function dealDynamicDatas(datas) {
let name = 'dynamicLine';
if (mapLayers[name]) {
map.removeLayer(mapLayers[name])
delete mapLayers[name]
function dealSingleDatas(datas) {
const { color, coor } = datas
let path = L.polyline(coor, {
color,
}).addTo(map)
singlePaths.push(path)
}
// if (dynamicPaths.length) {
// dynamicPaths.forEach(item => map.removeLayer(item))
// dynamicPaths = []
// }
const { color, path } = datas
let pathNew = L.polyline(path, {
color,
opacity: 0.3,
weight: 30,
}).addTo(map)
mapLayers[name] = pathNew
mapLayers[name].bringToFront()
// dynamicPaths.push(pathNew)
}
function dealObtacleData(value) {
if (obstaclePolygons.length) {
obstaclePolygons.forEach(item => map.removeLayer(item))
obstaclePolygons = []
}
if (value && value.length) {
for (let i = 0; i < value.length; i++) {
let obstacle = value[i]
let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
let obstaclePolygon = L.polygon(JSON.parse(JSON.stringify(coordinate)), { color: typeColor }).addTo(map)
let point = turf.point([centerLon, centerLat])
let obstacleBuffer = turf.buffer(point, centerRadius, { units: "meters" })
let obstacleCircle = L.geoJSON(obstacleBuffer, {
style: () => {
return {
color: centerColor,
fillOpacity: .5
}
}
}).addTo(map)
obstaclePolygons.push(obstacleCircle)
obstaclePolygons.push(obstaclePolygon)
}
}
}
function dealDynamicDatas(datas) {
let name='dynamicLine';
if (mapLayers[name]) {
map.removeLayer(mapLayers[name])
delete mapLayers[name]
}
// if (dynamicPaths.length) {
// dynamicPaths.forEach(item => map.removeLayer(item))
// dynamicPaths = []
// }
const { color, path } = datas
let pathNew = L.polyline(path, {
color,
opacity:0.3,
weight:30,
}).addTo(map)
mapLayers[name] = pathNew
mapLayers[name].bringToFront()
// dynamicPaths.push(pathNew)
}
// 直接监听props.isShowBasic 不会触发
watch(() => props.isShowBasic, () => {
nextTick(() => {
map.invalidateSize(true)
// 直接监听props.isShowBasic 不会触发
watch(() => props.isShowBasic, () => {
nextTick(() => {
map.invalidateSize(true)
})
})
})
watch(lanenode, (value) => {
// dealDivIcon(value, 'lanenode', '#ff0000')
}, { immediate: true, deep: true })
watch(lane, (value) => {
dealMapLayer(value, '#fff', 'lane')
}, { immediate: true, deep: true })
watch(runablearea, (value) => {
dealMapLayer(value, '#98a0a0', 'runablearea')
}, { immediate: true, deep: true })
watch(centerline, (value) => {
dealMapLayer(value, '#eee', 'centerline')
}, { immediate: true, deep: true })
watch(obstacles, (value) => {
// dealDivIcon(value, 'obstacles')
dealMapLayer(value, '#6f9bdd', 'obstacles')
}, { immediate: true, deep: true })
watch(diggingworkarea, (value) => {
// dealDivIcon(value, 'diggingworkarea')
dealMapLayer(value, '#886e26', 'diggingworkarea')
}, { immediate: true, deep: true })
watch(dumparea, (value) => {
// dealDivIcon(value, 'dumparea')
dealMapLayer(value, '#886e26', 'dumparea')
}, { immediate: true, deep: true })
watch(barricade, (value) => {
dealMapLayer(value, '#0000ff', 'barricade')
}, { immediate: true, deep: true })
watch(stationarea, (value) => {
// dealDivIcon(value, 'stationarea')
dealMapLayer(value, '#90ee90', 'stationarea')
}, { immediate: true, deep: true })
watch(parkspot, (value) => {
// dealDivIcon(value, 'parkspot')
dealMapLayer(value, '#7e8185', 'parkspot')
}, { immediate: true, deep: true })
watch(staticobjs, (value) => {
dealMapLayer(value, '#98a0a0', 'staticobjs')
}, { immediate: true, deep: true })
watch(electronicFence, (value) => {
// dealDivIcon(value, 'electronicFence')
dealMapLayer(value, '#d51d20', 'electronicFence')
}, { immediate: true, deep: true })
watch(nextPathinfo, (value) => {
// dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
// adjustmentLayer()
}, { immediate: true, deep: true })
watch(currPathinfo, (value) => {
// dealMapPath(value, 'currentPath', '#19ae19')
// adjustmentLayer()
}, { immediate: true, deep: true })
watch(avoidancePath, (value) => {
// dealMapPath(value, 'avoidancePath', 'blue')
}, { immediate: true, deep: true })
watch(vehiclesPositioninfo, (value) => {
dealVehiclePosition(value)
}, {
immediate: true,
deep: true
})
watch(safeObj, (value) => {
Object.keys(value).forEach(item => {
// dealSafe(item, value[item])
watch(lanenode, (value) => {
dealDivIcon(value, 'lanenode', '#ff0000')
}, {immediate: true, deep: true})
watch(lane, (value) => {
dealMapLayer(value, '#fff', 'lane')
}, {immediate: true, deep: true})
watch(runablearea, (value) => {
dealMapLayer(value, '#98a0a0', 'runablearea')
}, {immediate: true, deep: true})
watch(centerline, (value) => {
dealMapLayer(value, '#eee', 'centerline')
}, {immediate: true, deep: true})
watch(obstacles, (value) => {
dealDivIcon(value, 'obstacles')
dealMapLayer(value, '#6f9bdd', 'obstacles')
}, {immediate: true, deep: true})
watch(diggingworkarea, (value) => {
dealDivIcon(value, 'diggingworkarea')
dealMapLayer(value, '#886e26', 'diggingworkarea')
}, {immediate: true, deep: true})
watch(dumparea, (value) => {
dealDivIcon(value, 'dumparea')
dealMapLayer(value, '#886e26', 'dumparea')
}, {immediate: true, deep: true})
watch(barricade, (value) => {
dealMapLayer(value, '#0000ff', 'barricade')
}, {immediate: true, deep: true})
watch(stationarea, (value) => {
dealDivIcon(value, 'stationarea')
dealMapLayer(value, '#90ee90', 'stationarea')
}, {immediate: true, deep: true})
watch(parkspot, (value) => {
dealDivIcon(value, 'parkspot')
dealMapLayer(value, '#7e8185', 'parkspot')
}, {immediate: true, deep: true})
watch(staticobjs, (value) => {
dealMapLayer(value, '#98a0a0', 'staticobjs')
}, {immediate: true, deep: true})
watch(electronicFence, (value) => {
dealDivIcon(value, 'electronicFence')
dealMapLayer(value, '#d51d20', 'electronicFence')
}, {immediate: true, deep: true})
watch(nextPathinfo, (value) => {
dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
adjustmentLayer()
}, {immediate: true, deep: true})
watch(currPathinfo, (value) => {
dealMapPath(value, 'currentPath', '#19ae19')
adjustmentLayer()
}, {immediate: true, deep: true})
watch(avoidancePath, (value) => {
dealMapPath(value, 'avoidancePath', 'blue')
}, {immediate: true, deep: true})
watch(vehiclesPositioninfo, (value) => {
dealVehiclePosition(value)
}, {
immediate: true,
deep: true
})
}, {
immediate: true,
deep: true
})
watch(trajObj, (value) => {
Object.keys(value).forEach(item => {
// dealTraj(item, value[item])
watch(safeObj, (value) => {
Object.keys(value).forEach(item => {
dealSafe(item, value[item])
})
}, {
immediate: true,
deep: true
})
}, {
immediate: true,
deep: true
})
watch(obstacleData, (value) => {
// dealObtacleData(value)
}, { immediate: true, deep: true })
watch(deleteVehicles, (data) => {
if (!map) return
if (data && data.length) {
data.forEach(item => {
// map.removeLayer(vehicles[item])
// removeLayer(safeTrajs, item)
// removeLayer(safeObjects, item)
// delete vehicles[item]
watch(trajObj, (value) => {
Object.keys(value).forEach(item => {
dealTraj(item, value[item])
})
}
}, {
immediate: true
})
watch(() => props.clearSinglePointEnable, (enable) => {
if (!enable) return
isSinglePreview.value = true
// singlePaths.forEach(item => map.removeLayer(item))
}, { deep: true })
watch([morepoint, morepath], (pointData, pathData) => {
if (isSinglePreview.value && (pointData || pathData)) {
let datas = pointData.concat(pathData)
for (let i = 0; i < datas.length; i++) {
// dealSingleDatas(datas[i])
}, {
immediate: true,
deep: true
})
watch(obstacleData, (value) => {
dealObtacleData(value)
}, {immediate: true, deep: true})
watch(deleteVehicles, (data) => {
if (!map) return
if (data && data.length) {
data.forEach(item => {
map.removeLayer(vehicles[item])
removeLayer(safeTrajs, item)
removeLayer(safeObjects, item)
delete vehicles[item]
})
}
}
}, { deep: true })
}, {
immediate: true
})
watch(dynamicPathinfo, (pathData) => {
if (pathData.length > 0) {
for (let i = 0; i < pathData.length; i++) {
// dealDynamicDatas(pathData[i])
watch(() => props.clearSinglePointEnable, (enable) => {
if (!enable) return
isSinglePreview.value = true
singlePaths.forEach(item => map.removeLayer(item))
}, {deep: true})
watch([morepoint, morepath], (pointData, pathData) => {
if (isSinglePreview.value && (pointData || pathData)) {
let datas = pointData.concat(pathData)
for (let i = 0; i < datas.length; i++) {
dealSingleDatas(datas[i])
}
}
}
}, { deep: true })
}, {deep: true})
watch(deviceId, (value) => {
if (value && map) {
// dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
}, { deep: true })
watch(dynamicPathinfo, (pathData) => {
if (pathData.length>0) {
for(let i=0;i<pathData.length;i++) {
dealDynamicDatas(pathData[i])
}
}
}, {deep: true})
function doUnmount() {
Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
let mapDom = root.value
mapDom.removeEventListener('mousedown', changeMouseDown)
mapDom.removeEventListener('mousemove', changeMouseMove)
mapDom.removeEventListener('mouseup', changeMouseUp)
watch(deviceId, (value) => {
if (value && map) {
dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
}, {deep: true})
map.remove()
map = null
}
function doUnmount() {
Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
let mapDom = root.value
mapDom.removeEventListener('mousedown', changeMouseDown)
mapDom.removeEventListener('mousemove', changeMouseMove)
mapDom.removeEventListener('mouseup', changeMouseUp)
watch(() => props.reloadData, (value) => {
if (value) {
doUnmount()
map.remove()
map = null
}
})
onBeforeUnmount(() => {
doUnmount()
})
watch(() => props.reloadData, (value) => {
if (value) {
doUnmount()
}
})
onBeforeUnmount(() => {
doUnmount()
})
</script>
<style lang="less" scope>
......@@ -823,7 +745,6 @@ onBeforeUnmount(() => {
height: 100%;
overflow: hidden;
}
#map {
width: 200%;
height: 200%;
......@@ -912,5 +833,4 @@ onBeforeUnmount(() => {
.leaflet-control-attribution {
display: none !important;
}
</style>
\ No newline at end of file
}</style>
\ No newline at end of file
src/views/set-tags/RunControl.vue
View file @ 8b5440d8
......@@ -26,6 +26,10 @@
</div>
<div class="content">
<p class="c-box b-box">
<Button type="primary" @click="boxDown(10)">货箱回落</Button>
<span>仅在0/1级故障下且货箱功能正常时点击</span>
</p>
<p class="c-box b-box">
<Button type="primary" @click="handleSave(6)">解锁</Button>
<span>解锁上次异常退出导致的路权锁定</span>
</p>
......@@ -34,11 +38,18 @@
<span>触发控制模块重新加载参数</span>
</p>
</div>
<Modal v-model="isShow"
:closable="false"
:mask-closable="true"
@on-ok="handleSave(10)"
@on-cancel="boxCancel()">
<p style="text-align: center;">是否执行货箱回落指令</p>
</Modal>
</div>
</template>
<script setup>
import { reactive, toRefs, watch, markRaw } from 'vue';
import { ref,reactive, toRefs, watch, markRaw } from 'vue';
import { useVehicleStore } from '../../store/VehicleStore';
import { storeToRefs } from 'pinia';
......@@ -99,6 +110,8 @@
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { controlInfo } = vehicleStoreToRefs
const isShow=ref(false);
const emits = defineEmits(['sendMsg'])
function handleSend(msg) {
......@@ -125,9 +138,16 @@
type: Number(type),
value
}
handleSend(data)
}
function boxDown(){
isShow.value=true;
}
function boxCancel(){
isShow.value=false;
}
watch(controlInfo, (value) => {
data.form = {...value}
}, {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment