From c832bf2e80ac465e71b7a1c1f7a59d4252030989 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 05 Aug 2025 17:33:08 +0800
Subject: [PATCH] feat:事件工单滚动条
---
src/views/job/components/DeviceJobDetailsMap.vue | 100 ++++++++++++++------------------------------------
1 files changed, 28 insertions(+), 72 deletions(-)
diff --git a/src/views/job/components/DeviceJobDetailsMap.vue b/src/views/job/components/DeviceJobDetailsMap.vue
index 22ab5a0..1c6cdb5 100644
--- a/src/views/job/components/DeviceJobDetailsMap.vue
+++ b/src/views/job/components/DeviceJobDetailsMap.vue
@@ -1,90 +1,45 @@
+<!--
+ * @Author : yuan
+ * @Date : 2025-05-26 17:30:33
+ * @LastEditors : yuan
+ * @LastEditTime : 2025-06-10 15:46:18
+ * @FilePath : \src\views\job\components\DeviceJobDetailsMap.vue
+ * @Description :
+ * Copyright 2025 OBKoro1, All Rights Reserved.
+ * 2025-05-26 17:30:33
+-->
<template>
- <div id="deviceJobDetailsMap" class="ztzf-cesium" />
+ <div id="deviceJobDetailsMap" class="ztzf-cesium">
+ <PlanarRouteLineList :curRouteLineData="curRouteLineData" @routeLineListClick="routeLineListClick" />
+ </div>
</template>
<script setup>
-import * as Cesium from 'cesium'
-import { Cartesian3, Terrain, Viewer } from 'cesium'
-import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
-import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial'
-import lineImg from '@/assets/images/task/arrow-right-blue.png'
-// import rwqfdImg from '@/assets/images/task/rwqfd.png'
-import rwqfdImg from '@/assets/map_images/Startingpointicon.png'
-import endPointImg from '@/assets/images/task/EndPointicon.png'
-import { flyVisual } from '@/utils/cesium/mapUtil'
+import PlanarRouteLineList from '@/components/PlanarRouteLineList/PlanarRouteLineList.vue'
+
import { PublicCesium } from '@/utils/cesium/publicCesium'
const props = defineProps(['detailsData'])
+import { useRouteLine } from '@/hooks/useRouteLine/useRouteLine.js'
+
+// 加载航线hook
+const { curRouteLineData, routeLineListClick, initViewer, renderPreviewLine } = useRouteLine()
+
+
let viewer = null
const initMap = () => {
viewer = new PublicCesium({ dom: 'deviceJobDetailsMap' }).getViewer()
-}
-// 渲染线和点
-const renderingLine = (lineObj,startPoint) => {
- const positions = lineObj.Placemark.map(item => {
- const [lon, lat] = item.Point.coordinates.split(',')
- return Cartesian3.fromDegrees(Number(lon), Number(lat))
- })
- // 向前插入起飞点
- positions.unshift(Cartesian3.fromDegrees(startPoint[0], startPoint[1]))
- // 起点
- viewer.entities.add({
- position: positions[0],
- billboard: {
- image: new Cesium.ConstantProperty(rwqfdImg),
- width: 30,
- height: 30,
- },
- })
- // 终点
- 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 analysis = async item => {
- return new Promise(async resolve => {
- const res = await analyzeKmzFile(`${item.url}?_t=${new Date().getTime()}`)
- const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
- const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document']
- const waylinesXMLObj = removeTextKey(waylinesXMLJSON.Folder)
- resolve({ waylinesXMLObj, takeOffRefPoint:[item.longitude,item.latitude] })
- })
+ initViewer(viewer)
}
// 绘制线和飞行
const drawLine = async () => {
- const res = await Promise.all(props.detailsData.way_lines.map(item => analysis(item)))
- // 渲染线
- res.forEach(({ waylinesXMLObj,takeOffRefPoint }) => renderingLine(waylinesXMLObj,takeOffRefPoint))
- // 收集所有起飞点
- const allTakeOffRefPoint = props.detailsData.way_lines.map(item => ([item.longitude,item.latitude]))
- // 收集所有点包括起飞点
- const allPoint = res.flatMap(({ waylinesXMLObj }) => waylinesXMLObj.Placemark)
- .map(item => item.Point.coordinates.split(',')).concat(allTakeOffRefPoint)
- flyVisual(allPoint, viewer,4)
+ Promise.all(
+ props.detailsData.way_lines.map(
+ async item => await renderPreviewLine(`${item.url}?_t=${new Date().getTime()}`, item.wayline_type)
+ )
+ )
}
const removeMap = () => {
@@ -113,6 +68,7 @@
</script>
<style scoped lang="scss">
#deviceJobDetailsMap {
+ position: relative;
height: 100%;
}
</style>
--
Gitblit v1.9.3