fix: 地图显示功能优化，新增历史轨迹展示页面。
This commit is contained in:
tianyongbao
@@ -7,3 +7,12 @@ export function getLastData() {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取设备历史轨迹
|
||||
export function getDeviceTrajectory(deviceId, params) {
|
||||
return request({
|
||||
url: `/tdengine/td/trajectory/${deviceId}`,
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ import usePermissionStore from '@/store/modules/permission'
|
||||
|
||||
NProgress.configure({ showSpinner: false })
|
||||
|
||||
const whiteList = ['/login', '/register', '/redirectTo', '/bdsLocation']
|
||||
const whiteList = ['/login', '/register', '/redirectTo', '/bdsLocation', '/trajectory', '/allTrajectories']
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start()
|
||||
|
||||
@@ -107,6 +107,18 @@ export const constantRoutes = [
|
||||
component: () => import('@/views/mapTest/index.vue'),
|
||||
hidden: true,
|
||||
meta: { title: '北斗上位机实时显示位置' }
|
||||
},
|
||||
{
|
||||
path: '/trajectory',
|
||||
component: () => import('@/views/mapTest/trajectory.vue'),
|
||||
hidden: true,
|
||||
meta: { title: '设备历史轨迹' }
|
||||
},
|
||||
{
|
||||
path: '/allTrajectories',
|
||||
component: () => import('@/views/mapTest/allTrajectories.vue'),
|
||||
hidden: true,
|
||||
meta: { title: '所有设备历史轨迹' }
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
1121
src/views/mapTest/allTrajectories.vue
Normal file
1121
src/views/mapTest/allTrajectories.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -5,13 +5,17 @@
|
||||
<h3>地图信息</h3>
|
||||
<p>总点位数: {{ points.length }}</p>
|
||||
<p>当前缩放级别: {{ currentZoom }}</p>
|
||||
<div class="legend">
|
||||
<el-button type="primary" @click="viewAllTrajectories" style="width: 100%; margin-top: 10px;">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
查看历史轨迹
|
||||
</el-button>
|
||||
<!-- <div class="legend">
|
||||
<h4>图例</h4>
|
||||
<div class="legend-item">
|
||||
<span class="dot"></span>
|
||||
<span>设备点位</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 隐藏的SVG定义 -->
|
||||
<svg width="0" height="0" style="position: absolute;">
|
||||
@@ -25,58 +29,51 @@
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- 点位信息弹出框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
title="位置详情"
|
||||
width="400px"
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
<div class="point-info">
|
||||
<div class="info-row">
|
||||
<span class="label">编号:</span>
|
||||
<span class="value">{{ selectedPoint.id }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">上报时间:</span>
|
||||
<span class="value">{{ selectedPoint.reportTime }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">经度:</span>
|
||||
<span class="value">{{ selectedPoint.longitude }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">纬度:</span>
|
||||
<span class="value">{{ selectedPoint.latitude }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="MapTest">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { initMap, initLayer, addImage } from '@/utils/map'
|
||||
import { mapConfig, layerUrl, imageArr } from '@/config/map'
|
||||
import { PointLayer, Marker } from '@antv/l7'
|
||||
import { PointLayer, Marker, Popup } from '@antv/l7'
|
||||
import { getLastData } from '@/api/td/tdEngine'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { TrendCharts } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const scene = ref(null)
|
||||
const pointLayer = ref(null)
|
||||
const currentZoom = ref(13)
|
||||
const points = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const selectedPoint = ref({
|
||||
id: '',
|
||||
reportTime: '',
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
})
|
||||
const loading = ref(false)
|
||||
const currentPopup = ref(null) // 存储当前显示的弹窗
|
||||
const popupTimer = ref(null) // 存储弹窗定时器
|
||||
let refreshTimer = null // 定时刷新定时器
|
||||
|
||||
// 查看历史轨迹(直接跳转)
|
||||
const viewTrajectory = (deviceId) => {
|
||||
if (!deviceId) {
|
||||
ElMessage.warning('设备ID无效')
|
||||
return
|
||||
}
|
||||
|
||||
router.push({
|
||||
path: '/trajectory',
|
||||
query: {
|
||||
deviceId: deviceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 查看所有设备历史轨迹
|
||||
const viewAllTrajectories = () => {
|
||||
router.push({
|
||||
path: '/allTrajectories'
|
||||
})
|
||||
}
|
||||
|
||||
// 从接口获取设备数据
|
||||
const fetchDeviceData = async () => {
|
||||
loading.value = true
|
||||
@@ -103,7 +100,6 @@ const fetchDeviceData = async () => {
|
||||
})
|
||||
|
||||
points.value = devicePoints
|
||||
console.log('从接口获取到', points.value.length, '个设备点位')
|
||||
|
||||
// 如果已经有图层，更新图层数据；否则创建新图层
|
||||
if (scene.value) {
|
||||
@@ -126,20 +122,50 @@ const initializeMap = async () => {
|
||||
// 从接口获取设备数据
|
||||
await fetchDeviceData()
|
||||
|
||||
// 如果有数据,使用第一个设备的经纬度作为地图中心
|
||||
// 计算所有设备的居中位置
|
||||
let mapCenter = mapConfig.center
|
||||
let mapZoom = mapConfig.zoom
|
||||
|
||||
if (points.value.length > 0) {
|
||||
const firstPoint = points.value[0]
|
||||
mapCenter = [firstPoint.longitude, firstPoint.latitude]
|
||||
console.log('地图中心设置为:', mapCenter)
|
||||
const lngs = points.value.map(p => p.longitude)
|
||||
const lats = points.value.map(p => p.latitude)
|
||||
|
||||
const minLng = Math.min(...lngs)
|
||||
const maxLng = Math.max(...lngs)
|
||||
const minLat = Math.min(...lats)
|
||||
const maxLat = Math.max(...lats)
|
||||
|
||||
// 计算中心点
|
||||
const centerLng = (minLng + maxLng) / 2
|
||||
const centerLat = (minLat + maxLat) / 2
|
||||
mapCenter = [centerLng, centerLat]
|
||||
|
||||
// 根据边界范围计算合适的缩放级别
|
||||
const lngRange = maxLng - minLng
|
||||
const latRange = maxLat - minLat
|
||||
const maxRange = Math.max(lngRange, latRange)
|
||||
|
||||
if (maxRange > 1) {
|
||||
mapZoom = 10
|
||||
} else if (maxRange > 0.5) {
|
||||
mapZoom = 11
|
||||
} else if (maxRange > 0.1) {
|
||||
mapZoom = 12
|
||||
} else if (maxRange > 0.01) {
|
||||
mapZoom = 14
|
||||
} else {
|
||||
mapZoom = 15
|
||||
}
|
||||
}
|
||||
|
||||
// 创建地图场景,使用动态中心点
|
||||
// 创建地图场景,使用动态中心点和缩放级别
|
||||
const mapScene = await initMap('mapContainer', {
|
||||
...mapConfig,
|
||||
center: mapCenter
|
||||
center: mapCenter,
|
||||
zoom: mapZoom
|
||||
})
|
||||
scene.value = mapScene
|
||||
currentZoom.value = mapZoom
|
||||
|
||||
// 添加图层
|
||||
initLayer(mapScene, layerUrl)
|
||||
@@ -160,8 +186,6 @@ const initializeMap = async () => {
|
||||
mapScene.on('zoom', () => {
|
||||
currentZoom.value = Math.round(mapScene.getZoom())
|
||||
})
|
||||
|
||||
console.log('地图初始化成功，已添加', points.value.length, '个点位')
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error)
|
||||
ElMessage.error('地图初始化失败')
|
||||
@@ -172,6 +196,7 @@ const initializeMap = async () => {
|
||||
const create3DMarkerElement = (point) => {
|
||||
const element = document.createElement('div')
|
||||
element.className = 'marker-3d'
|
||||
element.style.cursor = 'pointer' // 固定光标样式
|
||||
element.innerHTML = `
|
||||
<div class="marker-container">
|
||||
<div class="pulse-ring"></div>
|
||||
@@ -188,15 +213,89 @@ const create3DMarkerElement = (point) => {
|
||||
</div>
|
||||
`
|
||||
|
||||
// 添加点击事件
|
||||
element.addEventListener('click', () => {
|
||||
selectedPoint.value = {
|
||||
id: point.id,
|
||||
reportTime: point.reportTime,
|
||||
longitude: point.longitude.toFixed(6),
|
||||
latitude: point.latitude.toFixed(6)
|
||||
// 鼠标悬停显示信息
|
||||
element.addEventListener('mouseenter', () => {
|
||||
// 清除可能存在的隐藏定时器
|
||||
if (popupTimer.value) {
|
||||
clearTimeout(popupTimer.value)
|
||||
popupTimer.value = null
|
||||
}
|
||||
dialogVisible.value = true
|
||||
|
||||
// 先移除之前的弹窗
|
||||
if (currentPopup.value) {
|
||||
currentPopup.value.remove()
|
||||
currentPopup.value = null
|
||||
}
|
||||
|
||||
const popup = new Popup({
|
||||
offsets: [150, -50], // 向右150px，向上50px，明显偏向右上角
|
||||
closeButton: false,
|
||||
closeOnClick: false
|
||||
})
|
||||
.setLnglat([point.longitude, point.latitude])
|
||||
.setHTML(`
|
||||
<div class="trajectory-tooltip">
|
||||
<div class="tooltip-header">
|
||||
<div class="header-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="12" cy="12" r="3" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header-title">设备信息</div>
|
||||
</div>
|
||||
<div class="tooltip-content">
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9 3v18M15 3v18M3 9h18M3 15h18" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<span class="label">编号</span>
|
||||
<span class="value">${point.id}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">时间</span>
|
||||
<span class="value">${point.reportTime}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">经度</span>
|
||||
<span class="value">${point.longitude.toFixed(6)}°</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">纬度</span>
|
||||
<span class="value">${point.latitude.toFixed(6)}°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
scene.value.addPopup(popup)
|
||||
currentPopup.value = popup
|
||||
})
|
||||
|
||||
// 鼠标离开时延迟关闭，防止快速进出导致闪烁
|
||||
element.addEventListener('mouseleave', () => {
|
||||
// 延迟300ms关闭，如果在这期间鼠标又进入，则不关闭
|
||||
popupTimer.value = setTimeout(() => {
|
||||
if (currentPopup.value) {
|
||||
currentPopup.value.remove()
|
||||
currentPopup.value = null
|
||||
}
|
||||
}, 300)
|
||||
})
|
||||
|
||||
// 点击跳转到历史轨迹页面
|
||||
element.addEventListener('click', () => {
|
||||
viewTrajectory(point.id)
|
||||
})
|
||||
|
||||
return element
|
||||
@@ -274,17 +373,10 @@ const updatePointLayer = () => {
|
||||
// 更新点击事件数据
|
||||
const element = marker.getElement()
|
||||
element.onclick = () => {
|
||||
selectedPoint.value = {
|
||||
id: newPoint.id,
|
||||
reportTime: newPoint.reportTime,
|
||||
longitude: newPoint.longitude.toFixed(6),
|
||||
latitude: newPoint.latitude.toFixed(6)
|
||||
}
|
||||
dialogVisible.value = true
|
||||
viewTrajectory(newPoint.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('已无感更新', newPoints.length, '个点位位置')
|
||||
} else {
|
||||
// 点位数量变化时才完全重建
|
||||
rebuildPointLayer()
|
||||
@@ -313,7 +405,6 @@ const rebuildPointLayer = () => {
|
||||
|
||||
// 重新创建图层
|
||||
createPointLayer()
|
||||
console.log('点位数量变化,已重建图层')
|
||||
}
|
||||
|
||||
// 启动定时刷新
|
||||
@@ -325,11 +416,8 @@ const startAutoRefresh = () => {
|
||||
|
||||
// 每10秒刷新一次数据
|
||||
refreshTimer = setInterval(() => {
|
||||
console.log('定时刷新设备数据...')
|
||||
fetchDeviceData()
|
||||
}, 10000)
|
||||
|
||||
console.log('已启动自动刷新，每10秒更新一次')
|
||||
}
|
||||
|
||||
// 停止定时刷新
|
||||
@@ -337,7 +425,18 @@ const stopAutoRefresh = () => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
console.log('已停止自动刷新')
|
||||
}
|
||||
}
|
||||
|
||||
// 清理弹窗和定时器
|
||||
const cleanupPopup = () => {
|
||||
if (popupTimer.value) {
|
||||
clearTimeout(popupTimer.value)
|
||||
popupTimer.value = null
|
||||
}
|
||||
if (currentPopup.value) {
|
||||
currentPopup.value.remove()
|
||||
currentPopup.value = null
|
||||
}
|
||||
}
|
||||
|
||||
@@ -349,20 +448,37 @@ onBeforeUnmount(() => {
|
||||
// 停止定时刷新
|
||||
stopAutoRefresh()
|
||||
|
||||
// 清理弹窗
|
||||
cleanupPopup()
|
||||
|
||||
// 清理图层和markers
|
||||
if (pointLayer.value) {
|
||||
// 清理markers
|
||||
if (pointLayer.value.markers) {
|
||||
pointLayer.value.markers.forEach(marker => {
|
||||
marker.remove() // 使用marker.remove()方法移除标记
|
||||
try {
|
||||
marker.remove()
|
||||
} catch (e) {
|
||||
console.warn('Marker remove error:', e)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 清理图层
|
||||
if (pointLayer.value.pulseLayer) {
|
||||
scene.value?.removeLayer(pointLayer.value.pulseLayer)
|
||||
if (pointLayer.value.pulseLayer && scene.value) {
|
||||
try {
|
||||
scene.value.removeLayer(pointLayer.value.pulseLayer)
|
||||
} catch (e) {
|
||||
console.warn('Layer remove error:', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 销毁地图实例
|
||||
if (scene.value) {
|
||||
scene.value.destroy()
|
||||
try {
|
||||
scene.value.destroy()
|
||||
scene.value = null
|
||||
} catch (e) {
|
||||
console.warn('Scene destroy error:', e)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -388,6 +504,7 @@ onBeforeUnmount(() => {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
min-width: 220px;
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 100; // 确保信息面板显示在地图之上
|
||||
|
||||
h3 {
|
||||
margin: 0 0 15px 0;
|
||||
@@ -460,8 +577,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.marker-container {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 48px;
|
||||
width: 32px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -472,8 +589,8 @@ onBeforeUnmount(() => {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #5B8FF9;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
@@ -485,8 +602,8 @@ onBeforeUnmount(() => {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(91, 143, 249, 0.4) 0%, transparent 70%);
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
@@ -494,8 +611,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
.marker-pin {
|
||||
position: relative;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: rotate(-45deg);
|
||||
background: linear-gradient(135deg, #5B8FF9 0%, #7BA3FF 100%);
|
||||
@@ -538,8 +655,8 @@ onBeforeUnmount(() => {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
@@ -548,8 +665,8 @@ onBeforeUnmount(() => {
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: shadow-pulse 3s ease-in-out infinite;
|
||||
@@ -560,8 +677,8 @@ onBeforeUnmount(() => {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid #5B8FF9;
|
||||
border-radius: 50%;
|
||||
opacity: 0.4;
|
||||
@@ -644,115 +761,95 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 点位信息弹出框样式
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
// 自定义 L7 Popup 样式
|
||||
:deep(.l7-popup) {
|
||||
pointer-events: none !important;
|
||||
|
||||
.el-dialog__header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 24px 30px;
|
||||
margin: 0;
|
||||
border-bottom: none;
|
||||
|
||||
.el-dialog__title {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 24px;
|
||||
right: 30px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.el-dialog__close {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.l7-popup-content {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 32px 30px;
|
||||
background: #fff;
|
||||
.l7-popup-tip {
|
||||
border-top-color: #667eea;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.point-info {
|
||||
.info-row {
|
||||
// 确保tooltip内容也不阻挡
|
||||
:deep(.trajectory-tooltip) {
|
||||
pointer-events: none !important;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
min-width: 280px;
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.tooltip-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
padding: 16px 18px;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #667eea;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(90deg, rgba(102, 126, 234, 0.08) 0%, transparent 100%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||
border-left-color: #764ba2;
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
min-width: 95px;
|
||||
font-size: 14px;
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
margin-left: 4px;
|
||||
color: #667eea;
|
||||
svg {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #212529;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
letter-spacing: 0.3px;
|
||||
.header-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
padding: 14px 16px;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
min-width: 45px;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
737
src/views/mapTest/trajectory.vue
Normal file
737
src/views/mapTest/trajectory.vue
Normal file
@@ -0,0 +1,737 @@
|
||||
<template>
|
||||
<div class="trajectory-container">
|
||||
<div class="header-bar">
|
||||
<el-button @click="goBack" icon="ArrowLeft">返回</el-button>
|
||||
<h2>历史轨迹 - {{ deviceId }}</h2>
|
||||
<div class="time-selector">
|
||||
<div class="sample-count-input">
|
||||
<label>采样数:</label>
|
||||
<el-input-number
|
||||
v-model="sampleCount"
|
||||
:min="1"
|
||||
:max="500"
|
||||
:step="50"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
placeholder="采样数"
|
||||
style="width: 150px;"
|
||||
@change="fetchTrajectory"
|
||||
/>
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="handleTimeChange"
|
||||
@visible-change="handlePickerVisibleChange"
|
||||
/>
|
||||
<el-button type="primary" @click="fetchTrajectory" :loading="loading">
|
||||
<el-icon><Search /></el-icon>
|
||||
查询轨迹
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="trajectoryMap" class="trajectory-map" v-loading="loading" element-loading-text="加载轨迹数据中..."></div>
|
||||
|
||||
<div class="info-panel">
|
||||
<h3>轨迹信息</h3>
|
||||
<p>轨迹点数: {{ trajectoryPoints.length }}</p>
|
||||
<p>当前缩放级别: {{ currentZoom }}</p>
|
||||
<p v-if="trajectoryPoints.length > 0">起点时间: {{ trajectoryPoints[0]?.time }}</p>
|
||||
<p v-if="trajectoryPoints.length > 0">终点时间: {{ trajectoryPoints[trajectoryPoints.length - 1]?.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Trajectory">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { initMap, initLayer, addImage } from '@/utils/map'
|
||||
import { mapConfig, layerUrl, imageArr } from '@/config/map'
|
||||
import { PointLayer, LineLayer, Marker, Popup } from '@antv/l7'
|
||||
import { getDeviceTrajectory } from '@/api/td/tdEngine'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft, Search } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const scene = ref(null)
|
||||
const trajectoryLayer = ref(null)
|
||||
const deviceId = ref('')
|
||||
const timeRange = ref([])
|
||||
const trajectoryPoints = ref([])
|
||||
const loading = ref(false)
|
||||
const currentZoom = ref(16)
|
||||
const currentPopup = ref(null) // 存储当前显示的弹窗
|
||||
const popupTimer = ref(null) // 存储弹窗定时器
|
||||
const isDatePickerOpen = ref(false) // 日期选择器是否打开
|
||||
const sampleCount = ref(100) // 采样数，默认10
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 时间范围改变
|
||||
const handleTimeChange = (val) => {
|
||||
console.log('时间范围:', val)
|
||||
}
|
||||
|
||||
// 日期选择器可见性改变
|
||||
const handlePickerVisibleChange = (visible) => {
|
||||
isDatePickerOpen.value = visible
|
||||
// 当日期选择器打开时，禁用地图交互
|
||||
if (scene.value) {
|
||||
if (visible) {
|
||||
scene.value.setMapStatus({ dragEnable: false, keyboardEnable: false, doubleClickZoom: false, scrollZoom: false })
|
||||
} else {
|
||||
scene.value.setMapStatus({ dragEnable: true, keyboardEnable: true, doubleClickZoom: true, scrollZoom: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取轨迹数据
|
||||
const fetchTrajectory = async () => {
|
||||
if (!deviceId.value) {
|
||||
ElMessage.warning('设备ID不能为空')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
sampleCount: sampleCount.value
|
||||
}
|
||||
|
||||
if (timeRange.value && timeRange.value.length === 2) {
|
||||
params.startTime = timeRange.value[0]
|
||||
params.endTime = timeRange.value[1]
|
||||
}
|
||||
|
||||
const response = await getDeviceTrajectory(deviceId.value, params)
|
||||
|
||||
// 处理响应数据，后端返回格式为 { code, msg, data }
|
||||
const trajectoryData = response.data || response
|
||||
|
||||
if (trajectoryData && trajectoryData.length > 0) {
|
||||
trajectoryPoints.value = trajectoryData.map(item => ({
|
||||
longitude: item.longitude,
|
||||
latitude: item.latitude,
|
||||
time: item.time || item.createTime,
|
||||
deviceId: item.deviceId
|
||||
}))
|
||||
|
||||
// 按时间排序，确保轨迹线是按时间顺序连接的
|
||||
trajectoryPoints.value.sort((a, b) => {
|
||||
return new Date(a.time).getTime() - new Date(b.time).getTime()
|
||||
})
|
||||
|
||||
drawTrajectory()
|
||||
} else {
|
||||
ElMessage.warning('暂无轨迹数据')
|
||||
trajectoryPoints.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取轨迹失败:', error)
|
||||
ElMessage.error('获取轨迹数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
const initializeMap = async () => {
|
||||
try {
|
||||
// 创建地图场景
|
||||
const mapScene = await initMap('trajectoryMap', mapConfig)
|
||||
scene.value = mapScene
|
||||
|
||||
// 添加图层
|
||||
initLayer(mapScene, layerUrl)
|
||||
|
||||
// 添加图片资源
|
||||
addImage(mapScene, imageArr)
|
||||
|
||||
// 监听缩放事件
|
||||
mapScene.on('zoom', () => {
|
||||
currentZoom.value = Math.round(mapScene.getZoom())
|
||||
})
|
||||
|
||||
return mapScene
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error)
|
||||
ElMessage.error('地图初始化失败')
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制轨迹
|
||||
const drawTrajectory = () => {
|
||||
if (!scene.value || trajectoryPoints.value.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// 清除旧轨迹
|
||||
if (trajectoryLayer.value) {
|
||||
try {
|
||||
if (trajectoryLayer.value.lineLayer) {
|
||||
scene.value.removeLayer(trajectoryLayer.value.lineLayer)
|
||||
}
|
||||
if (trajectoryLayer.value.pointLayer) {
|
||||
scene.value.removeLayer(trajectoryLayer.value.pointLayer)
|
||||
}
|
||||
if (trajectoryLayer.value.startMarker) {
|
||||
trajectoryLayer.value.startMarker.remove()
|
||||
}
|
||||
if (trajectoryLayer.value.endMarker) {
|
||||
trajectoryLayer.value.endMarker.remove()
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('清除旧轨迹失败:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 直接绘制，不再使用事件监听
|
||||
try {
|
||||
// 构建轨迹线数据
|
||||
const lineData = {
|
||||
type: 'FeatureCollection',
|
||||
features: [{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'LineString',
|
||||
coordinates: trajectoryPoints.value.map(p => [p.longitude, p.latitude])
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
// 创建轨迹线图层 - 增强显示效果
|
||||
const lineLayer = new LineLayer({
|
||||
name: 'trajectoryLine',
|
||||
zIndex: 101
|
||||
})
|
||||
.source(lineData)
|
||||
.size(5) // 增加线宽
|
||||
.shape('line')
|
||||
.color('#1890FF') // 使用更鲜艳的蓝色
|
||||
.style({
|
||||
lineType: 'solid',
|
||||
opacity: 0.9 // 增加不透明度
|
||||
})
|
||||
|
||||
scene.value.addLayer(lineLayer)
|
||||
|
||||
// 创建轨迹点图层
|
||||
const pointLayer = new PointLayer({
|
||||
name: 'trajectoryPoints',
|
||||
zIndex: 102
|
||||
})
|
||||
.source(trajectoryPoints.value.map((point, index) => ({
|
||||
...point,
|
||||
index: index + 1 // 添加序号，从1开始
|
||||
})), {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude'
|
||||
}
|
||||
})
|
||||
.shape('circle')
|
||||
.size(8) // 稍微增大点的大小
|
||||
.color('#FF6B6B')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
strokeWidth: 2,
|
||||
stroke: '#fff'
|
||||
})
|
||||
|
||||
// 添加鼠标悬停事件，显示详细信息
|
||||
pointLayer.on('mousemove', (e) => {
|
||||
const feature = e.feature
|
||||
if (feature) {
|
||||
// 先关闭之前的弹窗
|
||||
if (currentPopup.value) {
|
||||
currentPopup.value.remove()
|
||||
}
|
||||
|
||||
const popup = new Popup({
|
||||
offsets: [0, -15],
|
||||
closeButton: false
|
||||
})
|
||||
.setLnglat([feature.longitude, feature.latitude])
|
||||
.setHTML(`
|
||||
<div class="trajectory-tooltip">
|
||||
<div class="tooltip-header">
|
||||
<div class="header-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="12" cy="12" r="3" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header-title">轨迹点 #${feature.index}</div>
|
||||
</div>
|
||||
<div class="tooltip-content">
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">时间</span>
|
||||
<span class="value">${feature.time}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">经度</span>
|
||||
<span class="value">${feature.longitude.toFixed(6)}°</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">纬度</span>
|
||||
<span class="value">${feature.latitude.toFixed(6)}°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
scene.value.addPopup(popup)
|
||||
currentPopup.value = popup
|
||||
}
|
||||
})
|
||||
|
||||
// 鼠标移出时关闭弹窗
|
||||
pointLayer.on('mouseout', () => {
|
||||
if (currentPopup.value) {
|
||||
currentPopup.value.remove()
|
||||
currentPopup.value = null
|
||||
}
|
||||
})
|
||||
|
||||
// 鼠标移入时改变光标样式
|
||||
pointLayer.on('mouseenter', () => {
|
||||
document.body.style.cursor = 'pointer'
|
||||
})
|
||||
|
||||
pointLayer.on('mouseleave', () => {
|
||||
document.body.style.cursor = ''
|
||||
})
|
||||
|
||||
scene.value.addLayer(pointLayer)
|
||||
|
||||
// 创建起点标记
|
||||
const startPoint = trajectoryPoints.value[0]
|
||||
const startMarker = createMarker(startPoint, '起点', '#52C41A', true)
|
||||
scene.value.addMarker(startMarker)
|
||||
|
||||
// 创建终点标记
|
||||
const endPoint = trajectoryPoints.value[trajectoryPoints.value.length - 1]
|
||||
const endMarker = createMarker(endPoint, '终点', '#FF4D4F', false)
|
||||
scene.value.addMarker(endMarker)
|
||||
|
||||
trajectoryLayer.value = { lineLayer, pointLayer, startMarker, endMarker }
|
||||
|
||||
// 调整地图视野到轨迹范围
|
||||
fitBounds()
|
||||
} catch (error) {
|
||||
console.error('绘制轨迹失败:', error)
|
||||
ElMessage.error('绘制轨迹失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 创建标记点
|
||||
const createMarker = (point, label, color, isStart = true) => {
|
||||
const el = document.createElement('div')
|
||||
el.className = 'trajectory-marker'
|
||||
el.style.cursor = 'pointer' // 直接设置为pointer，不再动态切换
|
||||
el.innerHTML = `
|
||||
<div class="marker-content" style="background: ${color};">
|
||||
<span>${label}</span>
|
||||
</div>
|
||||
`
|
||||
|
||||
// 添加鼠标悬停事件
|
||||
el.addEventListener('mouseenter', () => {
|
||||
// 清除可能存在的隐藏定时器
|
||||
if (popupTimer.value) {
|
||||
clearTimeout(popupTimer.value)
|
||||
popupTimer.value = null
|
||||
}
|
||||
|
||||
// 如果已有弹窗，直接返回，不重复创建
|
||||
if (currentPopup.value) {
|
||||
return
|
||||
}
|
||||
|
||||
const popup = new Popup({
|
||||
offsets: [0, -45],
|
||||
closeButton: false,
|
||||
closeOnClick: false
|
||||
})
|
||||
.setLnglat([point.longitude, point.latitude])
|
||||
.setHTML(`
|
||||
<div class="trajectory-tooltip">
|
||||
<div class="tooltip-header">
|
||||
<div class="header-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 8l4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="header-title">${isStart ? '起点' : '终点'}</div>
|
||||
</div>
|
||||
<div class="tooltip-content">
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">时间</span>
|
||||
<span class="value">${point.time}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">经度</span>
|
||||
<span class="value">${point.longitude.toFixed(6)}°</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2v20M2 12h20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span class="label">纬度</span>
|
||||
<span class="value">${point.latitude.toFixed(6)}°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
scene.value.addPopup(popup)
|
||||
currentPopup.value = popup
|
||||
})
|
||||
|
||||
// 鼠标离开时延迟关闭，防止快速进出导致闪烁
|
||||
el.addEventListener('mouseleave', () => {
|
||||
// 延迟300ms关闭，如果在这期间鼠标又进入，则不关闭
|
||||
popupTimer.value = setTimeout(() => {
|
||||
if (currentPopup.value) {
|
||||
currentPopup.value.remove()
|
||||
currentPopup.value = null
|
||||
}
|
||||
}, 300)
|
||||
})
|
||||
|
||||
return new Marker({
|
||||
element: el,
|
||||
anchor: 'center'
|
||||
}).setLnglat([point.longitude, point.latitude])
|
||||
}
|
||||
|
||||
// 调整地图视野
|
||||
const fitBounds = () => {
|
||||
if (!scene.value || trajectoryPoints.value.length === 0) return
|
||||
|
||||
const lngs = trajectoryPoints.value.map(p => p.longitude)
|
||||
const lats = trajectoryPoints.value.map(p => p.latitude)
|
||||
|
||||
const minLng = Math.min(...lngs)
|
||||
const maxLng = Math.max(...lngs)
|
||||
const minLat = Math.min(...lats)
|
||||
const maxLat = Math.max(...lats)
|
||||
|
||||
const centerLng = (minLng + maxLng) / 2
|
||||
const centerLat = (minLat + maxLat) / 2
|
||||
|
||||
scene.value.setCenter([centerLng, centerLat])
|
||||
scene.value.setZoom(16) // 增大默认缩放级别
|
||||
currentZoom.value = 16
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
deviceId.value = route.query.deviceId || ''
|
||||
|
||||
if (!deviceId.value) {
|
||||
ElMessage.error('设备ID不能为空')
|
||||
router.back()
|
||||
return
|
||||
}
|
||||
|
||||
// 设置默认时间范围为最近24小时
|
||||
const now = new Date()
|
||||
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||
|
||||
const formatDateTime = (date) => {
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
timeRange.value = [
|
||||
formatDateTime(yesterday),
|
||||
formatDateTime(now)
|
||||
]
|
||||
|
||||
initializeMap().then(() => {
|
||||
fetchTrajectory()
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 清理轨迹图层
|
||||
if (trajectoryLayer.value && scene.value) {
|
||||
try {
|
||||
if (trajectoryLayer.value.lineLayer) {
|
||||
scene.value.removeLayer(trajectoryLayer.value.lineLayer)
|
||||
}
|
||||
if (trajectoryLayer.value.pointLayer) {
|
||||
scene.value.removeLayer(trajectoryLayer.value.pointLayer)
|
||||
}
|
||||
if (trajectoryLayer.value.startMarker) {
|
||||
trajectoryLayer.value.startMarker.remove()
|
||||
}
|
||||
if (trajectoryLayer.value.endMarker) {
|
||||
trajectoryLayer.value.endMarker.remove()
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Layer cleanup error:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// 销毁地图实例
|
||||
if (scene.value) {
|
||||
try {
|
||||
scene.value.destroy()
|
||||
scene.value = null
|
||||
} catch (e) {
|
||||
console.warn('Scene destroy error:', e)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.trajectory-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000; // 提高z-index，确保日期选择器下拉面板在最上层
|
||||
gap: 20px;
|
||||
position: relative; // 添加定位
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.time-selector {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
transform: translateX(-300px); // 整体向左平移400px
|
||||
|
||||
.sample-count-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trajectory-map {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
min-width: 220px;
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 100; // 确保信息面板显示在地图之上
|
||||
|
||||
h3 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #5B8FF9;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
|
||||
&:first-of-type {
|
||||
font-weight: bold;
|
||||
color: #5B8FF9;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.trajectory-marker) {
|
||||
.marker-content {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.trajectory-tooltip) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
min-width: 260px;
|
||||
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
|
||||
.tooltip-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
padding: 14px 16px;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义 L7 Popup 样式
|
||||
:deep(.l7-popup) {
|
||||
pointer-events: none !important; // 弹窗不阻挡鼠标事件
|
||||
|
||||
.l7-popup-content {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
pointer-events: none !important; // 内容也不响应鼠标事件，避免阻挡
|
||||
}
|
||||
|
||||
.l7-popup-tip {
|
||||
border-top-color: #667eea;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 确保tooltip内容也不阻挡
|
||||
:deep(.trajectory-tooltip) {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
// 确保Element Plus日期选择器面板在最上层
|
||||
:deep(.el-picker-panel) {
|
||||
z-index: 9999 !important;
|
||||
transform: translate3d(0, 0, 0) !important; // 开启硬件加速
|
||||
backface-visibility: hidden !important; // 防止闪烁
|
||||
will-change: transform !important; // 优化渲染性能
|
||||
}
|
||||
|
||||
:deep(.el-popper) {
|
||||
z-index: 9999 !important;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
backface-visibility: hidden !important;
|
||||
will-change: transform !important;
|
||||
}
|
||||
|
||||
// 时间选择列表也需要优化
|
||||
:deep(.el-time-panel) {
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
backface-visibility: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.el-picker-panel__content) {
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
backface-visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user