<template>
|
<div class="realTimeMap">
|
<div id="currentTaskMap"></div>
|
</div>
|
</template>
|
<script setup>
|
import L from 'leaflet'
|
import 'leaflet/dist/leaflet.css'
|
import {
|
basemapLayer0,
|
basemapLayer1,
|
basemapLayer2,
|
basemapLayer3,
|
polylineOptions0,
|
polylineOptions1, polylineOptions2,
|
} from '@/const/leafletConst'
|
import 'leaflet-ant-path'
|
import droneIcon from '@/appDataSource/leafletMapIcon/drone-icon3.svg'
|
import sl from '@/appDataSource/leafletMapIcon/sl.svg'
|
import yx from '@/appDataSource/leafletMapIcon/yx.svg'
|
import { analysisPointLineKmz } from '@/views/RoutePlan/PointAirLine/pointWayLineUtils'
|
import startImg from '@/assets/images/signMachineNest/start.png'
|
import endPointImg from '@/assets/images/signMachineNest/end.png'
|
import { useAreaBoundary } from '@/hooks/useAreaBoundary'
|
import { useIdentificationAreaForApp } from '@ztzf/hooks'
|
|
const taskDetailsViewer = inject('taskDetailsViewer')
|
const showUpKeyPanel = inject('showUpKeyPanel')
|
const isMaxMap = inject('isMaxMap')
|
const taskDetails = inject('taskDetails')
|
const taskWayLineDetails = inject('taskWayLineDetails')
|
const currentWayLine = inject('currentWayLine')
|
const wsInfo = inject('wsInfo')
|
const isCurFlightTask = inject('isCurFlightTask')
|
let map = null
|
let markersLayer = null
|
let boundsGroup = []
|
const basemap0 = L.layerGroup([basemapLayer0, basemapLayer1])
|
const basemap1 = L.layerGroup([basemapLayer2, basemapLayer3])
|
const layers = [
|
{ src: sl, name: '天地图电子', key: 1, map: basemap0 },
|
{ src: yx, name: '天地图影像', key: 2, map: basemap1 },
|
]
|
let boundaryInstance = useAreaBoundary()
|
|
const {setArea,removeArea } = useIdentificationAreaForApp()
|
const initMap = async () => {
|
map = L.map('currentTaskMap', {
|
preferCanvas: true,
|
crs: L.CRS.EPSG4326,
|
zoomControl: false,
|
attributionControl: false,
|
doubleClickZoom: false,
|
editable: true, //绘制控件
|
}).setView([25.992338, 114.823254], 13)
|
await boundaryInstance.initBoundary(map)
|
markersLayer = L.layerGroup().addTo(map) // 创建一个标注层，便于管理和移除
|
map.addLayer(layers[0].map)
|
setArea(taskDetails.value.ai_types.split(','),map)
|
// 渲染航线并且收集所有航线的边界
|
boundsGroup = []
|
const wayLines = taskWayLineDetails.value || []
|
console.log(taskDetails?.value,'taskDetails?.value')
|
if (taskDetails?.value?.rep_rule_type){
|
const bounds = await renderRoutes(wayLines[0], 0)
|
if (bounds) boundsGroup.push(bounds)
|
}else{
|
for (let i = 0; i < wayLines.length; i++) {
|
const bounds = await renderRoutes(wayLines[i], i)
|
if (bounds) boundsGroup.push(bounds)
|
}
|
}
|
flyBounds()
|
}
|
|
// 合理显示范围
|
function flyBounds() {
|
// 统一调整视图
|
if (boundsGroup.length > 0) {
|
const combinedBounds = boundsGroup.reduce((acc, bounds) => acc.extend(bounds), L.latLngBounds(boundsGroup[0]))
|
map.fitBounds(combinedBounds.pad(0.1))
|
}
|
}
|
|
|
// 渲染航线
|
async function renderRoutes(row,index) {
|
let { pointList } = await analysisPointLineKmz(row.url)
|
const { latitude, longitude } = row || {}
|
pointList[0] = { latitude, longitude }
|
let points = pointList.map(item => [item.latitude, item.longitude])
|
const colors = [polylineOptions0,polylineOptions1,polylineOptions2]
|
let currentPolyline = L.polyline.antPath(points, colors[index]).addTo(markersLayer)
|
const startIcon = L.icon({ iconUrl: startImg, iconSize: [30, 30] })
|
const endIcon = L.icon({ iconUrl: endPointImg, iconSize: [30, 30] })
|
L.marker(points[0], { icon: startIcon }).addTo(markersLayer)
|
L.marker(points[points.length - 1], { icon: endIcon }).addTo(markersLayer)
|
// map.fitBounds(currentPolyline.getBounds().pad(0.1))
|
|
// 返回边界而不是直接调整地图视图
|
return currentPolyline.getBounds()
|
}
|
|
|
|
const droneEntity = L.icon({ iconUrl: droneIcon, iconSize: [30, 30] })
|
let currentDronePosition = null
|
|
function updateDronePosition(deviceOsdInfo) {
|
const { longitude, latitude } = deviceOsdInfo || {}
|
if (!longitude) return
|
if (!currentDronePosition) {
|
currentDronePosition = L.marker([latitude, longitude], { icon: droneEntity }).addTo(markersLayer)
|
}
|
currentDronePosition.setLatLng([latitude, longitude])
|
}
|
|
watch(
|
wsInfo,
|
() => {
|
isCurFlightTask.value && updateDronePosition(wsInfo.value?.device_osd?.data?.host)
|
},
|
{ deep: true, immediate: true }
|
)
|
|
watch(isCurFlightTask,()=>{
|
if (!isCurFlightTask.value){
|
currentDronePosition.remove(); // 从地图上移除标记
|
currentDronePosition = null; // 清空引用，避免内存泄漏或误操作
|
}
|
})
|
|
const removeMap = () => {}
|
|
function mapReset() {
|
map.invalidateSize()
|
flyBounds()
|
}
|
|
defineExpose({ mapReset })
|
|
onBeforeUnmount(() => {
|
removeMap()
|
})
|
|
onMounted(() => {
|
nextTick(() => {
|
initMap()
|
})
|
})
|
</script>
|
<style scoped lang="scss">
|
.realTimeMap {
|
position: relative;
|
z-index: 1;
|
width: 100%;
|
height: 100%;
|
|
#currentTaskMap {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
