From d280bd841125d5b440c9cd79a3965619b5ae49f5 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 23 May 2025 16:27:55 +0800
Subject: [PATCH] feat:删除文件
---
/dev/null | 916 ---------------------------------------------------------
1 files changed, 0 insertions(+), 916 deletions(-)
diff --git a/src/views/job/components/TaskIntermediateContent/TaskMap.vue b/src/views/job/components/TaskIntermediateContent/TaskMap.vue
deleted file mode 100644
index b283267..0000000
--- a/src/views/job/components/TaskIntermediateContent/TaskMap.vue
+++ /dev/null
@@ -1,916 +0,0 @@
-<template>
- <div id="taskMap">
- <div class="new-task-region" v-show="isShowSearch">
- <div class="searchInput">
- <el-select
- :disabled="disabled"
- :teleported="false"
- class="ztzf-select"
- v-model="optionsValue"
- placeholder="请选择查询"
- >
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
-
- <el-input v-model="searchKey" @input="handlerInput" placeholder="请输入搜索关键字"></el-input>
- </div>
- </div>
- <div class="select-down-list" ref="selectDownRef" v-show="isSelectDown">
- <div class="item" v-for="item in downList" @click="selectedValue(item)">{{ item.nickname || item.name }}</div>
- </div>
- </div>
-</template>
-<script setup>
-import _ from 'lodash'
-import * as Cesium from 'cesium'
-import { Cartesian3, Math as CesiumMath, Terrain, Viewer } from 'cesium'
-import AmapMercatorTilingScheme from '@/utils/cesium/AmapMercatorTilingScheme'
-import { analyzeKmzFile, removeTextKey, XMLToJSON } from '@/utils/cesium/kmz'
-import uavImg from '@/assets/images/home/useUavHome/uavImg.png'
-import { getLnglatAltitude } from '@/utils/cesium/mapUtil'
-import { getWaylineByArea } from '@/api/job/task'
-import { useStore } from 'vuex'
-import { searchByKeyword } from '@/api/home/common'
-// 新图片
-import addressArea from '@/assets/images/addressArea.png'
-import newStartPoint from '@/assets/images/newStartPoint.png'
-import newEndPointImg from '@/assets/images/newEndPointicon.png'
-import newlineImg from '@/assets/images/newarrow-right.png'
-import { PublicCesium } from '@/utils/cesium/publicCesium'
-import { gcj02ToWgs84 } from '@/utils/coordinateTransformation'
-import { ElMessage } from 'element-plus'
-const store = useStore()
-const userAreaPosition = computed(() => store.state.home.userAreaPosition)
-// const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
-// const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode)
-const loginUserInfo = computed(() => store.state.user.userInfo.detail)
-const areaValue = ref(loginUserInfo.value.areaName)
-
-// 声明事件
-const emit = defineEmits(['clickPosition', 'saveWayline'])
-
-const props = defineProps({
- wayLineFile: {
- type: String,
- default: '',
- },
- waylineModel: {
- type: String,
- default: '',
- },
- checkedTableData: {
- type: Array,
- default: () => [],
- },
- waylineTypeTest: {
- type: Number,
- default: 3,
- },
-})
-
-const searchKey = ref('')
-const optionsValue = ref('2')
-const disabled = ref(true)
-let options = [
- {
- value: '1',
- label: '机巢',
- },
- {
- value: '2',
- label: '地址',
- },
-]
-const isShowSearch = ref(false)
-const isSelectDown = ref(false)
-// 地址搜索结果
-const downList = ref([])
-// 获取地址搜索结果
-const getAddressList = async () => {
- const res = await searchByKeyword(encodeURIComponent(`${areaValue.value}+${searchKey.value}`))
- if (res.data.code !== 0) return
- downList.value = res?.data?.data.tips || []
- if (downList.value.length > 0) {
- isSelectDown.value = true
- } else {
- isSelectDown.value = false
- }
-}
-// input对应下拉数据初始化
-const inputSelect = () => {
- if (optionsValue.value === '2' && searchKey.value !== '') {
- getAddressList()
- }
-}
-
-// 输入框input事件
-const handlerInput = _.debounce(inputSelect, 1000)
-const addressPointEntity = ref(null)
-const position = ref({})
-
-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}',
- layer: 'tdtVecBasicLayer',
- style: 'default',
- format: 'image/png',
- tileMatrixSetID: 'GoogleMapsCompatible',
- subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
- maximumLevel: 18,
- tilingScheme: new AmapMercatorTilingScheme(),
- credit: 'amap_SL',
-})
-
-let viewer = null
-let currentEntity = null
-let connectLines = [] // 存储连接线实体
-let polygonPoints = [] // 存储多边形的点
-let polygonEntity = null // 存储多边形实体
-let existingEntity = null // 后端返回数据生成得面状线
-// 添加变量跟踪当前菜单
-let currentMenu = null
-// 存储选择航线第一个点的位置
-let firstPosition = null
-let machineNestPositionLine = null
-
-const init = () => {
- viewer = new PublicCesium({ dom: 'taskMap' }).getViewer()
- //设置默认点
- const { longitude = 115.763819, latitude = 28.787374, height = 10 } = userAreaPosition.value || {}
- viewer.camera.setView({
- destination: Cartesian3.fromDegrees(longitude, latitude, height),
- orientation: {
- heading: 0, // east, default value is 0.0 (north)
- pitch: Cesium.Math.toRadians(-90), // default value (looking down)
- roll: 0.0, // default value
- },
- })
-}
-// 机巢下拉获取值
-const selectedValue = item => {
- searchKey.value = item.nickname || item.name
- const [lng, lat] = item.location.split(',').map(Number)
- const [longitude, latitude] = gcj02ToWgs84(lng, lat)
- position.value = { longitude, latitude }
-
- // 添加标注点
- const cartesian3 = Cesium.Cartesian3.fromDegrees(Number(position.value.longitude), Number(position.value.latitude), 0)
- // 清除之前的实体
- if (addressPointEntity.value) {
- viewer.entities.remove(addressPointEntity.value)
- }
- addressPointEntity.value = viewer.entities.add({
- id: 'address_point',
- position: cartesian3,
- billboard: {
- image: addressArea,
- pixelOffset: new Cesium.Cartesian2(0, -13),
- outlineWidth: 0,
- width: 30,
- height: 30,
- scale: 1.0,
- },
- label: {
- text: searchKey.value,
- font: '12px monospace',
- showBackground: true,
- horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
- verticalOrigin: Cesium.VerticalOrigin.TOP,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- pixelOffset: new Cesium.Cartesian2(0, -50),
- },
- })
- flyToPoints([[Number(position.value.longitude), Number(position.value.latitude)]])
- isSelectDown.value = false
-}
-
-// 单点左键点击事件
-const singlePointLeftClick = () => {
- viewer.screenSpaceEventHandler.setInputAction(click => {
- if (props.waylineTypeTest !== 1) return
- const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid)
- if (cartesian) {
- // 清除之前的实体
- viewer.entities.removeAll()
-
- // 添加新点
- const point = viewer.entities.add({
- position: cartesian,
- point: {
- pixelSize: 10,
- color: Cesium.Color.fromCssColorString('#1FFF69'),
- },
- })
-
- // 转换坐标
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
- const longitude = Cesium.Math.toDegrees(cartographic.longitude)
- const latitude = Cesium.Math.toDegrees(cartographic.latitude)
-
- // 更新当前实体引用
- currentEntity = point
-
- // 发送坐标
- emit('clickPosition', { longitude, latitude })
- }
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-}
-
-// 智能规划航线
-const intelligentPlanning = () => {
- // 添加点击事件监听
- viewer.screenSpaceEventHandler.setInputAction(click => {
- if (props.waylineTypeTest !== 2) return
- const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid)
-
- if (cartesian) {
- // 添加新点
- const point = viewer.entities.add({
- position: cartesian,
- point: {
- pixelSize: 10,
- color: Cesium.Color.fromCssColorString('#1FFF69'),
- },
- })
-
- // 存储点位
- polygonPoints.push(cartesian)
-
- // 当点击超过2个点时绘制多边形
- if (polygonPoints.length > 2) {
- // 移除旧的多边形
- if (polygonEntity) {
- viewer.entities.remove(polygonEntity)
- }
-
- // 创建新的多边形
- polygonEntity = viewer.entities.add({
- polygon: {
- hierarchy: new Cesium.PolygonHierarchy(polygonPoints),
- // material: new Cesium.Color.fromBytes(212, 46, 32, 100),
- material: new Cesium.Color(0, 0.5, 1, 0.3), // 蓝色
- outline: true,
- // outlineColor: new Cesium.Color.fromBytes(212, 46, 32, 255),
- outlineColor: new Cesium.Color(0, 0.5, 1, 1), // 蓝
- outlineWidth: 2,
- height: 0, // Set explicit height
- heightReference: Cesium.HeightReference.NONE, // Disable terrain clamping
- },
- })
- }
-
- // 转换坐标并发送
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
- const longitude = Cesium.Math.toDegrees(cartographic.longitude)
- const latitude = Cesium.Math.toDegrees(cartographic.latitude)
- // emit('clickPosition', cartographic);
- }
- }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
- // 修改右键点击事件，添加菜单
- viewer.screenSpaceEventHandler.setInputAction(movement => {
- if (props.waylineTypeTest !== 2) return
- if (polygonPoints.length > 2) {
- // 清除之前的菜单
- if (currentMenu) {
- document.body.querySelectorAll('.context-menu').forEach(menu => menu.remove())
- }
-
- const menuContainer = document.createElement('div')
- menuContainer.className = 'context-menu'
-
- // 获取地图容器
- const mapContainer = document.getElementById('taskMap')
- // 使用鼠标右键点击的实际位置
- menuContainer.style.position = 'absolute'
- menuContainer.style.left = `${movement.position.x}px`
- menuContainer.style.top = `${movement.position.y}px`
- menuContainer.style.zIndex = '1000'
-
- menuContainer.innerHTML = `
- <div class="menu-item" id="saveWayline">保存航线</div>
- <div class="menu-item" id="cancelDraw">取消绘制</div>
- `
-
- mapContainer.appendChild(menuContainer)
- currentMenu = menuContainer
-
- // 添加全局点击事件监听
- const handleClickOutside = e => {
- if (!menuContainer) return
- const isClickInside = menuContainer.contains(e.target)
- if (!isClickInside) {
- menuContainer.remove()
- document.removeEventListener('mousedown', handleClickOutside)
- }
- }
-
- // 延迟添加事件监听，避免右键点击立即触发
- setTimeout(() => {
- document.addEventListener('mousedown', handleClickOutside)
- }, 100)
-
- // 菜单按钮点击事件
- document.getElementById('saveWayline').onclick = () => {
- const coordinates = polygonPoints.map(point => {
- const cartographic = Cesium.Cartographic.fromCartesian(point)
- return {
- longitude: Cesium.Math.toDegrees(cartographic.longitude),
- latitude: Cesium.Math.toDegrees(cartographic.latitude),
- }
- })
- emit('saveWayline', coordinates)
- saveWaylineByArea(coordinates)
- mapContainer.removeChild(menuContainer)
- }
-
- document.getElementById('cancelDraw').onclick = () => {
- polygonPoints = []
- viewer.entities.removeAll()
- mapContainer.removeChild(menuContainer)
- }
- }
- }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-}
-
-// 保存航线并且获取线
-const saveWaylineByArea = dataValue => {
- const polygonArray = dataValue.map(point => [point.longitude, point.latitude])
- getWaylineByArea({ type: 2, polygon: polygonArray }).then(res => {
- if (res.data.code !== 0) retrun
- drawResultWayline(res.data.data)
- })
-}
-
-// 绘制后端生成得面状线
-const drawResultWayline = dataValue => {
- // 先检查并删除已存在的航线
- existingEntity = viewer.entities.getById('result_wayline')
- if (existingEntity) {
- viewer.entities.remove(existingEntity)
- }
- const cartesian3List = ref([])
- dataValue.forEach(lnglat => {
- const cartesian3 = Cesium.Cartesian3.fromDegrees(
- Number(lnglat.x),
- Number(lnglat.y),
- Number(100) // 默认100
- )
- cartesian3List.value.push(cartesian3)
- })
- const setting = {
- id: 'result_wayline',
- polyline: {
- width: 2,
- positions: cartesian3List.value,
- material: Cesium.Color.CHARTREUSE,
- },
- }
- existingEntity = viewer?.entities.add({
- polyline: setting.polyline,
- id: setting.id,
- })
-}
-
-// 选中航线时调用 渲染线和点 type = 0
-const renderingLine = lineObj => {
- const positions = lineObj.Placemark.map(item => {
- const [lon, lat] = item.Point.coordinates.split(',')
- return Cartesian3.fromDegrees(Number(lon), Number(lat))
- })
- // 存储第一个点的位置
- firstPosition = positions[0]
-
- viewer.entities.add({
- polyline: {
- width: 5,
- positions: positions,
- material: new Cesium.PolylineGlowMaterialProperty({
- image: newlineImg,
- }),
- clampToGround: false,
- },
- })
-
- positions.forEach((point, index) => {
- let setting = {}
- if (index === positions.length - 1) {
- setting = {
- position: point,
- id: `point_${index}`,
- billboard: {
- image: newEndPointImg,
- outlineWidth: 0,
- width: 20,
- height: 20,
- scale: 1.0,
- },
- }
- } else {
- setting = {
- position: point,
- id: `point_${index}`,
- label: {
- text: `${index + 1}`,
- font: 'bold 14px serif',
- fillColor: Cesium.Color.WHITE,
- // style: Cesium.LabelStyle.FILL,
- // verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直居中
- // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
- pixelOffset: new Cesium.Cartesian2(1, 0), // 根据需要调整偏移量
- eyeOffset: new Cesium.Cartesian3(0, 0, -10), // 使标签在点的上方
- },
- billboard: {
- image: new Cesium.ConstantProperty(newStartPoint),
- width: 70,
- height: 70,
- },
- offset: new Cesium.Cartesian2(10, 30),
- }
- }
- viewer.entities.add(setting)
- })
-}
-
-// 飞到中心点
-function flyToPoints(lngLatArr) {
- if (!Array.isArray(lngLatArr) || lngLatArr.length === 0) return
- const positions = lngLatArr.map(([lon, lat]) => Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat)))
- // 计算包围盒 BoundingSphere（所有点的外接球）
- const boundingSphere = Cesium.BoundingSphere.fromPoints(positions)
- viewer.camera.flyToBoundingSphere(boundingSphere, {
- duration: 0,
- offset: new Cesium.HeadingPitchRange(0, -90, boundingSphere.radius * 2),
- })
-}
-
-// 异步解析kmz文件
-const analysis = async url => {
- return new Promise(async resolve => {
- const res = await analyzeKmzFile(`${url}?_t=${new Date().getTime()}`)
- const templateXML = await res.fileInfoObj['wpmz/template.kml']
- const waylinesXML = await res.fileInfoObj['wpmz/waylines.wpml']
- const templateXMLJSON = XMLToJSON(templateXML)?.['Document']
- const templateXMLObj = removeTextKey(templateXMLJSON.Folder)
- const waylinesXMLJSON = XMLToJSON(waylinesXML)?.['Document']
- resolve({ templateXMLObj, waylinesXMLJSON })
- })
-}
-
-// 绘制线和飞行
-const drawLine = async () => {
- let prexUrl = ref(import.meta.env.VITE_APP_AIRLINE_URL + props.wayLineFile)
- const { templateXMLObj, waylinesXMLJSON } = await analysis(prexUrl.value)
- if (props.waylineModel === 'planar') {
- drawPlanarWayline(templateXMLObj, waylinesXMLJSON)
- } else {
- if (!templateXMLObj.Placemark.length) return
- renderingLine(templateXMLObj)
- const points = templateXMLObj.Placemark.map(item => item.Point.coordinates.split(','))
- flyToPoints(points)
- }
-}
-
-// 生成面状航线
-const drawPlanarWayline = async (templateXMLObj, waylinesXMLJSON) => {
- let coordArr = null
- // 取出点位
- let coordinates =
- templateXMLObj.Placemark.Polygon?.outerBoundaryIs.LinearRing.coordinates?.['#text']?.split('\n') || []
-
- // 数组转换
- coordArr = coordinates.map(coordinate =>
- coordinate
- .replace(/\s+/g, '')
- .split(',')
- .map(v => Number(v))
- )
- // 获取当前经纬度海拔高度
- const newCoordArr = []
- // 面状点位
- for (let [index, coord] of coordArr.entries()) {
- const [lng, lat] = coord
- const { height: hAltitude } = await getLnglatAltitude(Number(lng), Number(lat), global.$viewer)
- newCoordArr.push([lng, lat, hAltitude])
- }
- // 航线点位
- let coordinateTest = []
- const waylinePoints = waylinesXMLJSON.Folder.Placemark
- if (!waylinePoints.length) return ElMessage.error('没有航线点位')
- const waylinePointLnglats = waylinePoints.map(json => {
- const executeHeight = Number(json.executeHeight['#text'])
- const coordinate = json.Point.coordinates['#text'].split(',').map(lnglat => Number(lnglat))
- coordinateTest.push(coordinate)
- coordinates.push()
- return Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1], executeHeight)
- })
- // 绘制面状航线--------------------
- // waylinePointLnglats.unshift(
- // Cesium.Cartesian3.fromDegrees(
- // Number(this.droneCoordinates.longitude),
- // Number(this.droneCoordinates.latitude),
- // Number(this.droneCoordinates.height)
- // )
- // )
- // 判断是2D还是3D
- // if (!this.clampToGroundshow) {
- // let cartesian = this.addTurnPoint(waylinePointLnglats[0], waylinePointLnglats[1])
- // waylinePointLnglats.splice(1, 0, cartesian)
- // }
-
- existingEntity = viewer.entities.getById('result_wayline')
- if (existingEntity) {
- viewer.entities.remove(existingEntity)
- }
-
- existingEntity = viewer.entities.add({
- id: 'result_wayline',
- polyline: {
- width: 3,
- positions: waylinePointLnglats,
- material: Cesium.Color.CHARTREUSE,
- zIndex: 1,
- clampToGround: false,
- },
- })
- // 传给后端 ，取列表数据
- const cartesianlengthArr = waylinePointLnglats.map(point => {
- const cartographic = Cesium.Cartographic.fromCartesian(point)
- return {
- longitude: Cesium.Math.toDegrees(cartographic.longitude),
- latitude: Cesium.Math.toDegrees(cartographic.latitude),
- }
- })
- emit('saveWayline', cartesianlengthArr)
- // let cartesianlengthArr = waylinePointLnglats.map(cartesian => {
- // return [cartesian3Convert(cartesian, viewer).longitude, cartesian3Convert(cartesian, viewer).latitude]
- // })
- // const centerpoint = getCenterPoint(cartesianlengthArr)
- // let maxlength = 0
- // cartesianlengthArr.forEach((item, index) => {
- // let banseTwoPoints = getLnglatDist(item[0], item[1], centerpoint.lng, centerpoint.lat)
- // if (banseTwoPoints > maxlength) {
- // maxlength = banseTwoPoints
- // }
- // })
-
- flyToPoints(coordinateTest)
-}
-
-// 单个点生成选择多个机巢生成航线和选择航线连线
-const singlePointLines = newVal => {
- // 清除之前的连接线
- connectLines.forEach(line => viewer.entities.remove(line))
- connectLines = []
- if (currentEntity || props.waylineTypeTest === 0) {
- // 获取当前点的位置
- let currentPosition = null
- if (props.waylineTypeTest === 0) {
- currentPosition = firstPosition
- } else {
- currentPosition = currentEntity.position.getValue()
- }
-
- // 为每个选中的机巢创建点和连接线
- newVal.forEach(item => {
- // 创建机巢点
- const nestPosition = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
- viewer.entities.add({
- position: nestPosition,
- billboard: {
- image: new Cesium.ConstantProperty(uavImg),
- width: 24,
- height: 24,
- },
- })
-
- // 创建连接线
- machineNestPositionLine = viewer.entities.add({
- polyline: {
- positions: [currentPosition, nestPosition],
- width: 5,
- material: new Cesium.PolylineGlowMaterialProperty({
- image: newlineImg,
- }),
- },
- })
- connectLines.push(machineNestPositionLine)
- })
-
- // 飞到所有点的中心位置
- const lngLatArr = newVal.map(item => [item.longitude, item.latitude])
- flyToPoints(lngLatArr)
- }
-}
-
-// 智慧规划航线-面状航线
-const planarPointsLines = newVal => {
- // 如果存在面状航线
- if (existingEntity) {
- const waylinePositions = existingEntity.polyline.positions.getValue()
-
- newVal.forEach(item => {
- // 创建机巢点
- const nestPosition = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude))
-
- // 添加机巢图标
- viewer.entities.add({
- position: nestPosition,
- billboard: {
- image: new Cesium.ConstantProperty(uavImg),
- width: 24,
- height: 24,
- },
- })
-
- // 找到最近的航线点并连线
- let minDistance = Number.MAX_VALUE
- let closestPosition = null
-
- waylinePositions.forEach(waylinePos => {
- const distance = Cartesian3.distance(nestPosition, waylinePos)
- if (distance < minDistance) {
- minDistance = distance
- closestPosition = waylinePos
- }
- })
-
- // 创建连接线
- if (closestPosition) {
- machineNestPositionLine = viewer.entities.add({
- polyline: {
- positions: [nestPosition, closestPosition],
- width: 2,
- material: new Cesium.PolylineDashMaterialProperty({
- color: Cesium.Color.CHARTREUSE,
- dashLength: 8.0,
- }),
- },
- })
- connectLines.push(machineNestPositionLine)
- }
- })
-
- // 飞到所有点的中心位置
- const lngLatArr = newVal.map(item => [item.longitude, item.latitude])
- flyToPoints(lngLatArr)
- }
-}
-
-// 监听选择航线文件事件
-watch(
- () => props.wayLineFile,
- async newVal => {
- await removeMap()
- if (newVal) await drawLine()
- },
- { deep: true }
-)
-
-// 监听表格选中数据变化
-watch(
- () => props.checkedTableData,
- newVal => {
- if (!newVal.length) {
- // 清除连接线
- viewer.entities.remove(machineNestPositionLine)
- return
- }
- if (newVal.length > 0 && props.waylineModel === 'point') {
- singlePointLines(newVal)
- } else if (newVal.length > 0 && props.waylineModel === 'planar') {
- planarPointsLines(newVal)
- }
- },
- { deep: true }
-)
-
-watch(
- () => props.waylineTypeTest,
- async newVal => {
- if (newVal === 0) {
- isShowSearch.value = false
- } else {
- isShowSearch.value = true
- }
- await removeMap()
- if (newVal === 1) await singlePointLeftClick()
- else if (newVal === 2) await intelligentPlanning()
- },
- { deep: true }
-)
-
-const removeEvent = () => {
- // 清除事件监听器
- viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
- viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-}
-
-const removeMap = () => {
- // 清除所有实体
- if (viewer) {
- // 清除连接线
- viewer.entities.remove(machineNestPositionLine)
- machineNestPositionLine = null
- connectLines.forEach(line => viewer.entities.remove(line))
- connectLines = []
-
- // 清除多边形点和实体
- polygonPoints = []
- if (polygonEntity) {
- viewer.entities.remove(polygonEntity)
- }
-
- // 清除当前实体和面状航线
- if (currentEntity) {
- viewer.entities.remove(currentEntity)
- }
- if (existingEntity) {
- viewer.entities.remove(existingEntity)
- }
- if (addressPointEntity) {
- viewer.entities.remove(addressPointEntity)
- }
-
- viewer.entities.removeAll()
-
- // 重置所有变量
- currentEntity = null
- polygonEntity = null
- existingEntity = null
- addressPointEntity.value = null
- }
-}
-
-onBeforeUnmount(() => {
- removeMap()
- removeEvent()
- // 移除所有实体并销毁viewer
- viewer.destroy()
- viewer = null
-})
-
-onMounted(() => {
- inputSelect()
- nextTick(() => {
- init()
- })
-})
-</script>
-<style scoped lang="scss">
-#taskMap {
- position: relative;
- height: 100%;
- .select-down-list {
- position: absolute;
- top: 50px;
- left: 42%;
- transform: translateX(-40%);
- width: 230px;
- height: 256px;
- overflow-y: auto;
- background: linear-gradient(180deg, #0d3556 0%, #012350 100%);
- border-radius: 0px 0px 8px 8px;
- border: 1px solid;
- border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1;
- font-size: 14px;
- color: #ffffff;
- // opacity: 0.8;
- &::-webkit-scrollbar {
- width: 0;
- display: none;
- }
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
- .item {
- color: #ffffff;
- height: 32px;
- line-height: 32px;
- text-align: center;
- cursor: pointer;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- &:hover {
- background: linear-gradient(
- 90deg,
- rgba(0, 122, 255, 0) 0%,
- rgba(0, 98, 204, 0.6) 50%,
- rgba(0, 73, 153, 0) 100%
- );
- border: 1px solid;
- border-image: linear-gradient(90deg, rgba(0, 199, 190, 0), rgba(48, 176, 199, 1), rgba(0, 199, 190, 0)) 1 1;
- }
- }
- }
- .new-task-region {
- width: 350px;
- height: 43px;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- .el-select {
- width: 100px;
- height: 100%;
-
- :deep() {
- .el-select__wrapper {
- background: transparent;
- border: none;
- box-shadow: none;
- height: 100%;
- padding-left: 20px;
- }
-
- .el-select__suffix {
- display: none;
- }
-
- .el-select__selected-item {
- font-family: Source Han Sans CN, Source Han Sans CN, serif;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- line-height: 18px;
- }
- }
- }
- .searchInput {
- width: 243px;
- height: 100%;
- // background: url('@/assets/images/home/searchBox/searchBg1.png') no-repeat center / 100% 100%;
- display: flex;
-
- .el-input {
- height: 100%;
-
- :deep() {
- .el-input__wrapper {
- background: transparent;
- border: none;
- box-shadow: none;
- height: 100%;
- }
-
- .el-input__inner {
- font-family: Source Han Sans CN, Source Han Sans CN, serif;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- line-height: 18px;
- white-space: nowrap; /* 禁止换行 */
- overflow: hidden; /* 隐藏溢出内容 */
- text-overflow: ellipsis; /* 使用省略号显示 */
- }
- }
- }
- }
- }
- :deep() {
- .cesium-viewer {
- height: 100%;
- overflow: hidden;
-
- .cesium-viewer-cesiumWidgetContainer {
- width: 100%;
- height: 100%;
-
- .cesium-widget {
- width: 100%;
- height: 100%;
-
- canvas {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
-
- .cesium-viewer-bottom {
- display: none;
- }
- }
-
- :deep(.context-menu) {
- position: absolute;
- background: rgba(0, 21, 41, 0.9);
- border-radius: 4px;
- padding: 8px 0;
- min-width: 120px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-
- .menu-item {
- padding: 8px 16px;
- color: #fff;
- cursor: pointer;
- transition: all 0.3s;
- font-size: 14px;
-
- &:hover {
- background: rgba(255, 255, 255, 0.1);
- }
- }
- }
-}
-</style>
--
Gitblit v1.9.3