From bdbef0fbde20317d19bfc6d3473dabb10fb3fb3b Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 19 Apr 2025 15:41:21 +0800
Subject: [PATCH] feat: 修改任务事件概况的饼状图颜色
---
src/components/CurrentTaskDetails/RealTimeMap.vue | 133 ++++++++++++++++----------------------------
1 files changed, 49 insertions(+), 84 deletions(-)
diff --git a/src/components/CurrentTaskDetails/RealTimeMap.vue b/src/components/CurrentTaskDetails/RealTimeMap.vue
index 4a63684..207d811 100644
--- a/src/components/CurrentTaskDetails/RealTimeMap.vue
+++ b/src/components/CurrentTaskDetails/RealTimeMap.vue
@@ -5,15 +5,10 @@
import * as Cesium from 'cesium'
import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
import { Cartesian3, Terrain, Viewer } from 'cesium'
-import endPointImg from '@/assets/images/EndPointicon.png'
-import startPointImg from '@/assets/images/Startingpointicon.png'
import { addBlueFilter } from '@/utils/cesium/common'
-import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
-import rwqfdImg from '@/assets/images/signMachineNest/rwqfd.png'
-import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
-import lineImg from '@/assets/images/arrow-right-blue.png'
-import { flyVisual } from '@/utils/cesium/mapUtil'
import CreateFrustum from '@/utils/cesium/frustum/CreateFrustum'
+import aircraftGltf from '@/assets/gltf/aircraft.gltf'
+import { useTaskWayline } from '@/hooks/useTaskWayline/useTaskWayline'
const imageryProvider_ammapSL = new Cesium.UrlTemplateImageryProvider({
url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
@@ -26,12 +21,14 @@
tilingScheme: new AmapMercatorTilingScheme(),
credit: 'amap_SL',
})
-let viewer = null
+
+const taskDetailsViewer = inject('taskDetailsViewer')
+
const taskDetails = inject('taskDetails')
const deviceOsdInfo = inject('deviceOsdInfo')
const initMap = () => {
- viewer = new Viewer('currentTaskMap', {
+ taskDetailsViewer.value = new Viewer('currentTaskMap', {
terrain: Terrain.fromWorldTerrain(),
infoBox: false, // 禁用沙箱，解决控制台报错
animation: false, // 左下角的动画仪表盘
@@ -45,92 +42,35 @@
baseLayer: false,
fullscreenButton: false,
})
- const gdLayer = viewer.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
+ const gdLayer = taskDetailsViewer?.value.imageryLayers.addImageryProvider(imageryProvider_ammapSL)
const options = {
bInvertColor: true,
bFilterColor: true,
filterColor: '#4e70a6',
}
// 添加蓝色滤镜
- addBlueFilter(options, viewer, gdLayer)
- viewer.scene.morphTo2D(0)
+ addBlueFilter(options, taskDetailsViewer?.value, gdLayer)
+ taskDetailsViewer?.value.scene.morphTo2D(0)
//设置默认点
- viewer.camera.setView({
+ taskDetailsViewer?.value.camera.setView({
destination: Cartesian3.fromDegrees(115.763819, 28.787374, 5000),
})
-}
-
-const drawWayline = lineObj => {
- const positions = lineObj.Placemark.map(item => {
- const [lon, lat] = item.Point.coordinates.split(',')
- return Cartesian3.fromDegrees(Number(lon), Number(lat))
- })
- // 起点
- viewer.entities.add({
- position: positions[0],
- billboard: {
- image: new Cesium.ConstantProperty(rwqfdImg),
- width: 70,
- height: 70,
- },
- })
- // 终点
- viewer.entities.add({
- position: positions[positions.length - 1],
- billboard: {
- image: new Cesium.ConstantProperty(endPointImg),
- width: 30,
- height: 30,
- verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 底部对齐
- },
- })
- // 路径线
- viewer.entities.add({
- polyline: {
- width: 4,
- positions: positions,
- material: new ImageTrailMaterial({
- color: { alpha: 1, blue: 1, green: 1, red: 1 },
- speed: 20,
- image: lineImg,
- repeat: { x: Math.floor(40), y: 1 },
- }),
- clampToGround: false,
- },
- })
-}
-
-// 解析kmz文件
-const parsingFiles = async url => {
- const res = await analyzeKmzFile(`${url}?_t=${new Date().getTime()}`)
- const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
- const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document']
- const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
- if (!waylinesXMLObj.Placemark.length) return
- const allPoint = waylinesXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
- flyVisual(allPoint, viewer)
- drawWayline(waylinesXMLObj)
-}
-
-const removeMap = () => {
- viewer.entities.removeAll()
- viewer.destroy()
}
let viewInfoFrustum
// 设置视椎
const setCreateFrustum = () => {
- const deviceInfo = deviceOsdInfo.value?.data?.host
- if (!deviceInfo) return
+ const host = deviceOsdInfo.value?.data?.host
+ if (!host) return
viewInfoFrustum?.clear()
- if ([14, 0].includes(deviceInfo.mode_code)) return
- const attitude_head = 180 + deviceInfo.attitude_head
- const gimbal_pitch = 90 - Number(deviceInfo?.payloads[0]?.gimbal_pitch) || 0
- viewInfoFrustum = new CreateFrustum(viewer, {
+ if ([14, 0].includes(host.mode_code)) return
+ const attitude_head = 180 + host.attitude_head
+ const gimbal_pitch = 90 - Number(host?.payloads[0]?.gimbal_pitch) || 0
+ viewInfoFrustum = new CreateFrustum(taskDetailsViewer?.value, {
position: {
- longitude: deviceInfo.longitude,
- latitude: deviceInfo.latitude,
- altitude: deviceInfo.height,
+ longitude: host.longitude,
+ latitude: host.latitude,
+ altitude: host.height,
},
width: 30,
height: 30,
@@ -143,12 +83,38 @@
})
}
-watch(deviceOsdInfo, setCreateFrustum)
-watch(taskDetails, () => {
- if (taskDetails.value.way_lines.length) {
- parsingFiles(taskDetails.value.way_lines[0].url)
+function setAircraftGltf() {
+ const host = deviceOsdInfo.value?.data?.host
+ const aircraftEntity = taskDetailsViewer.value.entities.getById('aircraftGltf')
+ const position = Cesium.Cartesian3.fromDegrees(host.longitude, host.latitude, host.height)
+ if (aircraftEntity) {
+ aircraftEntity.position = new Cesium.ConstantPositionProperty(position)
+ return
}
+ taskDetailsViewer.value.entities.add({
+ id: 'aircraftGltf',
+ position,
+ model: {
+ uri: aircraftGltf, // 或 .glb
+ scale: 1.0, // 缩放比例
+ minimumPixelSize: 64, // 最小像素尺寸（保证模型远处可见）
+ maximumScale: 128, // 最大缩放（可选）
+ },
+ })
+}
+
+watch(deviceOsdInfo, () => {
+ setCreateFrustum()
+ setAircraftGltf()
})
+
+useTaskWayline(taskDetailsViewer, taskDetails)
+
+const removeMap = () => {
+ taskDetailsViewer?.value.entities.removeAll()
+ taskDetailsViewer?.value.destroy()
+}
+
onBeforeUnmount(() => {
removeMap()
})
@@ -161,7 +127,6 @@
</script>
<style scoped lang="scss">
#currentTaskMap {
-
:deep() {
.cesium-viewer {
width: 100%;
--
Gitblit v1.9.3