From 2dbd3103d91934a6ec6ef48baa288b56a4843472 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 12 Jan 2026 19:41:26 +0800
Subject: [PATCH] feat: 完成区域
---
applications/drone-command/src/utils/cesium/DrawPolygon.js | 70 +++++++++++++++++-----------------
1 files changed, 35 insertions(+), 35 deletions(-)
diff --git a/applications/drone-command/src/utils/cesium/DrawPolygon.js b/applications/drone-command/src/utils/cesium/DrawPolygon.js
index 59cbf6c..6c37a35 100644
--- a/applications/drone-command/src/utils/cesium/DrawPolygon.js
+++ b/applications/drone-command/src/utils/cesium/DrawPolygon.js
@@ -88,18 +88,18 @@
// ============ 发布订阅机制 ============
// 外部订阅数据变化
- subscribe (key, listener) {
+ subscribe(key, listener) {
this.listeners.push({ key, listener })
}
// 通知订阅者
- notify (key, data) {
+ notify(key, data) {
this.listeners.filter(subscriber => subscriber.key === key).forEach(subscriber => subscriber.listener(data))
}
// ============ 绘制相关 ============
// 编辑图斑
- editThePatch (data) {
+ editThePatch(data) {
this.isPreviewMode = data
// 关闭编辑能力时隐藏端点/中点，并清空中点，避免残留交互
if (!this.isPreviewMode) {
@@ -117,12 +117,12 @@
}
}
// 删除测区
- deleteTheArea (data) {
+ deleteTheArea(data) {
this.isDeleteTheArea = data
}
// 开始绘制
- startDrawing () {
+ startDrawing() {
this.drawingMode = true
this.curPolygon = new Cesium.PolygonHierarchy()
@@ -150,7 +150,7 @@
}
// 创建多边形实体（含边界线）
- createPolygonEntity () {
+ createPolygonEntity() {
this.polygonEntity = this.editPolygonDataSource.entities.add({
name: DrawPolygon.ENTITY_NAMES.POLYGON,
id: DrawPolygon.ENTITY_NAMES.POLYGON_ID,
@@ -174,7 +174,7 @@
}
// 创建端点实体
- createPointEntity (position, isAdd) {
+ createPointEntity(position, isAdd) {
const pointIndex = isAdd ? this.curPolygon.positions.length - 2 : this.curPolygon.positions.length - 1
this.editPolygonPointDataSource.entities.add({
@@ -193,7 +193,7 @@
})
}
- createMidPointEntity (startInd, position) {
+ createMidPointEntity(startInd, position) {
// 使用 CallbackProperty 让中点位置随端点拖拽实时计算
// startInd 表示该中点属于边：(startInd) -> (startInd + 1)
const updatePosition = () => {
@@ -224,7 +224,7 @@
})
}
- rebuildEditPoints () {
+ rebuildEditPoints() {
// 插入/删除端点后：端点实体 id 与 customData.ind 需要全量重建，保证索引与 positions 一致
if (!this.isPreviewMode) return
if (!this.editPolygonPointDataSource || !this.curPolygon?.positions) return
@@ -248,7 +248,7 @@
})
}
- rebuildMidPoints () {
+ rebuildMidPoints() {
// 仅在“顶点数量变化/切换编辑态”时维护中点实体数量
// 拖拽过程中中点位置由 CallbackProperty 自动更新，不需要重建
if (!this.isPreviewMode) return
@@ -286,7 +286,7 @@
})
}
- insertPointFromMidPoint (midPointEntity) {
+ insertPointFromMidPoint(midPointEntity) {
// 点击中点：在对应边上插入一个新端点（白点），并立即进入拖拽态
if (!this.isPreviewMode) return
if (!this.editingMode) return
@@ -319,7 +319,7 @@
this.notify('getPolygonPositions', this.curPolygon.positions)
}
// 清除不在范围内的点
- removeLastInvalidPoint () {
+ removeLastInvalidPoint() {
const posLen = this.curPolygon.positions.length
if (posLen === 0) return
@@ -348,7 +348,7 @@
}
}
// 添加一个点
- addPosition (position, isAdd = true) {
+ addPosition(position, isAdd = true) {
// 第一个点要重复压入一次，形成动态绘制效果
if (this.curPolygon.positions.length === 0 && isAdd) {
this.curPolygon.positions.push(position.clone())
@@ -372,7 +372,7 @@
// ============ 鼠标事件 ============
// 鼠标左键按下（选中端点拖动）
- handleLeftDown (movement) {
+ handleLeftDown(movement) {
if (!this.editingMode) return
const pickedEntity = this.viewer.scene.pick(movement.position)?.id
@@ -393,7 +393,7 @@
}
// 鼠标左键抬起（拖拽结束）
- handleLeftUp () {
+ handleLeftUp() {
if (!(this.editingMode && this.curPolygon?.positions && this.draggedEntity)) return
if (this.currentDragPointIsValid && this.isDragging) {
@@ -426,7 +426,7 @@
}
// 鼠标移动
- handleMouseMove (movement) {
+ handleMouseMove(movement) {
if (!this.drawingMode && !this.editingMode) return
const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
@@ -464,7 +464,7 @@
}
// 鼠标左键点击
- handleLeftClick (click) {
+ handleLeftClick(click) {
this.removeMenuPopup()
const pickedAllEntity = this.viewer.scene.drillPick(click.position).filter(i => i.id)
@@ -520,7 +520,7 @@
}
// 鼠标右键点击（弹出菜单）
- handleRightClick (click) {
+ handleRightClick(click) {
const that = this
if (that.drawingMode) return
@@ -556,7 +556,7 @@
// ============ 删除相关 ============
// 删除所有实体
- removeEntities () {
+ removeEntities() {
if (this.editPolygonDataSource) {
this.editPolygonDataSource.entities.removeAll()
this.editPolygonDataSource = null
@@ -577,7 +577,7 @@
}
// 完成绘制
- finishDrawing () {
+ finishDrawing() {
this.curPolygon.positions.pop()
if (this.curPolygon.positions.length >= 3) {
@@ -603,20 +603,20 @@
}
// 删除多边形
- delPolygon () {
+ delPolygon() {
this.removeEntities()
this.removeMenuPopup()
this.notify('getPolygonPositions', [])
this.startDrawing()
}
// 删除图斑
- delSpot () {
+ delSpot() {
this.removeEntities()
this.isPreviewMode = true
this.startDrawing()
}
// 删除端点
- delPoint () {
+ delPoint() {
if (this.curPolygon.positions.length <= 3) {
this.removeMenuPopup()
return ElMessage.warning('端点不可少于3个')
@@ -634,7 +634,7 @@
// ============ 工具方法 ============
// 创建右键菜单
- createMenuPopup (type = 'polygon') {
+ createMenuPopup(type = 'polygon') {
const menuPopupVBox = document.createElement('div')
menuPopupVBox.id = 'planarPolygonEdit'
menuPopupVBox.className = 'planar-polygon-edit-tooltip'
@@ -660,7 +660,7 @@
}
// 移除菜单
- removeMenuPopup () {
+ removeMenuPopup() {
const that = this
if (that.menuPopup) {
that.menuPopup.removeEventListener('click', that.delPolygon)
@@ -672,13 +672,13 @@
}
// 更新多边形样式（正常/错误）
- updatePolygonAppearance (polygonColor, lineColor) {
+ updatePolygonAppearance(polygonColor, lineColor) {
this.polygonEntity.polygon.material = polygonColor
this.polygonEntity.polyline.material = lineColor
}
// 禁用地图交互
- disableMapControl () {
+ disableMapControl() {
const controller = this.viewer.scene.screenSpaceCameraController
controller.enableRotate = false
controller.enableTranslate = false
@@ -686,7 +686,7 @@
}
// 启用地图交互
- enableMapControl () {
+ enableMapControl() {
const controller = this.viewer.scene.screenSpaceCameraController
controller.enableRotate = true
controller.enableTranslate = true
@@ -694,7 +694,7 @@
}
// 检查多边形是否自交
- curDragPointIsValid (positions) {
+ curDragPointIsValid(positions) {
if (positions.length < 3) return true
const cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray(positions)
@@ -710,12 +710,12 @@
return intersections.features.length === 0
}
// 初始化已有多边形
- async initPolygon (viewer, positions, isPurePreview = false) {
+ async initPolygon(viewer, positions, isPurePreview = false) {
this.initHandler(viewer)
this.isPureSpotPreview = isPurePreview
this.startDrawing()
let newPosition = positions.map(item => {
- return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item?.height||0))
+ return Cesium.Cartesian3.fromDegrees(Number(item.lng), Number(item.lat), Number(item?.height || 0))
})
// 预览航线的时候调用
if (!this.isPureSpotPreview) {
@@ -737,7 +737,7 @@
duration: 0.5,
})
- const pointList = await getPointPositionsHeight(positions, viewer)
+ let pointList = await getPointPositionsHeight(positions, viewer)
flyVisual({ positionsData: pointList.map(item => [item.lng, item.lat, item.ASL]), viewer })
this.drawingMode = false
@@ -748,7 +748,7 @@
}
// 初始化事件处理器
- initHandler (viewer) {
+ initHandler(viewer) {
this.viewer = viewer
this.startDrawing()
@@ -771,7 +771,7 @@
}
// 移除事件处理器
- removeHandler () {
+ removeHandler() {
if (this.handler) {
const eventTypes = [
Cesium.ScreenSpaceEventType.LEFT_DOWN,
@@ -792,7 +792,7 @@
/**
* 销毁实例，释放资源
*/
- destroy () {
+ destroy() {
if (!this.viewer) return
this.removeMenuPopup()
--
Gitblit v1.9.3