From b8f8cc29658aca4d563a927c11e0efff538f6ad2 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 31 Jan 2026 16:44:30 +0800
Subject: [PATCH] feat: 绘制面工具类
---
/dev/null | 604 ----------------------------------------------
applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue | 4
packages/utils/package.json | 36 +-
applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue | 4
packages/utils/map/index.js | 45 +++
applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue | 8
packages/utils/map/DrawPolygon.js | 13
pnpm-lock.yaml | 9
8 files changed, 91 insertions(+), 632 deletions(-)
diff --git a/applications/drone-command/src/utils/cesium/DrawPolygon.js b/applications/drone-command/src/utils/cesium/DrawPolygon.js
deleted file mode 100644
index 6bea7f4..0000000
--- a/applications/drone-command/src/utils/cesium/DrawPolygon.js
+++ /dev/null
@@ -1,817 +0,0 @@
-import * as Cesium from 'cesium'
-import * as turf from '@turf/turf'
-import { boxTransformScale } from '@/utils/turfFunc'
-import { ElMessage } from 'element-plus'
-import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
-import { flyVisual } from '@ztzf/utils'
-
-/**
- * 多边形绘制与编辑工具类
- * 功能：
- * - 绘制多边形
- * - 拖动编辑端点
- * - 删除端点、删除整个多边形
- * - 多边形自交检查（避免非法几何）
- * - 外部订阅/通知机制
- */
-export class DrawPolygon {
- constructor() {
- // 图斑预览模式标记
- this.isPureSpotPreview = false
- // 是否删除测区
- this.isDeleteTheArea = true
- //是否可以编辑图斑
- this.isPreviewMode = true
- // Cesium 视图对象
- this.viewer = null
- // 当前绘制的多边形
- this.curPolygon = null
- // 绘制模式标识
- this.drawingMode = false
- // 编辑模式标识
- this.editingMode = false
- // 是否正在拖拽端点
- this.isDragging = false
- // 当前拖拽的点实体
- this.draggedEntity = null
- // 多边形实体
- this.polygonEntity = null
- // 存储端点的 DataSource
- this.editPolygonDataSource = null
- this.editPolygonPointDataSource = null
- // 存储中点（边中点）的 DataSource：用于编辑态插入新端点
- this.editPolygonMidPointDataSource = null
- // 鼠标事件处理器
- this.handler = null
- // 右键菜单 DOM
- this.menuPopup = null
- // 被右键选中的点
- this.delPolygonPoint = null
- // 是否显示警告提示（自交）
- this.isShowWaringTip = false
- // 当前拖拽点是否合法
- this.currentDragPointIsValid = false
- // 当前拖拽点的坐标
- this.currentDragPointPosition = null
-
- // 事件回调函数绑定 this
- this.handleLeftDown = this.handleLeftDown.bind(this)
- this.handleLeftUp = this.handleLeftUp.bind(this)
- this.handleMouseMove = this.handleMouseMove.bind(this)
- this.handleLeftClick = this.handleLeftClick.bind(this)
- this.handleRightClick = this.handleRightClick.bind(this)
-
- this.delPolygon = this.delPolygon.bind(this)
- this.delPoint = this.delPoint.bind(this)
- // 外部订阅者
- this.listeners = []
- }
-
- // 实体命名常量
- static ENTITY_NAMES = {
- POLYGON: '区域-面',
- POINT: '区域-端点',
- // 编辑态中点（用于快速插入新端点）
- MID_POINT: '区域-中点',
- POLYGON_ID: 'planar-route-polygon',
- POINT_ID_PREFIX: 'planar-route-point',
- MID_POINT_ID_PREFIX: 'planar-route-mid-point',
- }
-
- // 颜色常量
- static COLORS = {
- DEFAULT_POLYGON: Cesium.Color.fromBytes(45, 140, 240, 99), // 默认面颜色
- DEFAULT_LINE: Cesium.Color.fromBytes(45, 140, 240, 255), // 默认边界线颜色
- ERROR_POLYGON: Cesium.Color.fromCssColorString('rgba(255, 0, 0, .3)'), // 错误（自交）面颜色
- ERROR_LINE: Cesium.Color.fromCssColorString('rgba(255, 0, 0, 1)'), // 错误（自交）线颜色
- }
-
- // ============ 发布订阅机制 ============
-
- // 外部订阅数据变化
- subscribe(key, listener) {
- this.listeners.push({ key, listener })
- }
-
- // 通知订阅者
- notify(key, data) {
- this.listeners.filter(subscriber => subscriber.key === key).forEach(subscriber => subscriber.listener(data))
- }
-
- // ============ 绘制相关 ============
- // 编辑图斑
- editThePatch(data) {
- this.isPreviewMode = data
- // 关闭编辑能力时隐藏端点/中点，并清空中点，避免残留交互
- if (!this.isPreviewMode) {
- this.editPolygonPointDataSource && (this.editPolygonPointDataSource.entities.show = false)
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = false)
- this.editPolygonMidPointDataSource?.entities?.removeAll?.()
- return
- }
-
- if (this.editingMode) {
- this.editPolygonPointDataSource && (this.editPolygonPointDataSource.entities.show = true)
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildEditPoints()
- this.rebuildMidPoints()
- }
- }
- // 删除测区
- deleteTheArea(data) {
- this.isDeleteTheArea = data
- }
-
- // 开始绘制
- startDrawing() {
- this.drawingMode = true
- this.curPolygon = new Cesium.PolygonHierarchy()
-
- // 如果还没有 DataSource，就新建一个
- if (!this.editPolygonDataSource) {
- this.editPolygonDataSource = new Cesium.CustomDataSource('editPolygonDataSource')
- this.viewer?.dataSources.add(this.editPolygonDataSource)
- }
-
- if (!this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource = new Cesium.CustomDataSource('editPolygonPointDataSource')
- this.viewer?.dataSources.add(this.editPolygonPointDataSource)
- }
-
- // 中点数据源：编辑模式下用于“边上插点”
- if (!this.editPolygonMidPointDataSource) {
- this.editPolygonMidPointDataSource = new Cesium.CustomDataSource('editPolygonMidPointDataSource')
- this.viewer?.dataSources.add(this.editPolygonMidPointDataSource)
- }
-
- // 清空之前的点
- this.editPolygonDataSource?.entities.removeAll()
- this.editPolygonPointDataSource?.entities.removeAll()
- this.editPolygonMidPointDataSource?.entities.removeAll()
- }
-
- // 创建多边形实体（含边界线）
- createPolygonEntity() {
- this.polygonEntity = this.editPolygonDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POLYGON,
- id: DrawPolygon.ENTITY_NAMES.POLYGON_ID,
- polygon: {
- hierarchy: new Cesium.CallbackProperty(() => this.curPolygon, false),
- material: DrawPolygon.COLORS.DEFAULT_POLYGON,
- outline: false,
- outlineWidth: 2,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- },
- polyline: {
- width: 2,
- material: DrawPolygon.COLORS.DEFAULT_LINE,
- clampToGround: true,
- positions: new Cesium.CallbackProperty(
- () => [...this.curPolygon.positions, this.curPolygon.positions[0]], // 闭合线
- false
- ),
- },
- })
- }
-
- // 创建端点实体
- createPointEntity(position, isAdd) {
- const pointIndex = isAdd ? this.curPolygon.positions.length - 2 : this.curPolygon.positions.length - 1
-
- this.editPolygonPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POINT,
- id: `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`,
- position: position.clone(),
- point: {
- pixelSize: 14,
- color: Cesium.Color.WHITE,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- ind: pointIndex, // 索引记录
- },
- })
- }
-
- createMidPointEntity(startInd, position) {
- // 使用 CallbackProperty 让中点位置随端点拖拽实时计算
- // startInd 表示该中点属于边：(startInd) -> (startInd + 1)
- const updatePosition = () => {
- const positions = this.curPolygon?.positions
- if (!positions || positions.length < 2) return position
-
- const n = positions.length
- const p1 = positions[startInd]
- const p2 = positions[(startInd + 1) % n]
- if (!p1 || !p2) return position
-
- return Cesium.Cartesian3.midpoint(p1, p2, new Cesium.Cartesian3())
- }
-
- this.editPolygonMidPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.MID_POINT,
- id: `${DrawPolygon.ENTITY_NAMES.MID_POINT_ID_PREFIX}${startInd}`,
- position: new Cesium.CallbackProperty(updatePosition, false),
- point: {
- pixelSize: 10,
- color: Cesium.Color.fromCssColorString('rgba(255, 255, 255, .7)'),
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- startInd,
- },
- })
- }
-
- rebuildEditPoints() {
- // 插入/删除端点后：端点实体 id 与 customData.ind 需要全量重建，保证索引与 positions 一致
- if (!this.isPreviewMode) return
- if (!this.editPolygonPointDataSource || !this.curPolygon?.positions) return
-
- this.editPolygonPointDataSource.entities.removeAll()
- this.curPolygon.positions.forEach((position, index) => {
- this.editPolygonPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POINT,
- id: `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${index}`,
- position: position.clone(),
- point: {
- pixelSize: 14,
- color: Cesium.Color.WHITE,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- ind: index,
- },
- })
- })
- }
-
- rebuildMidPoints() {
- // 仅在“顶点数量变化/切换编辑态”时维护中点实体数量
- // 拖拽过程中中点位置由 CallbackProperty 自动更新，不需要重建
- if (!this.isPreviewMode) return
- if (!this.editPolygonMidPointDataSource || !this.curPolygon?.positions) return
-
- const positions = this.curPolygon.positions
- const n = positions.length
- const entities = this.editPolygonMidPointDataSource.entities
-
- if (!this.editingMode || n < 2) {
- entities.removeAll()
- return
- }
-
- const neededIds = new Set()
- for (let i = 0; i < n; i += 1) {
- const id = `${DrawPolygon.ENTITY_NAMES.MID_POINT_ID_PREFIX}${i}`
- neededIds.add(id)
- // 缺少则补齐：保证每条边都有一个中点实体
- if (!entities.getById(id)) {
- const p1 = positions[i]
- const p2 = positions[(i + 1) % n]
- if (!p1 || !p2) continue
- const mid = Cesium.Cartesian3.midpoint(p1, p2, new Cesium.Cartesian3())
- this.createMidPointEntity(i, mid)
- }
- }
-
- entities.values.slice().forEach(entity => {
- if (entity?.name !== DrawPolygon.ENTITY_NAMES.MID_POINT) return
- // 多余则移除：例如删除端点导致边数量减少
- if (!neededIds.has(entity.id)) {
- entities.remove(entity)
- }
- })
- }
-
- insertPointFromMidPoint(midPointEntity) {
- // 点击中点：在对应边上插入一个新端点（白点），并立即进入拖拽态
- if (!this.isPreviewMode) return
- if (!this.editingMode) return
- if (!midPointEntity?.customData) return
-
- const startInd = midPointEntity.customData.startInd
- // 中点位置可能是 CallbackProperty，需要取当前时刻的值
- const positionProperty = midPointEntity.position
- const entityPosition = positionProperty?.getValue
- ? positionProperty.getValue(Cesium.JulianDate.now())
- : positionProperty
- if (!entityPosition) return
-
- // 插入到 startInd 与 startInd+1 之间
- const insertIndex = Math.min(Math.max(startInd + 1, 0), this.curPolygon.positions.length)
- this.curPolygon.positions.splice(insertIndex, 0, entityPosition.clone ? entityPosition.clone() : entityPosition)
-
- this.rebuildEditPoints()
- this.rebuildMidPoints()
-
- const newPointEntity = this.editPolygonPointDataSource?.entities?.getById(
- `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${insertIndex}`
- )
- if (newPointEntity) {
- this.isDragging = true
- this.draggedEntity = newPointEntity
- this.currentDragPointPosition = this.curPolygon.positions[insertIndex]
- this.disableMapControl()
- }
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
- // 清除不在范围内的点
- removeLastInvalidPoint() {
- const posLen = this.curPolygon.positions.length
- if (posLen === 0) return
-
- let targetPointId = ''
- let removeCount = 0
-
- if (posLen === 2) {
- removeCount = 2
- targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}0`
- } else if (posLen > 2) {
- removeCount = 1
- const pointIndex = posLen - 2
- targetPointId = `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`
- }
-
- this.curPolygon.positions.splice(posLen - removeCount, removeCount)
-
- const invalidPoint = this.editPolygonPointDataSource.entities.getById(targetPointId)
- if (invalidPoint) {
- this.editPolygonPointDataSource.entities.remove(invalidPoint)
- }
-
- if (this.curPolygon.positions.length === 0 && this.polygonEntity) {
- this.editPolygonDataSource.entities.remove(this.polygonEntity)
- this.polygonEntity = null
- }
- }
- // 添加一个点
- addPosition(position, isAdd = true) {
- // 第一个点要重复压入一次，形成动态绘制效果
- if (this.curPolygon.positions.length === 0 && isAdd) {
- this.curPolygon.positions.push(position.clone())
- }
-
- this.curPolygon.positions.push(position.clone())
-
- // 如果没有实体则创建
- if (!this.polygonEntity) {
- this.createPolygonEntity()
- }
-
- // 创建端点实体
- if (this.isPreviewMode) {
- this.createPointEntity(position, isAdd)
- }
-
- this.notify('getPoints', position)
- }
-
- // ============ 鼠标事件 ============
-
- // 鼠标左键按下（选中端点拖动）
- handleLeftDown(movement) {
- if (!this.editingMode) return
-
- const pickedEntity = this.viewer.scene.pick(movement.position)?.id
- const isPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.POINT
- const isMidPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.MID_POINT
-
- if (pickedEntity && isPoint) {
- this.isDragging = true
- this.draggedEntity = pickedEntity
- this.currentDragPointPosition = this.curPolygon.positions[this.draggedEntity?.customData.ind]
- this.disableMapControl() // 禁止地图交互
- return
- }
-
- if (pickedEntity && isMidPoint) {
- this.insertPointFromMidPoint(pickedEntity)
- }
- }
-
- // 鼠标左键抬起（拖拽结束）
- handleLeftUp() {
- if (!(this.editingMode && this.curPolygon?.positions && this.draggedEntity)) return
-
- if (this.currentDragPointIsValid && this.isDragging) {
- // 更新点位置
- this.draggedEntity.position = this.currentDragPointPosition
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = this.currentDragPointPosition
-
- // 校验多边形是否自交
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
-
- // 拖拽结束，恢复交互
- if (this.isDragging) {
- this.notify('getPolygonPositions', this.curPolygon.positions)
- this.isDragging = false
- this.draggedEntity = null
- this.enableMapControl()
- this.rebuildMidPoints()
- }
- }
-
- // 鼠标移动
- handleMouseMove(movement) {
- if (!this.drawingMode && !this.editingMode) return
-
- const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
- if (!cartesian) return
-
- // 编辑模式下，拖拽点实时更新
- if (this.editingMode && this.draggedEntity?.customData) {
- this.draggedEntity.position = cartesian
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
- }
-
- // 绘制模式下，实时更新最后一个点
- if (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 1) {
- this.curPolygon.positions.pop()
- this.curPolygon.positions.push(cartesian)
- }
-
- // 实时检查是否自交
- if (
- (this.editingMode && this.draggedEntity?.customData) ||
- (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 3)
- ) {
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
- }
-
- // 鼠标左键点击
- handleLeftClick(click) {
- this.removeMenuPopup()
-
- const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isStartPoint = pickedAllEntity.find(i => i.id.name === '起飞点')
- const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
-
- if (isStartPoint) return
-
- // 如果不是绘制模式
- if (!this.drawingMode) {
- if (!isPolygon) {
- this.editingMode = false
- this.editPolygonPointDataSource.entities.show = false
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = false)
- return
- }
-
- if (isPolygon) {
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildMidPoints()
- }
- return
- }
-
- // 点击闭合多边形
- if (this.curPolygon.positions.length < 4 && isPolygonPoint) {
- return
- }
-
- if (this.curPolygon.positions.length >= 4 && isPolygonPoint) {
- if (!this.drawingMode) return
-
- this.finishDrawing()
- return
- }
-
- // 添加新的点
- const cartesian = this.viewer.scene.pickPosition(click.position)
- if (!cartesian) return
-
- let arr = [...this.curPolygon.positions]
- arr.pop()
- // 校验多边形是否自交
- if (arr.length > 2 && !this.curDragPointIsValid([...arr, cartesian])) {
- ElMessage.warning('测区不支持交叉绘制，请重新绘制')
- return
- }
-
- this.addPosition(cartesian)
- }
-
- // 鼠标右键点击（弹出菜单）
- handleRightClick(click) {
- const that = this
- if (that.drawingMode) return
-
- that.removeMenuPopup()
-
- const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- const isEditPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const {
- position: { x, y },
- } = click
-
- let pickedEntity, tooltipEvent, menuType
- if (isEditPoint) {
- pickedEntity = isEditPoint
- tooltipEvent = that.delPoint
- menuType = 'edit-point'
- } else if (isPolygon) {
- pickedEntity = isPolygon
- tooltipEvent = that.delPolygon
- menuType = 'polygon'
- }
-
- if (pickedEntity && this.isDeleteTheArea) {
- that.delPolygonPoint = pickedEntity.id
- that.menuPopup = that.createMenuPopup(menuType)
- that.menuPopup.style.transform = `translate3d(${x - 10}px, ${y - 10}px, 0)`
- that.viewer.container.appendChild(that.menuPopup)
- that.menuPopup.addEventListener('click', tooltipEvent)
- }
- }
-
- // ============ 删除相关 ============
-
- // 删除所有实体
- removeEntities() {
- if (this.editPolygonDataSource) {
- this.editPolygonDataSource.entities.removeAll()
- this.editPolygonDataSource = null
- }
-
- if (this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource.entities.removeAll()
- this.editPolygonPointDataSource = null
- }
-
- if (this.editPolygonMidPointDataSource) {
- this.editPolygonMidPointDataSource.entities.removeAll()
- this.editPolygonMidPointDataSource = null
- }
- this.editingMode = false
- this.polygonEntity = null
- this.curPolygon = null
- }
-
- // 完成绘制
- finishDrawing() {
- this.curPolygon.positions.pop()
-
- if (this.curPolygon.positions.length >= 3) {
- this.drawingMode = false
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildMidPoints()
-
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
- }
-
- // 删除多边形
- delPolygon() {
- this.removeEntities()
- this.removeMenuPopup()
- this.notify('getPolygonPositions', [])
- this.startDrawing()
- }
- // 删除图斑
- delSpot() {
- this.removeEntities()
- this.isPreviewMode = true
- this.startDrawing()
- }
- // 删除端点
- delPoint() {
- if (this.curPolygon.positions.length <= 3) {
- this.removeMenuPopup()
- return ElMessage.warning('端点不可少于3个')
- }
- if (!this.delPolygonPoint) return
-
- this.curPolygon.positions.splice(this.delPolygonPoint.customData.ind, 1)
- this.removeMenuPopup()
- this.rebuildEditPoints()
- this.rebuildMidPoints()
-
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
-
- // ============ 工具方法 ============
-
- // 创建右键菜单
- createMenuPopup(type = 'polygon') {
- const menuPopupVBox = document.createElement('div')
- menuPopupVBox.id = 'planarPolygonEdit'
- menuPopupVBox.className = 'planar-polygon-edit-tooltip'
-
- const menuPopup = document.createElement('div')
- menuPopup.id = 'planarPolygonEditMenu'
- menuPopup.className = 'planar-polygon-edit-menu'
-
- const menuItems =
- type === 'polygon'
- ? [{ title: '删除测区', class: 'del-planar-polygon' }]
- : [{ title: '删除端点', class: 'del-planar-point' }]
-
- menuItems.forEach(item => {
- const titleDiv = document.createElement('div')
- titleDiv.innerText = item.title
- titleDiv.className = item.class
- menuPopup.appendChild(titleDiv)
- })
- this.isPreviewMode = true
- menuPopupVBox.appendChild(menuPopup)
- return menuPopupVBox
- }
-
- // 移除菜单
- removeMenuPopup() {
- const that = this
- if (that.menuPopup) {
- that.menuPopup.removeEventListener('click', that.delPolygon)
- that.menuPopup.removeEventListener('click', that.delPoint)
- that.viewer.container.removeChild(that.menuPopup)
- that.menuPopup = null
- }
- that.delPolygonPoint = null
- }
-
- // 更新多边形样式（正常/错误）
- updatePolygonAppearance(polygonColor, lineColor) {
- this.polygonEntity.polygon.material = polygonColor
- this.polygonEntity.polyline.material = lineColor
- }
-
- // 禁用地图交互
- disableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = false
- controller.enableTranslate = false
- controller.enableZoom = false
- }
-
- // 启用地图交互
- enableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = true
- controller.enableTranslate = true
- controller.enableZoom = true
- }
-
- // 检查多边形是否自交
- curDragPointIsValid(positions) {
- if (positions.length < 3) return true
-
- const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions)
- const latLngPoints = cartographics.map(cartographic => [
- Cesium.Math.toDegrees(cartographic.longitude),
- Cesium.Math.toDegrees(cartographic.latitude),
- ])
-
- // 用 turf.js 检查自交
- const poly = turf.polygon([[...latLngPoints, latLngPoints[0]]])
- const intersections = turf.kinks(poly)
-
- return intersections.features.length === 0
- }
- // 初始化已有多边形
- async initPolygon(viewer, positions, isPurePreview = false) {
- this.initHandler(viewer)
- this.isPureSpotPreview = isPurePreview
- this.startDrawing()
- const normalizedPositions = this.normalizePolygonPositions(positions)
- let newPosition = normalizedPositions.map(item => {
- return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item?.height || 0))
- })
- // 预览航线的时候调用
- if (!this.isPureSpotPreview) {
- this.notify('getPolygonPositions', newPosition)
- }
-
- newPosition.forEach(item => {
- this.addPosition(item, false)
- })
-
- // 视角飞入区域
- const newBox = boxTransformScale(normalizedPositions.map(item => [item.lng, item.lat]), 5)
- viewer.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(...newBox),
- offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0),
- duration: 0.5,
- })
-
- let pointList = await getPointPositionsHeight(normalizedPositions, viewer)
- flyVisual({ positionsData: pointList.map(item => [item.lng, item.lat, item.ASL]), viewer })
-
- this.drawingMode = false
- this.editingMode = true
- this.editPolygonPointDataSource && (this.editPolygonPointDataSource.entities.show = true)
- this.editPolygonMidPointDataSource && (this.editPolygonMidPointDataSource.entities.show = true)
- this.rebuildMidPoints()
- }
-
- // 规范化多边形点位：如果首尾重复，去掉末尾闭合点
- normalizePolygonPositions(positions) {
- if (!Array.isArray(positions) || positions.length < 2) return positions || []
- const first = positions[0]
- const last = positions[positions.length - 1]
- const sameLng = Number(first?.lng) === Number(last?.lng)
- const sameLat = Number(first?.lat) === Number(last?.lat)
- const sameHeight = Number(first?.height || 0) === Number(last?.height || 0)
- if (sameLng && sameLat && sameHeight) {
- return positions.slice(0, -1)
- }
- return positions
- }
-
- // 初始化事件处理器
- initHandler(viewer) {
- this.viewer = viewer
- this.startDrawing()
-
- if (!this.handler) {
- this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-
- // 注册鼠标事件
- const events = [
- [Cesium.ScreenSpaceEventType.LEFT_DOWN, this.handleLeftDown],
- [Cesium.ScreenSpaceEventType.LEFT_UP, this.handleLeftUp],
- [Cesium.ScreenSpaceEventType.MOUSE_MOVE, this.handleMouseMove],
- [Cesium.ScreenSpaceEventType.LEFT_CLICK, this.handleLeftClick],
- [Cesium.ScreenSpaceEventType.RIGHT_CLICK, this.handleRightClick],
- ]
-
- events.forEach(([type, handler]) => {
- this.handler.setInputAction(handler, type)
- })
- }
- }
-
- // 移除事件处理器
- removeHandler() {
- if (this.handler) {
- const eventTypes = [
- Cesium.ScreenSpaceEventType.LEFT_DOWN,
- Cesium.ScreenSpaceEventType.LEFT_UP,
- Cesium.ScreenSpaceEventType.MOUSE_MOVE,
- Cesium.ScreenSpaceEventType.LEFT_CLICK,
- Cesium.ScreenSpaceEventType.RIGHT_CLICK,
- ]
-
- eventTypes.forEach(type => {
- this.handler.removeInputAction(type)
- })
-
- this.handler.destroy()
- this.handler = null
- }
- }
-
- /**
- * 销毁实例，释放资源
- */
- destroy() {
- if (!this.viewer) return
-
- this.removeMenuPopup()
- this.removeEntities()
- this.removeHandler()
- this.enableMapControl()
- }
-}
diff --git a/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
index 6b799c1..9e5bc91 100644
--- a/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
+++ b/applications/drone-command/src/views/areaManage/defenseZone/FormDiaLog.vue
@@ -16,7 +16,7 @@
<div class="right-container">
<div class="header">
<span>{{ titleEnum[dialogMode] }}</span>
-
+
<el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
</div>
@@ -105,7 +105,7 @@
import { fwDefenseSceneListApi } from '@/views/areaManage/sceneConfig/sceneConfigApi'
import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as turf from '@turf/turf'
import * as Cesium from 'cesium'
diff --git a/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue b/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue
index 302d14e..92a98c9 100644
--- a/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue
+++ b/applications/drone-command/src/views/areaManage/partition/FormDiaLog copy.vue
@@ -17,7 +17,7 @@
<div class="right-container">
<div class="header">
<span>{{ titleEnum[dialogMode] }}</span>
-
+
<el-icon class="close-btn" @click.stop="visible = false"><Close /></el-icon>
</div>
@@ -180,7 +180,7 @@
import { useRoute } from 'vue-router'
import { fieldRules, geomAnalysis, getDictLabel } from '@ztzf/utils'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as turf from '@turf/turf'
import * as Cesium from 'cesium'
diff --git a/applications/drone-command/src/views/layerManagement/components/folderFile.vue b/applications/drone-command/src/views/layerManagement/components/folderFile.vue
deleted file mode 100644
index d8a2047..0000000
--- a/applications/drone-command/src/views/layerManagement/components/folderFile.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<template>
- <div class="rightContainer">
- <div class="contenttitle">{{ itSLandPlanning ? '文件' : '文件夹' }}信息</div>
- <div class="centerBox">
- <div class="itemRow">
- <div class="label">{{ itSLandPlanning ? '文件' : '文件夹' }}名称</div>
- <div>
- <el-input class="command-layer-input inputName" v-model="formData.name" placeholder="请输入" />
- </div>
- </div>
- <div class="itemRow"
- v-if="(layerParams.addAnEditingFolder === 1 && layerParams.fileType !== 2) || (layerParams.addAnEditingFolder === 2 && layerParams.fileType !== 2) && !itSLandPlanning">
- <div class="label">关联算法</div>
- <div>
- <el-select class="command-layer-search filter-item" @change="handleTypeChange" v-model="formData.event_type"
- placeholder="请选择" clearable>
- <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- <el-select v-model="formData.algorithm_name" class="command-layer-search" placeholder="请选择" clearable
- :disabled="!formData.event_type">
- <el-option v-for="item in algorithms" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </div>
- </div>
- </div>
- <div class="detailInfo" v-if="layerParams.editFolder">
- <div class="infpItem" v-if="!itSLandPlanning">
- <div class="itemData">
- <div class="title">{{ layerParams.fileType === 1 ? '识别区' : '禁飞区' }}总数量</div>
-
- <div class="num">
- <span class="totalQuantity">{{ formData.total_count }}</span> 个
- </div>
- </div>
- <div class="itemData">
- <div class="title">{{ layerParams.fileType === 1 ? '识别区' : '禁飞区' }}总面积</div>
- <div class="num">
- <span class="areaStyle">{{ dataUnitConversion(formData.total_area).val }}</span> {{
- dataUnitConversion(formData.total_area).unit }}
- </div>
- </div>
- </div>
- <div class="infpItem">
- <div class="itemData">
- <div class="title">创建时间</div>
- <div class="num">
- <span>{{ formData?.create_time }}</span>
- </div>
- </div>
- <div class="itemData">
- <div class="title">创建人</div>
- <div class="num">
- <span>{{ formData?.create_name }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="btnGroups">
- <img src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" />
- <img src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" />
- </div>
- </div>
-</template>
-
-<script setup>
-import {dataUnitConversion} from '@ztzf/utils'
-const emit = defineEmits(['refreshMethod', 'callParentMethod'])
-import EventBus from '@/utils/eventBus'
-import { ElMessage } from 'element-plus'
-import dayjs from 'dayjs'
-import { deleteFolderApi, deitFolderApi, addFolderApi } from '@/api/layer/index'
-import { getTicketInfo } from '@/api/tickets/ticket'
-import { computed } from 'vue'
-
-const layerParams = inject('layerParams')
-const types = ref([]) //工单类型
-const allAlgorithms = ref([])
-const algorithms = ref([])
-const formData = ref({
- category_id: '',
- name: '',
- event_type: '',
- algorithm_name: '',
- total_count: 0,
- total_area: 0,
-})
-const detailData = ref(null)
-detailData.value = layerParams.value.editFolderData
-const props = defineProps({
- activeName: String,
-})
-const itSLandPlanning = computed(() => props.activeName === '国土空间规划')
-const getTicketInfoData = async () => {
- const response = await getTicketInfo()
- const { dept_data, event_type, ai_type, info } = response.data.data
- allAlgorithms.value = info
- types.value = Object.entries(event_type).map(([key, value]) => ({
- label: value,
- value: key,
- }))
-}
-const handleTypeChange = typeValue => {
- formData.value.algorithm_name = ''
- const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue)
- if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
- // 无匹配的算法时清空
- algorithms.value = []
- return
- }
- algorithms.value = matchedCategory.algorithms.map(algo => ({
- label: algo.dict_value,
- value: algo.dict_key,
- dict_key: algo.dict_key,
- dict_value: algo.dict_value,
- }))
-}
-const clearAllData = () => {
- formData.value = {
- category_id: '',
- name: '',
- event_type: '',
- algorithm_name: '',
- total_count: 0,
- total_area: 0,
- create_time: '',
- create_name: '',
- }
- algorithms.value = []
- detailData.value = {}
- layerParams.value.decideWhetherToAddOrEdit = 1
- layerParams.value.addFolder = false
- layerParams.value.editFolder = false
- layerParams.value.editDetailData = null
- layerParams.value.polygonPosition = null
-}
-const cancelHandel = () => {
- clearAllData()
- emit('callParentMethod')
-}
-const submitHandle = () => {
- if (!formData.value.name) {
- ElMessage.error('请输入文件夹名称')
- return
- }
- if (!itSLandPlanning.value) {
- if (!formData.value.event_type && layerParams.value.fileType === 1) {
- ElMessage.warning('请选择类型')
- return
- }
- if (!formData.value.algorithm_name && layerParams.value.fileType === 1) {
- ElMessage.warning('请选择算法')
- return
- }
- }
- const params = {
- category_id: layerParams.value.fileType === 1 ? 1 : 2,
- name: formData.value.name,
- event_type: formData.value.event_type,
- algorithm_name: formData.value.algorithm_name,
- }
- // 如果是编辑模式，才添加 id
- if (layerParams.value.addAnEditingFolder === 2) {
- params.id = detailData.value.id
- }
- if (layerParams.value.addAnEditingFolder === 1) {
- // 文件夹新增
- addFolderApi(params).then(res => {
- ElMessage.success('新增成功')
- EventBus.emit('gettreeDataApi')
- emit('refreshMethod')
- clearAllData()
- emit('callParentMethod')
- })
- } else {
- //文件夹编辑
- deitFolderApi(params).then(res => {
- ElMessage.success('编辑成功')
- EventBus.emit('gettreeDataApi')
- clearAllData()
- emit('callParentMethod')
- })
- }
-}
-onMounted(async () => {
- await getTicketInfoData()
- const addOrEditStatus = layerParams.value.addAnEditingFolder || 1
- // 判断是否有编辑数据，有则回显
- if (detailData.value && addOrEditStatus === 2) {
- const editData = detailData.value
- formData.value = {
- ...formData.value,
- category_id: editData.category_id,
- name: editData.name,
- event_type: editData.event_type, // 回显“关联算法类型”值
- algorithm_name: editData.algorithm_name, // 回显“算法”值
-
- total_count: editData.total_count,
- total_area: editData.total_area,
- create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
- create_name: editData.create_name,
- }
- if (formData.value.event_type) {
- handleTypeChange(formData.value.event_type)
-
- setTimeout(() => {
- formData.value.algorithm_name = editData.algorithm_name
- }, 100)
- }
- }
-})
-</script>
-
-<style scoped lang="scss">
-.rightContainer {
- position: absolute;
- top: 0;
- right: 0;
- height: calc(100% - 32px);
- z-index: 99;
- width: 324px;
-
- overflow: hidden;
- background: rgba(0, 0, 0, 0.51);
- backdrop-filter: blur(4px);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
-
- :deep(.el-textarea__inner) {
- background: transparent !important;
- color: #ffffff !important;
- }
-
- .contenttitle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 16px;
- color: #ffffff;
- margin-bottom: 20px;
- }
-
- .centerBox {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
-
- .itemRow {
- margin-bottom: 35px;
- }
-
- .label {
- margin-bottom: 5px;
- }
- }
-
- .detailInfo {
- .infpItem {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #DFDFDF;
- margin-bottom: 23px;
-
- .num {
- span {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- }
-
- .totalQuantity {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- }
-
- .areaStyle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #FFFFFF;
-
- }
- }
-
- .itemData {
- width: 50%;
-
- }
- }
- }
-
- .btnGroups {
- display: flex;
- justify-content: center;
- position: absolute;
- bottom: 59px;
- left: 0;
- right: 0;
-
- img {
- width: 125px;
- height: 39px;
- cursor: pointer;
- }
- }
-}
-
-.filter-item {
- margin-bottom: 12px;
-}
-</style>
diff --git a/applications/drone-command/src/views/layerManagement/components/leftList.vue b/applications/drone-command/src/views/layerManagement/components/leftList.vue
deleted file mode 100644
index 8917ac1..0000000
--- a/applications/drone-command/src/views/layerManagement/components/leftList.vue
+++ /dev/null
@@ -1,588 +0,0 @@
-<template>
- <div class="table-overlay">
- <div class="searchBox">
- <el-input
- class="command-layer-input inputName"
- v-model="formData.dkbh"
- placeholder="输入名称模糊搜索"
- ></el-input>
- <div class="searchAndReset">
- <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
- <el-button class="command-button" icon="el-icon-refresh" @click="reset">重置</el-button>
- </div>
- </div>
- <div class="btnGroups">
- <el-button v-if="activeName !== '国土空间规划'" class="command-button" @click="addFence">{{
- props.activeName === '自定义识别区' ? '新增识别区' : '新增禁飞区'
- }}</el-button>
- <el-button v-if="activeName !== '国土空间规划'" class="command-button" @click="addFolder"
- >新增文件夹</el-button
- >
- <el-upload
- v-if="activeName === '国土空间规划'"
- action="#"
- :show-file-list="false"
- :before-upload="e => uploadFlightFile(e, '1')"
- accept=".zip"
- >
- <el-button class="command-button"> 上传 </el-button>
- </el-upload>
-
- <!-- <template v-if="activeName === '自定义禁飞区'">
- <template v-if="failuresInfo.length">
- <el-button class="command-button" @click="synchronize"> 继续同步 </el-button>
- <el-button class="command-button" @click="failuresDel"> 取消同步 </el-button>
- </template>
- <el-button v-else class="command-button" @click="synchronize"> 同步 </el-button>
- </template> -->
-
- <!-- <el-button class="command-button" @click="selectAll">全选</el-button> -->
- <el-button class="command-button" @click="selectAll">
- {{ checkedKeys.length === getAllFenceKeys().length ? '取消全选' : '全选' }}
-</el-button>
- </div>
- <div
- class="tableListBox"
- v-loading="loading"
- element-loading-background="rgba(0, 0, 0, 0.2)"
- element-loading-text="加载中..."
- >
- <el-tree
- class="command-el-tree"
- :class="{ isTheTerritory: activeName === '国土空间规划' }"
- ref="treeRef"
- v-model="checkedKeys"
- :data="treeData"
- show-checkbox
- node-key="id"
- default-expand-all
- :expand-on-click-node="false"
- :check-on-click-node="true"
- :filter-node-method="filterNode"
- highlight-current
- @check="handleCheck"
- :current-node-key="currentNodeKey"
- @node-click="handleNodeClick"
- :props="{
- label: 'name',
- children: 'children',
- }"
- >
- <!-- 自定义节点内容 -->
- <template #default="{ node }">
- <div class="tree-node" >
- <!-- 节点名称 -->
- <span class="nodeName" >{{ node.label }}</span>
- <!-- 操作按钮组 -->
- <div class="tree-node-actions" >
- <!-- <el-button
- link
- icon="el-icon-location"
- @click.stop="handleLocation(node)"
- :disabled="node.data.level === 2 && (!node.data.children || node.data.children.length === 0)"
- class="location-btn"
- ></el-button> -->
- <el-button icon="el-icon-edit" link @click.stop="handleEdit(node)"></el-button>
- <el-button icon="el-icon-delete" :class="isDisabledColor ? 'location-btn' : ''" link @click.stop="handleDelete(node)"
- :disabled="!!formData.dkbh.trim() && node.data.level === 2 && props.activeName !== '国土空间规划' && (
- filteredShowNodeIds.has(node.data.id) || isNodeOrChildrenMatch(node.data, formData.dkbh.trim())
- )"></el-button>
- </div>
- </div>
- </template>
- </el-tree>
- </div>
- </div>
-</template>
-
-<script setup>
-import { ElMessage, ElMessageBox } from 'element-plus';
-import {
- treeDataApi,
- deleteFenceApi,
- deleteFolderApi,
- spatialPlanningApi,
- failuresListApi,
- failuresDelApi,
- areasUpdateApi,
-} from '@/api/layer/index';
-import { inject, nextTick, onMounted, watch } from 'vue';
-const emit = defineEmits(['update:coverData', 'update:deitData', 'newFencesMethods']);
-import EventBus from '@/utils/eventBus';
-const coverData = ref();
-const layerParams = inject('layerParams');
-const checkedKeys = ref([]); // 存储勾选的节点key
-const treeRef = ref(null); // 获取tree实例
-const checkedNodes = ref([]); // 存储勾选的节点数据
-const props = defineProps(['activeName','resetCheck']);
-const formData = ref({
- isPush: undefined,
- page: 1,
- isGenerated: undefined,
- pageSize: 17,
- dkbh: '',
- patchesName: '',
-});
-const loading = ref(true);
-const treeData = ref([]);
-const treeAllData = ref([]);
-// 存储过滤后显示的节点ID（返回true的节点）
-const filteredShowNodeIds = ref(new Set());
-const isDisabledColor = ref(false)
-// 存储当前选中节点的key
-const currentNodeKey = ref(null);
-// 节点点击事件：切换选中/取消选中
-const handleNodeClick = (nodeData, node) => {
- // 如果点击的是已经高亮的节点，则取消高亮
- if (!node.checked) {
- treeRef.value?.setCurrentKey(null);
- }
-};
-// 获取数据
-const gettreeDataApi = async () => {
- try {
- loading.value = true;
- const res = await treeDataApi({filterExpired:false});
- treeAllData.value = res.data.data;
- // 加载数据后立即清空标记
- filteredShowNodeIds.value.clear();
- if(coverData.value.length===0){
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- nextTick(() => {
- if (treeRef.value) {
- treeRef.value.setCheckedKeys([]);
- }
- });
- }
-
- setupWatch();
- } catch (error) {
- console.error('获取数据失败:', error);
- } finally {
- loading.value = false;
- }
-};
-
-const setupWatch = () => {
- watch(
- () => props.activeName,
- newVal => {
- const matchedCategory = treeAllData.value.find(item => item.name === newVal);
- treeData.value = matchedCategory.children;
- nextTick(search);
- if (treeData.value && treeData.value.length > 0) {
- const folderNode = treeData.value[0];
- // 赋值给 layerParams
- layerParams.value.total_count = folderNode.total_count ? folderNode.total_count : 0;
- layerParams.value.total_area = folderNode.total_area ? folderNode.total_area : 0;
- }
- },
- { immediate: true }
- );
-};
-const handleCheck = (checkedNodesData, checkedKeysData) => {
-layerParams.value.isSingleLocating = false
- const filteredNodes = checkedKeysData.checkedNodes.filter(node => node.level === 3);
- checkedNodes.value = filteredNodes
- checkedKeys.value = filteredNodes.map(node => node.id);
- coverData.value = filteredNodes;
- emit('update:coverData', coverData.value);
-};
-// 全选方法
-const getAllFenceKeys = () => {
- return treeData.value.flatMap(
- folder => folder.children.map(fence => fence.id)
- );
-};
-const selectAll = () => {
- currentNodeKey.value = null;
- layerParams.value.currentLocationFolderId = null;
-layerParams.value.isSingleLocating = false
- // 清除高亮
- currentNodeKey.value = null;
- treeRef.value?.setCurrentKey(null);
- if (treeRef.value) {
- const allFenceKeys = getAllFenceKeys();
- const allFenceNodes = treeData.value.flatMap(folder => folder.children);
- if (checkedKeys.value.length === allFenceKeys.length) {
- // 取消全选
- treeRef.value.setCheckedKeys([]);
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- emit('update:coverData', coverData.value);
- } else {
- // 全选
- treeRef.value.setCheckedKeys(allFenceKeys);
- checkedKeys.value = allFenceKeys;
- checkedNodes.value = allFenceNodes;
- coverData.value = allFenceNodes;
- emit('update:coverData', coverData.value);
-
- }
-
- }
-};
-// 定位按钮事件
-const handleLocation = node => {
- const currentKey = treeRef.value.getCurrentKey();
- if (currentKey === node.data.id) {
- treeRef.value.setCurrentKey(null); // 取消高亮
- } else {
- treeRef.value.setCurrentKey(node.data.id); // 高亮当前节点
- }
- if (node.data.level === 2) {
- layerParams.value.isSingleLocating = false;
- // 新增：标记当前定位的文件夹ID
- layerParams.value.currentLocationFolderId = node.data.id;
- } else if (node.data.level === 3) {
- layerParams.value.isSingleLocating = true;
- // 清空文件夹定位标识
- layerParams.value.currentLocationFolderId = null;
- }
-
- const currentCheckedKeys = [...checkedKeys.value];
- const currentCheckedNodes = [...checkedNodes.value];
- EventBus.emit('focusOnNode', node.data);
- if (node.data.level === 2) {
- const folderChildren = node.data.children || [];
- const childrenIds = folderChildren.map(child => child.id);
- const newChildrenIds = childrenIds.filter(id => !currentCheckedKeys.includes(id));
- const newChildrenNodes = folderChildren.filter(child => newChildrenIds.includes(child.id));
-
- const newCheckedKeys = [...new Set([...currentCheckedKeys, ...newChildrenIds])];
- const newCheckedNodes = [...currentCheckedNodes, ...newChildrenNodes];
-
- treeRef.value.setCheckedKeys(newCheckedKeys);
- checkedKeys.value = newCheckedKeys;
- checkedNodes.value = newCheckedNodes;
- coverData.value = newCheckedNodes;
- emit('update:coverData', coverData.value);
- } else if (!currentCheckedKeys.includes(node.data.id)) {
- layerParams.value.isSingleLocating = true;
- currentCheckedKeys.push(node.data.id);
- currentCheckedNodes.push(node.data);
- treeRef.value.setCheckedKeys(currentCheckedKeys);
- checkedKeys.value = currentCheckedKeys;
- checkedNodes.value = currentCheckedNodes;
- coverData.value = currentCheckedNodes;
- emit('update:coverData', coverData.value);
- }
-};
-// 编辑按钮事件
-const handleEdit = node => {
- if (node.data.level == 2) {
- layerParams.value.editFolder = true;
- layerParams.value.addAnEditingFolder = 2;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fileType = 1;
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fileType = 2;
- }
- emit('update:editFolder', node.data);
- } else if (node.data.level === 3) {
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- layerParams.value.editNest = true;
- layerParams.value.decideWhetherToAddOrEdit = 2;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fenceType = 1; // 电子围栏类型标识
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
- }
- emit('update:deitData', node.data);
- }
-};
-
-// 删除按钮事件
-const handleDelete = node => {
-
- let id = node.data.id;
- ElMessageBox.confirm('确定要删除该内容吗？', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- })
- .then(() => {
- if (node.data.level === 2) {
- // 删除文件夹
- deleteFolderApi(id).then(res => {
- ElMessage.success('删除成功');
- gettreeDataApi();
- EventBus.emit('deleteMapEntitiesByFolderId', id);
- });
- } else if (node.data.level === 3) {
- // 删除单个围栏/禁飞区
- deleteFenceApi(id).then(res => {
- ElMessage.success('删除成功');
- gettreeDataApi();
- EventBus.emit('deleteMapEntityById', id);
- });
- }
- })
- .catch(() => {
-
- });
-};
-// 新增围栏
-const addFence = () => {
- layerParams.value.addNest = true;
- layerParams.value.decideWhetherToAddOrEdit = 1;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fenceType = 1; // 电子围栏类型标识
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fenceType = 2; // 自定义禁飞区类型标识
- }
- emit('newFencesMethods');
-};
-// 新增文件夹
-const addFolder = () => {
- layerParams.value.addFolder = true;
- layerParams.value.addAnEditingFolder = 1;
- if (props.activeName === '自定义识别区') {
- layerParams.value.fileType = 1;
- } else if (props.activeName === '自定义禁飞区') {
- layerParams.value.fileType = 2;
- }
-};
-function uploadFlightFile(file, t) {
- const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
- if (!['zip'].includes(fileSuffix)) {
- return ElMessage.error('请上传zip格式的文件');
- }
- let data = new FormData();
- const params = {
- file: file,
- fileName: file.name,
- };
- Object.keys(params).forEach(key => {
- data.append(key, params[key]);
- });
- spatialPlanningApi(data).then(res => {
- ElMessage.success('上传成功');
- gettreeDataApi();
- });
-}
-
-function search() {
- const keyword = formData.value.dkbh.trim();
- // 有搜索词时才过滤，无则清空标记
- if (keyword) {
- treeRef.value?.filter(keyword);
- isDisabledColor.value = true
- } else {
- filteredShowNodeIds.value.clear();
- treeRef.value?.filter('');
- }
-}
-function reset() {
- isDisabledColor.value = false
- formData.value.dkbh = '';
- filteredShowNodeIds.value.clear();
- nextTick(() => {
- treeRef.value?.filter('');
- });
-}
-const isNodeOrChildrenMatch = (nodeData, keyword) => {
- // 无关键词时直接返回false
- if (!keyword || keyword.trim() === '') return false;
- // 自身包含关键词
- if (nodeData.name.includes(keyword)) return true;
- // 遍历子节点，判断是否有子节点包含
- if (nodeData.children && nodeData.children.length) {
- return nodeData.children.some(child => isNodeOrChildrenMatch(child, keyword));
- }
- return false;
-};
-function filterNode(value, data) {
- let isShow = false;
- const keyword = value?.trim() || '';
-
- if (props.activeName === '国土空间规划') {
- if (!keyword) {
- isShow = data.level === 2 || data.level === 1;
- } else {
- isShow = (data.level === 2 || data.level === 1) && data.name.includes(keyword);
- }
- } else {
- if (!keyword) {
- isShow = true;
- } else {
- // 非国土空间规划：节点自身/子节点匹配则显示
- isShow = isNodeOrChildrenMatch(data, keyword);
- }
- }
- // 仅当有搜索词时，才更新标记（无搜索词清空）
- if (keyword) {
- if (isShow && data.id) {
- filteredShowNodeIds.value.add(data.id);
- } else if (data.id) {
- filteredShowNodeIds.value.delete(data.id);
- }
- } else {
- filteredShowNodeIds.value.clear();
- }
-
- return isShow;
-}
-
-// 同步信息
-const failuresInfo = ref([]);
-function failuresList() {
- failuresListApi().then(res => {
- failuresInfo.value = res.data.data || [];
- });
-}
-
-// 同步
-function synchronize() {
- const data = failuresInfo.value.map(item => item.device_sn);
- areasUpdateApi(data).then(res => {
- if (res.data.data.length) {
- let stringVal = res.data.data.reduce((acc, cur) => {
- return acc + cur.nickname + '(' + cur.reason + ')' + '，';
- }, '');
- stringVal = stringVal.slice(0, -1);
- ElMessageBox.alert(stringVal, '同步失败', {
- confirmButtonText: '确定',
- });
- } else {
- ElMessage.success('同步成功');
- }
- });
-}
-
-// 取消同步
-function failuresDel() {
- failuresDelApi().then(res => {
- ElMessage.success('取消同步成功');
- });
-}
-// 切换tab清空复选框的数据
-watch(
- () => props.resetCheck,
- (newVal) => {
- if (newVal !== undefined) {
- checkedKeys.value = [];
- checkedNodes.value = [];
- coverData.value = [];
- treeRef.value?.setCheckedKeys([]);
- }
- },
- { immediate: true }
-);
-onMounted(() => {
- failuresList();
- gettreeDataApi();
- EventBus.on('gettreeDataApi', gettreeDataApi);
-});
-onBeforeUnmount(() => {
- EventBus.off('gettreeDataApi', gettreeDataApi);
-});
-</script>
-
-<style scoped lang="scss">
-.table-overlay {
- position: absolute;
- top: 0;
- left: 0;
-height: calc(100% - 32px);
- z-index: 99;
- width: 332px;
- overflow: hidden;
- background: rgba(0,0,0,0.51);
- backdrop-filter: blur(4px);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 0 16px 12px;
- display: flex;
- flex-direction: column;
-}
-
-.searchBox {
- display: flex;
- margin-top: 10px;
-padding-right: 12px;
- .inputName {
- width: 140px;
- height: 32px;
- }
- .searchAndReset {
- width: 182px;
- display: flex;
- justify-content: right;
- align-items: center;
- margin-right: 10px;
-
- }
-}
-.btnGroups {
- margin: 12px 0 14px 0;
- display: flex;
- gap: 0 10px;
-padding-right: 12px;
- .el-button {
- margin: 0 !important;
- }
-}
-.tableListBox {
- overflow-y: scroll;
- height: 0;
- flex-grow: 1;
- // padding-right: 12px;
- :deep(.el-tree-node__content) {
- height: 45px !important;
- line-height: 45px !important;
- // padding-left: 0 !important;
- border-bottom: 1px dotted rgba(255,255,255,0.1);
- }
- // 定位选中节点的背景色样式
- ::v-deep(.el-tree-node.is-current > .el-tree-node__content) {
- background-color: rgba(64, 158, 255, 0.2) !important; // 浅蓝色半透明背景
- }
- .isTheTerritory {
- :deep() {
- .el-tree-node__expand-icon {
- visibility: hidden;
- }
- }
- }
-
- :deep() {
- .el-checkbox {
- --el-checkbox-bg-color: transparent !important;
- }
- }
- .tree-node {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-right: 12px;
- width: 100%;
- .nodeName {
- font-size: 12px !important;
- }
- }
-
- .tree-node-actions {
- display: flex;
- // gap: 8px;
-
- button {
- padding: 0;
- color: #fff;
- width: 17px;
- height: 17px;
- // color: #409eff;
- // &:hover {
- // color: #409eff;
- // }
- }
- }
- ::v-deep(.location-btn.el-button.is-link.is-disabled) {
- color: #999 !important;
-}
-}
-</style>
diff --git a/applications/drone-command/src/views/layerManagement/components/nationalSpatialPlanning.vue b/applications/drone-command/src/views/layerManagement/components/nationalSpatialPlanning.vue
deleted file mode 100644
index f11522c..0000000
--- a/applications/drone-command/src/views/layerManagement/components/nationalSpatialPlanning.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
- <div class="spLeft">
- <div class="input-search">
- <el-input placeholder="请输入关键字" clearable></el-input>
- <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
- <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
- </div>
- </div>
- <div class="spRight"></div>
-</template>
-
-<script setup>
-
-function handleSearch() {}
-function handleReset() {}
-</script>
-
-<style scoped lang="scss">
-.spLeft {
- position: absolute;
- top: 0;
- left: 0;
- height: 95%;
- z-index: 99;
- width: 392px;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
- .input-search {
- display: flex;
- .el-input {
- margin-right: 10px;
- }
- }
-}
-.spRight {
- position: absolute;
- top: 0;
- right: 0;
- height: 95%;
- z-index: 99;
- width: 324px;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.8);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
-}
-</style>
\ No newline at end of file
diff --git a/applications/drone-command/src/views/layerManagement/components/rightEdit.vue b/applications/drone-command/src/views/layerManagement/components/rightEdit.vue
deleted file mode 100644
index 8de4ccd..0000000
--- a/applications/drone-command/src/views/layerManagement/components/rightEdit.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<template>
- <div class="rightContainer" >
- <div class="contenttitle">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}信息</div>
- <div class="centerBox">
- <div class="itemRow">
- <div class="label">文件夹名称</div>
- <div>
- <el-select
- :disabled="isDisabled"
- class="command-layer-search"
- clearable
- v-model="formData.folder_id"
- placeholder="请选择"
- >
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- </div>
- <div class="itemRow">
- <div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}名称</div>
- <div>
- <el-input
- :disabled="isDisabled"
- class="command-layer-input inputName"
- v-model="formData.name"
- placeholder="请输入"
- />
- </div>
- </div>
- <div class="itemRow" v-if="layerParams.fenceType === 2">
- <div class="label">禁飞区管控时间</div>
- <div>
- <!-- popper-class="command-layer-date-picker-popper " -->
- <el-date-picker
- :disabled="isDisabled"
- class="command-layer-date-picker"
- v-model="timeValue"
- type="datetimerange"
- format="YYYY-MM-DD HH:mm"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :disabled-date="disabledDate"
- />
- </div>
- </div>
- <div class="itemRow">
- <div class="label">{{ layerParams.fenceType === 1 ? '识别区' : '禁飞区' }}备注</div>
- <div>
- <el-input
- :disabled="isDisabled"
- v-model="formData.description"
- :rows="5"
- type="textarea"
- placeholder="请输入"
- />
- </div>
- </div>
- </div>
- <div class="detailInfo">
- <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1">
- <div class="itemData">
- <div class="title">识别区面积</div>
- <div class="num">
- <span class="areaStyle">{{ dataUnitConversion(fenceArea).val }}</span> {{
- dataUnitConversion(fenceArea).unit }}
- </div>
- </div>
- <div class="itemData">
- <div class="title">创建人</div>
- <div class="num">
- <span>{{ formData?.create_name }}</span>
- </div>
- </div>
- </div>
- <div class="infpItem" v-if="layerParams.fenceType === 2">
- <div class="itemData" v-if="layerParams.editNest && layerParams.fenceType === 2">
- <div class="title">禁飞区面积</div>
- <div class="num">
- <span class="areaStyle">{{ dataUnitConversion(fenceArea).val }}</span> {{
- dataUnitConversion(fenceArea).unit }}
- </div>
- </div>
- <div class="itemData">
- <div class="title">禁飞区高度</div>
- <div class="num noFly">
- <span
- ><el-input
- :disabled="isDisabled"
- class="command-layer-input inputName"
- v-model="formData.altitude"
- placeholder="请输入"
- /></span>
- 米
- </div>
- </div>
- </div>
- <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 2">
- <div class="itemData">
- <div class="title">创建时间</div>
- <div class="num">
- <span>{{ formData?.create_time }}</span>
- </div>
- </div>
- <div class="itemData">
- <div class="title">创建人</div>
- <div class="num">
- <span>{{ formData?.create_name }}</span>
- </div>
- </div>
- </div>
- <div class="infpItem" v-if="layerParams.editNest && layerParams.fenceType === 1">
- <div class="itemData">
- <div class="title">创建时间</div>
- <div class="num">
- <span>{{ formData?.create_time }}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="btnGroups">
- <img v-if="!layerParams.editingIsProhibited && layerParams.fenceArea / 1000000 > 50" src="/src/assets/images/layerManagement/disabled.svg" alt="" />
- <img v-if="!layerParams.editingIsProhibited && layerParams.fenceArea / 1000000 < 50" src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" />
- <img v-if="layerParams.editingIsProhibited" src="/src/assets/images/layerManagement/closeBtn.svg" @click="cancelHandel" alt="" />
- <img v-else src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" />
-
- </div>
- </div>
-</template>
-
-<script setup>
- import {dataUnitConversion} from '@ztzf/utils'
-import { ElMessage } from 'element-plus';
-import dayjs from 'dayjs';
-import { deitFenceApi, addFenceApi } from '@/api/layer/index';
-import EventBus from '@/utils/eventBus';
-const emit = defineEmits(['callParentMethod','update:loading']);
-const layerParams = inject('layerParams');
-const options = ref([]);
-const timeValue = ref('');
-options.value = layerParams.value.folderOption;
-const formData = ref({
- folder_id: '',
- name: '',
- description: '',
- is_enabled: false,
- area: '',
- altitude: '',
- control_start_time: '',
- control_end_time: '',
- geo_data: '',
-
-});
-const loading = ref(true);
-const detailData = ref(null);
-const fenceArea = ref(0);
-detailData.value = layerParams.value.editDetailData;
-fenceArea.value = layerParams.value.fenceArea;
-const isDisabled = computed(() => {
- return layerParams.value.editingIsProhibited;
-});
-// 禁用当天之前的日期
-const disabledDate = time => {
- return time.getTime() < Date.now() - 8.64e7 // 86400000 = 24 * 60 * 60 * 1000
-}
-watch(
- () => layerParams.value.fenceArea,
- newArea => {
- if (newArea !== undefined && newArea !== null) {
- if (newArea / 1000000 < 50) {
- fenceArea.value = newArea;
- formData.value.area = newArea;
- }
- }
- },
- { immediate: true }
-);
-// 监听editDetailData的变化
-watch(
- () => layerParams.value.editDetailData,
- newVal => {
- if (newVal && layerParams.value.editingIsProhibited) {
- // 当editDetailData有值时，填充表单
- formData.value = {
- ...formData.value,
- folder_id: newVal.folder_id || '',
- name: newVal.name || '',
- description: newVal.description || '',
- is_enabled: newVal.is_enabled || false,
- area: newVal.area || '',
- altitude: newVal.altitude || '',
- control_start_time: newVal.control_start_time || '',
- control_end_time: newVal.control_end_time || '',
- geo_data: newVal.geo_data || '',
- create_name: newVal.create_name || '',
- create_time: newVal.create_time ? dayjs(newVal.create_time).format('YYYY年MM月DD日') : '',
- };
-
- // 处理文件夹选择
- if (newVal.folder_id && options.value.length > 0) {
- const matchedFolder = options.value.find(item => item.value === String(newVal.folder_id));
- if (matchedFolder) {
- formData.value.folder_id = matchedFolder.value;
- }
- }
-
- // 处理时间选择
- if (newVal.control_start_time && newVal.control_end_time) {
- timeValue.value = [
- dayjs(newVal.control_start_time).toDate(),
- dayjs(newVal.control_end_time).toDate(),
- ];
- }
- }
- },
- { immediate: true, deep: true }
-);
-watch(
- () => timeValue.value,
- newTimeArr => {
- if (Array.isArray(newTimeArr) && newTimeArr.length === 2) {
- const startTime = newTimeArr[0];
- const endTime = newTimeArr[1];
- formData.value.control_start_time = dayjs(startTime).format('YYYY-MM-DD HH:mm:ss');
- formData.value.control_end_time = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss');
- } else {
- formData.value.control_start_time = '';
- formData.value.control_end_time = '';
- }
- },
- { immediate: true }
-);
-const clearAllData = () => {
- detailData.value = {};
- layerParams.value.decideWhetherToAddOrEdit = 1;
- // 重置面板状态和缓存数据
- layerParams.value.addNest = false;
- layerParams.value.editNest = false;
- layerParams.value.editDetailData = null;
- layerParams.value.polygonPosition = null;
- layerParams.value.editingIsProhibited = false;
-};
-const cancelHandel = () => {
-loading.value = false
- emit('update:loading', false);
- clearAllData();
- emit('callParentMethod');
- EventBus.emit('gettreeDataApi');
-};
-const submitHandle = () => {
-if(layerParams.value.crossSurface){
- return ElMessage.warning('测区不支持交叉面')
-}
- if (!formData.value.folder_id) {
- ElMessage.error('请选择文件夹');
- return;
- }
- if (!formData.value.name) {
- ElMessage.error('请输入名称');
- return;
- }
- if (!formData.value.altitude && layerParams.value.fenceType === 2) {
- ElMessage.error('请输入高度');
- return;
- }
- if (fenceArea.value === 0) {
- ElMessage.error('请绘制区域');
- return;
- }
- loading.value = true
- emit('update:loading', true);
- const params = {
- folder_id: formData.value.folder_id,
- name: formData.value.name,
- description: formData.value.description,
- is_enabled: true,
- area: formData.value.area,
- altitude: formData.value.altitude,
- geo_data: layerParams.value.polygonPosition
- ? layerParams.value.polygonPosition
- : formData.value.geo_data,
- control_start_time: formData.value.control_start_time,
- control_end_time: formData.value.control_end_time,
- };
- // 如果是编辑模式，才添加 id
- if (layerParams.value.decideWhetherToAddOrEdit === 2) {
- params.id = detailData.value.id;
- }
- if (layerParams.value.decideWhetherToAddOrEdit === 1) {
- //围栏新增
- addFenceApi(params)
- .then(res => {
- if(res.data.code ===0 ){
- ElMessage.success('新增成功');
- EventBus.emit('gettreeDataApi');
- loading.value = false;
- emit('update:loading', false);
- clearAllData();
- emit('callParentMethod');
- }
- })
- .catch(err => {
- ElMessage.error('新增失败，请重试');
- })
- .finally(() => {
- loading.value = false;
- emit('update:loading', false);
- });
- } else if (layerParams.value.decideWhetherToAddOrEdit === 2) {
- //围栏编辑
- deitFenceApi(params)
- .then(res => {
- if(res.data.code === 0){
- ElMessage.success('编辑成功');
- EventBus.emit('gettreeDataApi');
- clearAllData();
- emit('callParentMethod');
- loading.value = false;
- emit('update:loading', false);
- }
- })
- .catch(err => {
- ElMessage.error('编辑失败，请重试');
- })
- .finally(() => {
- loading.value = false;
- emit('update:loading', false);
- });
- }
-};
-onMounted(() => {
- // 获取判断状态（默认设为 1）
- const addOrEditStatus = layerParams.value.decideWhetherToAddOrEdit || 1;
- if (addOrEditStatus === 2) {
- // 编辑状态：回显数据
- const editData = layerParams.value.editDetailData || {};
- formData.value = {
- folder_id: editData.folder_id || '',
- name: editData.name || '',
- description: editData.description || '',
- is_enabled: editData.is_enabled || false,
- area: editData.area || '',
- altitude: editData.altitude || '',
- control_start_time: editData.control_start_time || '',
- control_end_time: editData.control_end_time || '',
- geo_data: editData.geo_data || '',
- create_name: editData.create_name,
- create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
- };
- if (editData.folder_id && options.value.length > 0) {
- const matchedFolder = options.value.find(item => item.value === String(editData.folder_id));
- if (matchedFolder) {
- formData.value.folder_id = matchedFolder.value;
- }
- }
- if (editData.control_start_time && editData.control_end_time) {
- timeValue.value = [
- dayjs(editData.control_start_time).toDate(),
- dayjs(editData.control_end_time).toDate(),
- ];
- }
- fenceArea.value = editData.area || 0;
- }
-});
-</script>
-
-<style scoped lang="scss">
-.rightContainer {
- position: absolute;
- top: 0;
- right: 0;
-height: calc(100% - 32px);
- z-index: 99;
- width: 324px;
-
- overflow: hidden;
- background: rgba(0,0,0,0.51);
- backdrop-filter: blur(4px);
- border-radius: 8px 8px 8px 8px;
- padding: 16px 12px;
-:deep(.el-select__wrapper.is-disabled .el-select__selected-item){
-color: rgba(255,255,255,0.37) !important;
-}
- :deep(.el-textarea__inner) {
- background: transparent !important;
- color: #ffffff;
- }
- :deep(.el-textarea.is-disabled .el-textarea__inner){
- color: var(--el-disabled-text-color) !important;
-
-}
- .contenttitle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 16px;
- color: #ffffff;
- margin-bottom: 20px;
- }
- .centerBox {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #ffffff;
- .itemRow {
- margin-bottom: 35px;
- }
- .label {
- margin-bottom: 5px;
- }
- :deep(.el-date-editor.el-input__wrapper) {
- width: auto !important;
- background: transparent !important;
- }
- :deep(.el-range-editor.is-disabled input) {
- background-color: transparent !important;
- }
- }
- .detailInfo {
- .infpItem {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #dfdfdf;
- margin-bottom: 23px;
- .num {
- span {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- }
- .areaStyle {
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #ffffff;
- }
- }
- .noFly {
- display: flex;
- align-items: center;
- }
- .itemData {
- width: 50%;
- }
- }
- }
- .btnGroups {
- display: flex;
- justify-content: center;
- position: absolute;
- bottom: 29px;
- left: 0;
- right: 0;
- img {
- width: 125px;
- height: 39px;
- cursor: pointer;
- }
-
- }
-}
-</style>
diff --git a/applications/drone-command/src/views/layerManagement/components/utils.js b/applications/drone-command/src/views/layerManagement/components/utils.js
deleted file mode 100644
index 458b5a7..0000000
--- a/applications/drone-command/src/views/layerManagement/components/utils.js
+++ /dev/null
@@ -1,619 +0,0 @@
-import * as Cesium from 'cesium'
-import _, { cloneDeep, throttle } from 'lodash'
-import * as turf from '@turf/turf'
-import { boxTransformScale } from '@/utils/turfFunc'
-
-/**
- * 多边形绘制与编辑工具类
- * 功能：
- * - 绘制多边形
- * - 拖动编辑端点
- * - 删除端点、删除整个多边形
- * - 多边形自交检查（避免非法几何）
- * - 外部订阅/通知机制
- */
-export class DrawPolygon {
- constructor() {
- // 是否绘制
- this.whetherToDraw =false
- // 图斑预览模式标记
- this.isPureSpotPreview = false
- // 是否删除测区
- this.isDeleteTheArea = true
- //是否可以编辑图斑
- this.isPreviewMode = true
- // Cesium 视图对象
- this.viewer = null
- // 当前绘制的多边形
- this.curPolygon = null
- // 绘制模式标识
- this.drawingMode = false
- // 编辑模式标识
- this.editingMode = false
- // 是否正在拖拽端点
- this.isDragging = false
- // 当前拖拽的点实体
- this.draggedEntity = null
- // 多边形实体
- this.polygonEntity = null
- // 存储端点的 DataSource
- this.editPolygonDataSource = null
- this.editPolygonPointDataSource = null
- // 鼠标事件处理器
- this.handler = null
- // 右键菜单 DOM
- this.menuPopup = null
- // 被右键选中的点
- this.delPolygonPoint = null
- // 是否显示警告提示（自交）
- this.isShowWaringTip = false
- // 当前拖拽点是否合法
- this.currentDragPointIsValid = false
- // 当前拖拽点的坐标
- this.currentDragPointPosition = null
-
- // 事件回调函数绑定 this
- this.handleLeftDown = this.handleLeftDown.bind(this)
- this.handleLeftUp = this.handleLeftUp.bind(this)
- this.handleMouseMove = this.handleMouseMove.bind(this)
- this.handleLeftClick = this.handleLeftClick.bind(this)
- this.handleRightClick = this.handleRightClick.bind(this)
-
- this.delPolygon = this.delPolygon.bind(this)
- this.delPoint = this.delPoint.bind(this)
- // 外部订阅者
- this.listeners = []
-
- }
-
- // 实体命名常量
- static ENTITY_NAMES = {
- POLYGON: '区域-面',
- POINT: '区域-端点',
- POLYGON_ID: 'planar-route-polygon',
- POINT_ID_PREFIX: 'planar-route-point',
- }
-
- // 颜色常量
- static COLORS = {
- DEFAULT_POLYGON: Cesium.Color.fromBytes(45, 140, 240, 99), // 默认面颜色
- DEFAULT_LINE: Cesium.Color.fromBytes(45, 140, 240, 255), // 默认边界线颜色
- ERROR_POLYGON: Cesium.Color.fromCssColorString('rgba(255, 0, 0, .3)'), // 错误（自交）面颜色
- ERROR_LINE: Cesium.Color.fromCssColorString('rgba(255, 0, 0, 1)'), // 错误（自交）线颜色
- }
-
- // ============ 发布订阅机制 ============
-
- // 外部订阅数据变化
- subscribe(key, listener) {
- this.listeners.push({ key, listener })
- }
-
- // 通知订阅者
- notify(key, data) {
- this.listeners.filter(subscriber => subscriber.key === key).forEach(subscriber => subscriber.listener(data))
- }
-
- // ============ 绘制相关 ============
- // 编辑图斑
- editThePatch(data) {
- this.isPreviewMode = data
- }
- // 绘制
- drawTheArea(data){
- this.whetherToDraw = data
- }
- // 删除测区
- deleteTheArea(data) {
- this.isDeleteTheArea = data
- }
-
- // 开始绘制
- startDrawing() {
- if (!this.whetherToDraw) {
-
- return;
- }
-
-
- this.drawingMode = true
- this.curPolygon = new Cesium.PolygonHierarchy()
-
- // 如果还没有 DataSource，就新建一个
- if (!this.editPolygonDataSource) {
- this.editPolygonDataSource = new Cesium.CustomDataSource('editPolygonDataSource')
- this.viewer?.dataSources.add(this.editPolygonDataSource)
- }
-
- if (!this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource = new Cesium.CustomDataSource('editPolygonPointDataSource')
- this.viewer?.dataSources.add(this.editPolygonPointDataSource)
- }
-
- // 清空之前的点
- this.editPolygonDataSource?.entities.removeAll()
- this.editPolygonPointDataSource?.entities.removeAll()
- }
-
- // 创建多边形实体（含边界线）
- createPolygonEntity() {
- this.polygonEntity = this.editPolygonDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POLYGON,
- id: DrawPolygon.ENTITY_NAMES.POLYGON_ID,
- polygon: {
- hierarchy: new Cesium.CallbackProperty(() => this.curPolygon, false),
- material: DrawPolygon.COLORS.DEFAULT_POLYGON,
- outline: false,
- outlineWidth: 2,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- },
- polyline: {
- width: 2,
- material: DrawPolygon.COLORS.DEFAULT_LINE,
- clampToGround: true,
- positions: new Cesium.CallbackProperty(
- () => [...this.curPolygon.positions, this.curPolygon.positions[0]], // 闭合线
- false
- ),
- },
- })
- }
-
- // 创建端点实体
- createPointEntity(position, isAdd) {
- const pointIndex = isAdd ? this.curPolygon.positions.length - 2 : this.curPolygon.positions.length - 1
-
- this.editPolygonPointDataSource.entities.add({
- name: DrawPolygon.ENTITY_NAMES.POINT,
- id: `${DrawPolygon.ENTITY_NAMES.POINT_ID_PREFIX}${pointIndex}`,
- position: position.clone(),
- point: {
- pixelSize: 14,
- color: Cesium.Color.WHITE,
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
- disableDepthTestDistance: Number.POSITIVE_INFINITY,
- },
- customData: {
- ind: pointIndex, // 索引记录
- },
- })
-
-
- }
-
- // 添加一个点
- addPosition(position, isAdd = true) {
- // 第一个点要重复压入一次，形成动态绘制效果
- if (this.curPolygon.positions.length === 0 && isAdd) {
- this.curPolygon.positions.push(position.clone())
- }
-
- this.curPolygon.positions.push(position.clone())
-
- // 如果没有实体则创建
- if (!this.polygonEntity) {
- this.createPolygonEntity()
- }
-
- // 创建端点实体
- if (this.isPreviewMode) {
- this.createPointEntity(position, isAdd)
- }
-
- this.notify('getPoints', position)
- }
-
- // ============ 鼠标事件 ============
-
- // 鼠标左键按下（选中端点拖动）
- handleLeftDown(movement) {
- if (!this.editingMode) return
-
- const pickedEntity = this.viewer.scene.pick(movement.position)?.id
- const isPoint = pickedEntity?.name === DrawPolygon.ENTITY_NAMES.POINT
-
- if (pickedEntity && isPoint) {
- this.isDragging = true
- this.draggedEntity = pickedEntity
- this.currentDragPointPosition = this.curPolygon.positions[this.draggedEntity?.customData.ind]
- this.disableMapControl() // 禁止地图交互
- }
- }
-
- // 鼠标左键抬起（拖拽结束）
- handleLeftUp() {
- if (!(this.editingMode && this.curPolygon?.positions && this.draggedEntity)) return
-
- if (this.currentDragPointIsValid && this.isDragging) {
- // 更新点位置
- this.draggedEntity.position = this.currentDragPointPosition
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = this.currentDragPointPosition
-
- // 校验多边形是否自交
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
-
- // 拖拽结束，恢复交互
- if (this.isDragging) {
- this.notify('getPolygonPositions', this.curPolygon.positions)
- this.isDragging = false
- this.draggedEntity = null
- this.enableMapControl()
- }
- }
-
- // 鼠标移动
- handleMouseMove(movement) {
- if (!this.drawingMode && !this.editingMode) return
-
- const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
- if (!cartesian) return
-
- // 编辑模式下，拖拽点实时更新
- if (this.editingMode && this.draggedEntity?.customData) {
- this.draggedEntity.position = cartesian
- this.curPolygon.positions[this.draggedEntity?.customData.ind] = cartesian
- }
-
- // 绘制模式下，实时更新最后一个点
- if (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 1) {
- this.curPolygon.positions.pop()
- this.curPolygon.positions.push(cartesian)
- }
-
- // 实时检查是否自交
- if (
- (this.editingMode && this.draggedEntity?.customData) ||
- (this.drawingMode && this.polygonEntity && this.curPolygon.positions.length >= 3)
- ) {
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- }
- }
-
- // 鼠标左键点击
- handleLeftClick(click) {
- this.removeMenuPopup()
- const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isPolygonPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- if (this.drawingMode && !this.whetherToDraw) {
-
- return; // 阻断后续绘制逻辑
- }
- // 如果不是绘制模式
- if (!this.drawingMode) {
- if (!isPolygon) {
-
-
- this.editingMode = false
- this.editPolygonPointDataSource.entities.show = false
- return
- }
-
- if (isPolygon) {
-
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
- }
- return
- }
-
- // 点击闭合多边形
- if (this.curPolygon.positions.length < 4 && isPolygonPoint) {
- return
- }
-
- if (this.curPolygon.positions.length >= 4 && isPolygonPoint) {
- if (!this.drawingMode) return
-
- this.finishDrawing()
- return
- }
-
- // 添加新的点
- const cartesian = this.viewer.scene.pickPosition(click.position)
- if (!cartesian) return
-
- this.addPosition(cartesian)
- }
-
- // 鼠标右键点击（弹出菜单）
- handleRightClick(click) {
- const that = this
- if (that.drawingMode) return
- that.removeMenuPopup()
-
- const pickedAllEntity = that.viewer.scene.drillPick(click.position).filter(i => i.id)
- const isPolygon = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POLYGON)
- const isEditPoint = pickedAllEntity.find(i => i.id.name === DrawPolygon.ENTITY_NAMES.POINT)
- const {
- position: { x, y },
- } = click
-
- let pickedEntity, tooltipEvent, menuType
- if (isPolygon) {
- pickedEntity = isPolygon
- tooltipEvent = that.delPolygon
- menuType = 'polygon'
-
- } else if (isEditPoint) {
- pickedEntity = isEditPoint
- tooltipEvent = that.delPoint
- menuType = 'edit-point'
-
- }
-
- if (pickedEntity && this.isDeleteTheArea) {
- that.delPolygonPoint = pickedEntity.id
- that.menuPopup = that.createMenuPopup(menuType)
- that.menuPopup.style.transform = `translate3d(${x - 10}px, ${y - 10}px, 0)`
- that.viewer.container.appendChild(that.menuPopup)
- that.menuPopup.addEventListener('click', tooltipEvent)
- }
- }
-
- // ============ 删除相关 ============
-
- // 删除所有实体
- removeEntities() {
- if (this.editPolygonDataSource) {
- this.editPolygonDataSource.entities.removeAll()
- this.editPolygonDataSource = null
- }
-
- if (this.editPolygonPointDataSource) {
- this.editPolygonPointDataSource.entities.removeAll()
- this.editPolygonPointDataSource = null
- }
- this.editingMode = false
- this.polygonEntity = null
- this.curPolygon = null
- }
-
- // 完成绘制
- finishDrawing() {
- this.curPolygon.positions.pop()
-
- if (this.curPolygon.positions.length >= 3) {
- this.drawingMode = false
- this.editingMode = true
- this.editPolygonPointDataSource.entities.show = true
-
- if (!this.curDragPointIsValid(this.curPolygon.positions)) {
- this.isShowWaringTip = true
- this.currentDragPointIsValid = true
- this.updatePolygonAppearance(DrawPolygon.COLORS.ERROR_POLYGON, DrawPolygon.COLORS.ERROR_LINE)
- } else {
- this.isShowWaringTip = false
- this.currentDragPointIsValid = false
- this.updatePolygonAppearance(DrawPolygon.COLORS.DEFAULT_POLYGON, DrawPolygon.COLORS.DEFAULT_LINE)
- }
-
- this.notify('getShowWaringTip', this.isShowWaringTip)
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
- }
-
- // 删除多边形
- delPolygon() {
- this.removeEntities()
- this.removeMenuPopup()
- this.notify('getPolygonPositions', [])
- this.startDrawing()
- }
-
- // 删除端点
- delPoint() {
- if (this.curPolygon.positions.length <= 3) {
- this.removeMenuPopup()
- return ElMessage.warning('端点不可少于3个')
- }
- if (!this.delPolygonPoint) return
-
- this.curPolygon.positions.splice(this.delPolygonPoint.customData.ind, 1)
- this.editPolygonPointDataSource.entities.remove(this.delPolygonPoint)
- this.removeMenuPopup()
-
- // 更新剩余点索引
- this.editPolygonPointDataSource.entities.values.forEach((item, index) => {
- item.customData.ind = index
- })
-
- this.notify('getPolygonPositions', this.curPolygon.positions)
- }
-
- // ============ 工具方法 ============
-
- // 创建右键菜单
- createMenuPopup(type = 'polygon') {
- const menuPopupVBox = document.createElement('div')
- menuPopupVBox.id = 'planarPolygonEdit'
- menuPopupVBox.className = 'planar-polygon-edit-tooltip'
-
- const menuPopup = document.createElement('div')
- menuPopup.id = 'planarPolygonEditMenu'
- menuPopup.className = 'planar-polygon-edit-menu'
-
-
- const menuItems =
- type === 'polygon'
- ? [{ title: '删除测区', class: 'del-planar-polygon' }]
- : [{ title: '删除端点', class: 'del-planar-point' }]
-
- menuItems.forEach(item => {
- const titleDiv = document.createElement('div')
- titleDiv.innerText = item.title
- titleDiv.className = item.class
- menuPopup.appendChild(titleDiv)
- })
-
- this.isPreviewMode = true
- menuPopupVBox.appendChild(menuPopup)
- return menuPopupVBox
- }
-
- // 移除菜单
- removeMenuPopup() {
- const that = this
- if (that.menuPopup) {
- that.menuPopup.removeEventListener('click', that.delPolygon)
- that.menuPopup.removeEventListener('click', that.delPoint)
- that.viewer.container.removeChild(that.menuPopup)
- that.menuPopup = null
- }
- that.delPolygonPoint = null
- }
-
- // 更新多边形样式（正常/错误）
- updatePolygonAppearance(polygonColor, lineColor) {
- this.polygonEntity.polygon.material = polygonColor
- this.polygonEntity.polyline.material = lineColor
- }
-
- // 禁用地图交互
- disableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = false
- controller.enableTranslate = false
- controller.enableZoom = false
- }
-
- // 启用地图交互
- enableMapControl() {
- const controller = this.viewer.scene.screenSpaceCameraController
- controller.enableRotate = true
- controller.enableTranslate = true
- controller.enableZoom = true
- }
-
- // 检查多边形是否自交
- curDragPointIsValid(positions) {
- if (positions.length < 3) return true
-
- const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions)
- const latLngPoints = cartographics.map(cartographic => [
- Cesium.Math.toDegrees(cartographic.longitude),
- Cesium.Math.toDegrees(cartographic.latitude),
- ])
-
- // 用 turf.js 检查自交
- const poly = turf.polygon([[...latLngPoints, latLngPoints[0]]])
- const intersections = turf.kinks(poly)
-
- return intersections.features.length === 0
- }
-
- // 初始化已有多边形
- initPolygon(viewer, positions, isPurePreview = false) {
- this.initHandler(viewer)
-
- if (this.whetherToDraw) {
- this.startDrawing();
- } else {
- // 新增：不允许绘制时，确保绘制模式为 false，避免误触发
- this.drawingMode = false;
-
- }
-
- let newPosition = positions.map(item => {
- return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item.height))
- })
-
-
- newPosition.forEach(item => {
- this.addPosition(item, false)
- })
-
- // 视角飞入区域
- const newBox = boxTransformScale(
- positions.map(item => [item.lng, item.lat]),
- 5
- )
- viewer.camera.flyTo({
- destination: Cesium.Rectangle.fromDegrees(...newBox),
- offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0),
- duration: 0.5,
- })
-
- this.drawingMode = false
- this.editingMode = true
- }
-
- // 初始化事件处理器
- initHandler(viewer) {
- this.viewer = viewer
-
- if(this.whetherToDraw){
- this.startDrawing()
- }
-
- if (!this.handler) {
- this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
-
- // 注册鼠标事件
- const events = [
- [Cesium.ScreenSpaceEventType.LEFT_DOWN, this.handleLeftDown],
- [Cesium.ScreenSpaceEventType.LEFT_UP, this.handleLeftUp],
- [Cesium.ScreenSpaceEventType.MOUSE_MOVE, this.handleMouseMove],
- [Cesium.ScreenSpaceEventType.LEFT_CLICK, this.handleLeftClick],
- [Cesium.ScreenSpaceEventType.RIGHT_CLICK, this.handleRightClick],
- ]
-
- events.forEach(([type, handler]) => {
- this.handler.setInputAction(handler, type)
- })
- }
- }
-
- // 移除事件处理器
- removeHandler() {
- if (this.handler) {
- const eventTypes = [
- Cesium.ScreenSpaceEventType.LEFT_DOWN,
- Cesium.ScreenSpaceEventType.LEFT_UP,
- Cesium.ScreenSpaceEventType.MOUSE_MOVE,
- Cesium.ScreenSpaceEventType.LEFT_CLICK,
- Cesium.ScreenSpaceEventType.RIGHT_CLICK,
- ]
-
- eventTypes.forEach(type => {
- this.handler.removeInputAction(type)
- })
-
- this.handler.destroy()
- this.handler = null
- }
- }
-
- /**
- * 销毁实例，释放资源
- */
- destroy() {
- if (!this.viewer) return
-
- this.removeMenuPopup()
- this.removeEntities()
- this.removeHandler()
- this.enableMapControl()
- }
-}
diff --git a/applications/drone-command/src/views/layerManagement/index.vue b/applications/drone-command/src/views/layerManagement/index.vue
deleted file mode 100644
index 8ec2742..0000000
--- a/applications/drone-command/src/views/layerManagement/index.vue
+++ /dev/null
@@ -1,604 +0,0 @@
-<template>
- <basic-container>
- <div class="layerContainer">
- <div>
- <el-tabs v-model="activeType" @tab-click="handleClick">
- <el-tab-pane v-for="tab in tabData" :key="tab.type" :label="tab.name" :name="tab.type">
- </el-tab-pane>
- </el-tabs>
- </div>
- <!-- 地图 -->
- <div class="mapContainer" v-loading="isPageLoading"
- element-loading-background="rgba(0, 0, 0, 0.5)"
- element-loading-text="加载中...">
- <div class="tool-tip warning" v-show="isShowWaringTip">
- <span class="icon">
- <el-icon><WarningFilled /></el-icon>
- </span>
- <span>{{ showWarnToolTipText }}</span>
- </div>
- <div class="tool-tip" v-if="!isShowWaringTip && layerParams.addNest">
- {{ showToolTipText }}
- </div>
- <div id="layMap" class="command-cesium"></div>
- <leftList
- v-if="
- !layerParams.addNest &&
- !layerParams.editNest &&
- !layerParams.addFolder &&
- !layerParams.editFolder
- "
- @update:coverData="handleCoverDataUpdate"
- @update:deitData="handleEdit"
- @update:editFolder="handleFolder"
- :activeName="activeName"
- @newFencesMethods="newFencesMethods"
- :reset-check="resetCheck"
- ></leftList>
- <rightEdit
- v-if="layerParams.addNest || layerParams.editNest"
- @callParentMethod="parentMethod"
- @update:loading="handleLoadingChange"
- ></rightEdit>
- <folderFile
- @refreshMethod="refreshMethod"
- :activeName="activeName"
- @callParentMethod="parentMethod"
- v-if="layerParams.addFolder || layerParams.editFolder"
- ></folderFile>
- </div>
- </div>
- </basic-container>
-</template>
-
-<script setup>
-import EventBus from '@/utils/eventBus';
-import * as turf from '@turf/turf';
-import { dataFolderApi } from '@/api/layer/index';
-import folderFile from '@/views/layerManagement/components/folderFile.vue';
-import { parseGeoDataToPositions } from '@/utils/geoParseUtil';
-import { flyVisual } from '@ztzf/utils';
-import rightEdit from '@/views/layerManagement/components/rightEdit.vue';
-import leftList from '@/views/layerManagement/components/leftList.vue';
-import { DrawPolygon } from '@/views/layerManagement/components/utils';
-import * as Cesium from 'cesium';
-import { PublicCesium } from '@/utils/cesium/publicCesium';
-import _, { cloneDeep, throttle } from 'lodash';
-
-import { provide } from 'vue';
-import { useStore } from 'vuex';
-const isProd = import.meta.env.VITE_APP_ENV === 'production'
-const store = useStore();
-const userInfo = computed(() => store.getters.userInfo);
-const areaCode = userInfo.value?.detail?.areaCode || '';
-const showToolTipText = ref('点击地图生成测绘区域')
-const showWarnToolTipText = ref('测区不支持交叉面')
-// 红色警告交叉面提示窗
-const isShowWaringTip = ref(false);
-const activeName = ref('自定义识别区');
-const activeType = ref('0');
-let tbJwdList = [];
-const selectDataList = ref([]);
-// 当前面位置信息
-let curPolygonPosition = [];
-const tabData = computed(() => {
- const allTabs = [
- {
- name: '自定义识别区',
- type: '0',
- },
- {
- name: '自定义禁飞区',
- type: '1',
- },
- {
- name: '国土空间规划',
- type: '2',
- },
- ];
-
- // 如果是生产环境，只返回自定义识别区
- if (isProd) {
- return allTabs.filter(tab => tab.type === '0');
- }
- return allTabs;
-});
-const layerParams = ref({
- addNest: false,
- editNest: false,
- editDetailData: null,
- total_count: 0,
- total_area: 0,
- polygonPosition: null,
- decideWhetherToAddOrEdit: null, //新增or编辑围栏
- addAnEditingFolder: null, //新增or编辑文件夹
- addFolder: false,
- editFolder: false,
- folderOption: [], //文件夹选项
- fenceType: 1,
- fenceArea: 0, //围栏面积
- fileType: 1, //文件夹类型
- editFolderData: null,
- editingIsProhibited: false, //禁止编辑
- isDetailShow: false,
- isSingleLocating:false , //是否是单个定位
- currentLocationFolderId:null,
- crossSurface:false,//是否交叉面
-});
-const resetCheck = ref(false);
-const handleClick = tab => {
- const clickedTab = tabData.value.find(item => item.type === tab.paneName);
- activeType.value = clickedTab.type;
- activeName.value = clickedTab.name;
- getdataFolderApi();
- parentMethod();
- handleCoverDataUpdate([])
- layerParams.value.addNest = false
- layerParams.value.editNest = false
- layerParams.value.addFolder = false
- layerParams.value.editFolder = false
- resetCheck.value = !resetCheck.value;
-
-};
-const refreshMethod = () => {
- getdataFolderApi();
-};
-const getdataFolderApi = () => {
- let id;
- if (activeName.value === '自定义识别区') {
- id = 1;
- } else if (activeName.value === '自定义禁飞区') {
- id = 2;
- } else {
- id = 3;
- }
- dataFolderApi(id).then(res => {
- const originalFolderList = res.data.data || [];
- const formattedFolderOption = originalFolderList.map(folder => ({
- label: folder.name,
- value: folder.id.toString(),
- }));
- layerParams.value.folderOption = formattedFolderOption;
- });
-};
-
-// 编辑围栏区域
-const handleEdit = val => {
- viewer.entities.removeAll();
- layerParams.value.editDetailData = val;
- drawPolygonExample.editThePatch(true);
- drawPolygonExample.drawTheArea(true);
- let geoDataArr = JSON.parse(val.geo_data);
- if (geoDataArr.length > 0) {
- geoDataArr.pop();
- }
- const processedGeoData = JSON.stringify(geoDataArr);
- //geo_data 解析坐标
- const positions = parseGeoDataToPositions(processedGeoData, val.altitude);
- if (positions.length < 3) return; // 少于3个点无法构成多边形
- drawPolygonExample.initPolygon(viewer, positions, true);
-};
-// 编辑文件夹
-const handleFolder = val => {
-parentMethod()
- selectDataList.value = val.children;
- if (selectDataList.value?.length > 0) {
- loadDataToMap(selectDataList.value);
- } else {
- viewer.entities.removeAll();
- }
- layerParams.value.editFolderData = val;
-};
-// 新增开启绘制
-const newFencesMethods = () => {
- viewer.entities.removeAll();
- drawPolygonExample.initHandler(viewer);
- drawPolygonExample.drawTheArea(true);
- drawPolygonExample.startDrawing();
-};
-// 清除地图数据
-const parentMethod = () => {
- drawPolygonExample.delPolygon();
- drawPolygonExample.drawTheArea(false);
- viewer.entities.removeAll();
-};
-// 点击显示区域
-const handleCoverDataUpdate = data => {
- selectDataList.value = data;
- if (selectDataList.value?.length > 0) {
- loadDataToMap(selectDataList.value);
- } else {
- viewer.entities.removeAll();
- }
-};
-const loadDataToMap = dataList => {
- if (!viewer) return;
- viewer.entities.removeAll();
- // 存储所有有效坐标
- tbJwdList = [];
- dataList.forEach(item => {
- let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
- if (positions.length < 3) {
- console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
- return;
- }
-
- tbJwdList.push(...positions);
- let degreesArray = [];
- positions.forEach(pos => {
- degreesArray.push(pos.lng, pos.lat, pos.height);
- });
- const colorMap = {
- 1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色）
- 2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色）
- 3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色）
- // 边框色：去掉透明度，保持纯色
- border1: Cesium.Color.fromCssColorString('#00ff06'),
- border2: Cesium.Color.fromCssColorString('#ff0000'),
- border3: Cesium.Color.fromCssColorString('#00ffea'),
- };
- const fillColor = item.category_id === 1
- ? colorMap[1]
- : item.category_id === 2
- ? colorMap[2]
- : item.category_id === 3
- ? colorMap[3]
- : Cesium.Color.YELLOW.withAlpha(0.5);
-
- const borderColor = item.category_id === 1
- ? colorMap.border1
- : item.category_id === 2
- ? colorMap.border2
- : item.category_id === 3
- ? colorMap.border3
- : Cesium.Color.YELLOW;
- viewer.entities.add({
- id: `polygon_${item.id}`,
- customType: 'fence_polygon',
- customInfo: item,
- polygon: {
- hierarchy: new Cesium.PolygonHierarchy(
- Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
- ),
- material:fillColor, // 填充色
- outline: true, // 显示边框
- outlineColor: borderColor, // 边框色
- outlineWidth: 2, // 边框宽度
- clampToGround: true, // 贴地显示
- },
-
- polyline: {
- positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
- width: 2,
- material:borderColor,
- clampToGround: true,
- },
- zIndex: 99,
- });
- });
- if (!layerParams.value.isSingleLocating) {
- focusOnAllFeatures();
- }
- viewInstance.value?.addLeftClickEvent(null, handleFenceClick);
-};
-const focusOnAllFeatures = () => {
- if (tbJwdList.length === 0 || !viewer) return;
-
- // 判断是否有指定定位的文件夹
- if (layerParams.value.currentLocationFolderId) {
- // 筛选当前文件夹下的所有子节点坐标
- const targetFolderPositions = selectDataList.value
- .filter(item => item.folder_id === layerParams.value.currentLocationFolderId)
- .flatMap(item => {
- const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
- return positions.length >= 3 ? positions : [];
- });
-
- if (targetFolderPositions.length > 0) {
- const positionsData = targetFolderPositions.map(pos => [
- pos.lng,
- pos.lat,
- pos.height || 0
- ]);
- flyVisual({
- positionsData,
- viewer,
- multiple: activeName.value === '国土空间规划' ? 13 : 10,
- pitch: -90
- });
- return; // 仅聚焦当前文件夹，结束方法
- }
- }
-
- // 无指定文件夹时，聚焦所有选中数据
- const positionsData = tbJwdList.map(pos => [
- pos.lng,
- pos.lat,
- pos.height || 0
- ]);
- flyVisual({
- positionsData,
- viewer,
- multiple: activeName.value === '国土空间规划' ? 13 : 4,
- pitch: -90
- });
-};
-// 区域点击显示详细信息
-const handleFenceClick = movement => {
-if(layerParams.value.editFolder) return
- if (!viewer) return;
- layerParams.value.editDetailData = null;
-
-if(activeName.value !== '国土空间规划') {
- const pickedObjects = viewer.scene.drillPick(movement.position, 10);
- // 遍历所有被点击的实体，找到围栏类型（customType: 'fence_polygon'）
- let selectedEntity = null;
- for (let i = 0; i < pickedObjects.length; i++) {
- const pick = pickedObjects[i];
- if (Cesium.defined(pick.id) && pick.id?.customType === 'fence_polygon') {
- selectedEntity = pick.id;
- break;
- }
- }
- // viewer.entities.values.forEach(entity => {
- // if (entity.customType === 'fence_polygon') {
- // entity.polygon.material = entity === selectedEntity
- // ? Cesium.Color.RED.withAlpha(0.5)
- // : Cesium.Color.YELLOW.withAlpha(0.5);
- // }
- // });
- if (selectedEntity) {
- const selectedData = selectedEntity.customInfo;
- if (activeName.value !== '国土空间规划') {
- layerParams.value.editNest = true;
- layerParams.value.decideWhetherToAddOrEdit = 2;
- if (activeName.value === '自定义识别区') {
- layerParams.value.fenceType = 1;
- } else if (activeName.value === '自定义禁飞区') {
- layerParams.value.fenceType = 2;
- }
- layerParams.value.editDetailData = selectedData;
- layerParams.value.fenceArea = selectedData.area;
- layerParams.value.editingIsProhibited = true;
- }
- }
-}
-
-};
-let publicCesiumInstance = null;
-let viewer = null;
-const viewInstance = shallowRef(null);
-const drawPolygonExample = new DrawPolygon();
-// 地图初始化
-const initMap = () => {
- publicCesiumInstance = new PublicCesium({
- dom: 'layMap',
- flatMode: false,
- terrain: true,
- layerMode: 4, //轮廓线
- dockOptions:{showDock:true}//机巢
- });
- viewer = publicCesiumInstance.getViewer();
- viewInstance.value = publicCesiumInstance;
- viewInstance.value?.flyToContour();
- const nanChangPosition = Cesium.Cartesian3.fromDegrees(
- 115.892151, // 经度
- 28.676493, // 纬度
- 15000 // 相机高度
- );
-
- // 执行相机飞行
- viewer.camera.flyTo({
- destination: nanChangPosition,
- duration: 0,
- orientation: {
- heading: Cesium.Math.toRadians(0),
- pitch: Cesium.Math.toRadians(-90),
- roll: 0,
- },
- });
-};
-// 编辑/绘制
-const loadPlanarRoute = async (positions = null, save = false) => {
- if (positions) {
- curPolygonPosition = positions.map(item => {
- let cartographic = Cesium.Cartographic.fromCartesian(item);
- let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
- let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
- let height = Cesium.Math.toDegrees(cartographic.height); //高度
- return {
- lng: _.round(lng, 6),
- lat: _.round(lat, 6),
- height: _.round(height, 6),
- };
- });
- }
- let polygon = curPolygonPosition.map(item => [item?.lng, item?.lat]);
- if(polygon.length ===0){
- isShowWaringTip.value = false
- }
- if(polygon.length > 0 && !isShowWaringTip.value){
- showToolTipText.value = '测绘区域已绘制完成'
- } else {
- showToolTipText.value = '点击地图生成测绘区域'
- }
-
- if(polygon.length > 0){
- polygon.push([curPolygonPosition[0]?.lng, curPolygonPosition[0]?.lat])
- }
- let polygonString = JSON.stringify(polygon);
- layerParams.value.polygonPosition = polygon.length > 0 ? polygonString : null;
- if (polygon.length >= 3) {
- // 确保多边形闭合：最后一个点与第一个点一致
- const firstPoint = polygon[0];
- const lastPoint = polygon[polygon.length - 1];
- const isClosed =
- _.round(firstPoint[0], 6) === _.round(lastPoint[0], 6) &&
- _.round(firstPoint[1], 6) === _.round(lastPoint[1], 6);
- const closedPolygon = isClosed ? polygon : [...polygon, firstPoint];
- const turfPolygon = turf.polygon([closedPolygon]);
- const area = _.round(turf.area(turfPolygon), 2);
- if (area / 1000000 < 50) {
- layerParams.value.fenceArea = area;
- } else {
- layerParams.value.fenceArea = area;
- isShowWaringTip.value = true
- showWarnToolTipText.value = '自定义禁飞区不能超过50平方公里'
- }
- } else {
- layerParams.value.fenceArea = 0;
- }
-};
-drawPolygonExample.subscribe('getShowWaringTip', data => {
- isShowWaringTip.value = data;
- showWarnToolTipText.value = '测区不支持交叉面'
- layerParams.value.crossSurface = data
-});
-const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200);
-drawPolygonExample.subscribe('getPolygonPositions', data => {
- throttleLoadPlanarRoute(data);
-});
-
-// 地图销毁
-const destroyMap = () => {
- drawPolygonExample.destroy();
- if (viewer) {
- viewer.destroy();
- viewer = null;
- }
- publicCesiumInstance = null;
-};
-// 阻止浏览器默认
-const preventDefault = event => {
- event.preventDefault();
- return;
-};
-const cesiumContextMenu = (isAdd = true) => {
- let cesium = document.getElementById('layMap');
- if (!cesium) return;
- if (isAdd) {
- cesium.addEventListener('contextmenu', preventDefault);
- } else {
- cesium.removeEventListener('contextmenu', preventDefault);
- }
-};
-// 添加loading
-const isPageLoading = ref(false);
-const handleLoadingChange = (status) => {
- isPageLoading.value = status;
-};
-provide('layerParams', layerParams);
-const focusOnNodeHandler = nodeData => {
- focusOnNode(nodeData);
-};
-onMounted(() => {
- initMap();
- cesiumContextMenu();
- getdataFolderApi();
- // 监听定位事件
- EventBus.on('focusOnNode', focusOnNodeHandler);
- EventBus.on('deleteMapEntityById', deleteMapEntityById);
- EventBus.on('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
-});
-
-//定位到指定节点
-const focusOnNode = (nodeData) => {
- if (!viewer || !nodeData?.geo_data) return;
-
- // 解析节点坐标
- const positions = parseGeoDataToPositions(nodeData.geo_data, nodeData.altitude);
- if (positions.length < 3) return;
-
- // level 2 节点走全量聚焦，level 3 节点走单个聚焦
- if (nodeData.level === 2) {
- focusOnAllFeatures();
- } else {
- flyVisual({
- positionsData: positions.map(pos => [pos.lng, pos.lat, pos.height || 0]),
- viewer,
- multiple: activeName.value === '国土空间规划' ? 13 : 7, // 缩放倍数
- pitch: -90
- });
- }
-};
-onBeforeUnmount(() => {
- destroyMap();
- cesiumContextMenu(false);
- EventBus.off('focusOnNode', focusOnNodeHandler);
- EventBus.off('deleteMapEntityById', deleteMapEntityById);
- EventBus.off('deleteMapEntitiesByFolderId', deleteMapEntitiesByFolderId);
-});
-// 删除单个地图实体
-const deleteMapEntityById = entityId => {
- if (!viewer) return;
- const entity = viewer.entities.getById(`polygon_${entityId}`);
- if (entity) {
- viewer.entities.remove(entity);
- }
- // 更新选中数据列表
- selectDataList.value = selectDataList.value.filter(item => item.id !== entityId);
-};
-// 删除文件夹下所有地图实体
-const deleteMapEntitiesByFolderId = folderId => {
- if (!viewer) return;
- const entitiesToDelete = viewer.entities.values.filter(entity => {
- return entity.customInfo?.folder_id === folderId;
- });
- entitiesToDelete.forEach(entity => {
- viewer.entities.remove(entity);
- });
- // 更新选中数据列表
- selectDataList.value = selectDataList.value.filter(item => item.folder_id !== folderId);
- getdataFolderApi()
-};
-</script>
-
-<style scoped lang="scss">
-.layerContainer {
- width: 100%;
- height: 90vh;
-}
-.mapContainer {
- position: relative;
- width: 100%;
- height: 80vh;
- .warning {
- position: absolute;
- top: 234px;
- color: #fff;
- background: rgba(140, 0, 0, 0.4) !important;
-
- .icon {
- display: flex;
- align-items: center;
- color: #ff1f1f;
- }
- }
- #layMap {
- width: 100%;
- height: 100%;
- border-radius: 8px 8px 8px 8px;
- overflow: hidden;
- }
- .tool-tip {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- width: 800px;
- height: 64px;
- right: 430px;
- top: 60px;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-size: 18px;
- color: #ffffff;
-
- background: rgba(11, 31, 58, 0.7);
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
-
-}
-</style>
diff --git a/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue b/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
index 6af37f9..aa777de 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue
@@ -11,8 +11,8 @@
<div class="content" style="display: flex">
<div class="processBox" v-if="dialogMode !== 'add' && processList.length">
<div class="detail-title">工单记录</div>
- <div class="process" >
- <OrderStepBar :processList="processList"/>
+ <div class="process">
+ <OrderStepBar :processList="processList" />
</div>
</div>
<div class="leftBox">
@@ -269,7 +269,7 @@
import { gdManageDeviceListApi } from './gdManageDeviceApi'
import { cartesian3Convert } from '@/utils/cesium/mapUtil'
import * as Cesium from 'cesium'
-import { DrawPolygon } from '@/utils/cesium/DrawPolygon'
+import { DrawPolygon } from '@ztzf/utils'
import { pxToRem } from '@/utils/rem'
import dayjs from 'dayjs'
import RefuseOrderDialog from '@/views/orderView/orderManage/orderManage/RefuseOrderDialog.vue'
@@ -679,7 +679,7 @@
display: flex;
flex-direction: column;
- .process{
+ .process {
height: 100%;
padding: 12px 16px 24px 16px;
width: 312px;
diff --git a/applications/task-work-order/src/utils/cesium/DrawPolygon.js b/packages/utils/map/DrawPolygon.js
similarity index 98%
rename from applications/task-work-order/src/utils/cesium/DrawPolygon.js
rename to packages/utils/map/DrawPolygon.js
index 598024f..80c3518 100644
--- a/applications/task-work-order/src/utils/cesium/DrawPolygon.js
+++ b/packages/utils/map/DrawPolygon.js
@@ -1,9 +1,7 @@
import * as Cesium from 'cesium'
import * as turf from '@turf/turf'
-import { boxTransformScale } from '@/utils/turfFunc'
import { ElMessage } from 'element-plus'
-import { getPointPositionsHeight } from '@/utils/cesium/mapUtil'
-import { flyVisual } from '@ztzf/utils'
+import { flyVisual, getPointPositionsHeight } from './index'
/**
* 多边形绘制与编辑工具类
@@ -727,6 +725,15 @@
this.addPosition(item, false)
})
+ const boxTransformScale = (data, multiple = 3) => {
+ const line = turf.lineString(data)
+ const bbox = turf.bbox(line)
+ const bboxPolygon = turf.bboxPolygon(bbox)
+ const scaledPolygon = turf.transformScale(bboxPolygon, multiple)
+
+ return turf.bbox(scaledPolygon)
+ }
+
// 视角飞入区域
const newBox = boxTransformScale(
positions.map(item => [item.lng, item.lat]),
diff --git a/packages/utils/map/index.js b/packages/utils/map/index.js
index 2503669..9d137c7 100644
--- a/packages/utils/map/index.js
+++ b/packages/utils/map/index.js
@@ -1,5 +1,6 @@
import * as Cesium from 'cesium'
import { MapTooltip } from './MapTooltip'
+import { DrawPolygon } from './DrawPolygon'
/**
* 飞到中心点并且所有点在可视范围
* @param positionsData 二维数组，每项为 [lon, lat] 或 三维数组 [lon, lat, height]
@@ -61,4 +62,46 @@
})
}
-export { MapTooltip, flyVisual }
+// 批量获取点数组经纬度对应高度信息
+const getPointPositionsHeight = (data, viewer, droneHeight = null) => {
+ return new Promise((resolve, reject) => {
+ if (!data || !data.length) {
+ resolve([])
+ return
+ }
+ // 假设 viewer 已经初始化并且 terrainProvider 是有效的
+ const terrainProvider = viewer?.terrainProvider
+ // 创建 Cartographic 对象
+ const cartographics = data.map(item => {
+ const { lng, lat } = item
+ return Cesium.Cartographic.fromDegrees(Number(lng), Number(lat))
+ })
+ // 获取地形数据的Promise
+ const promise = Cesium.sampleTerrainMostDetailed(terrainProvider, cartographics)
+ // 使用 Cesium.when 处理 Promise
+ promise
+ .then(function (updatedPositions) {
+ // 是一个数组，包含更新后的 Cartographic 对象
+ const newPosition = updatedPositions.map((item, index) => {
+ const longitude = Cesium.Math.toDegrees(item.longitude)
+ const latitude = Cesium.Math.toDegrees(item.latitude)
+ let pointData = {
+ ...data[index],
+ longitude,
+ latitude,
+ ASL: Number(item.height),
+ customHeight: Number(item.height),
+ }
+ if (droneHeight) pointData.TH = Number(item.height) + Number(droneHeight)
+ return pointData
+ })
+ resolve(newPosition)
+ })
+ .catch(function (error) {
+ console.log('获取高程时发生错误:', error)
+ resolve(data.map(item => ({ ...item, ASL: 0, customHeight: 0, longitude: item.lng, latitude: item.lat })))
+ })
+ })
+}
+
+export { MapTooltip, flyVisual, getPointPositionsHeight, DrawPolygon }
diff --git a/packages/utils/package.json b/packages/utils/package.json
index a25ac89..c4c6f41 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,18 +1,22 @@
{
- "name": "@ztzf/utils",
- "version": "1.0.0",
- "private": true,
- "description": "工具类",
- "main": "index.js",
- "license": "ISC",
- "peerDependencies": {
- "cesium": "catalog:",
- "dayjs": "catalog:",
- "decimal.js": "catalog:"
- },
- "devDependencies": {
- "cesium": "catalog:",
- "dayjs": "catalog:",
- "decimal.js": "catalog:"
- }
+ "name": "@ztzf/utils",
+ "version": "1.0.0",
+ "private": true,
+ "description": "工具类",
+ "main": "index.js",
+ "license": "ISC",
+ "peerDependencies": {
+ "@turf/turf": "catalog:",
+ "cesium": "catalog:",
+ "dayjs": "catalog:",
+ "decimal.js": "catalog:",
+ "element-plus": "catalog:"
+ },
+ "devDependencies": {
+ "@turf/turf": "catalog:",
+ "cesium": "catalog:",
+ "dayjs": "catalog:",
+ "decimal.js": "catalog:",
+ "element-plus": "catalog:"
+ }
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1189736..eb29411 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -878,6 +878,12 @@
packages/utils:
devDependencies:
+ '@turf/turf':
+ specifier: 'catalog:'
+ version: 6.5.0
+ '@ztzf/utils':
+ specifier: workspace:*
+ version: 'link:'
cesium:
specifier: 'catalog:'
version: 1.126.0
@@ -887,6 +893,9 @@
decimal.js:
specifier: 'catalog:'
version: 10.6.0
+ element-plus:
+ specifier: 'catalog:'
+ version: 2.9.11(vue@3.5.27(typescript@5.9.3))
uniapps/work-app:
dependencies:
--
Gitblit v1.9.3