feat:绘制区域颜色处理

shuishen

2026-01-28 20af1273bd4ae8ae061a92768e14f95d52721e6c

 applications/drone-command/src/views/areaManage/partition/shapeTools/edit/EditPolygonTool.js

@@ -3,6 +3,14 @@
import { ToolBase } from '../ToolBase'

const POINT_ENTITY_NAME = 'edit-polygon-point'
const DEFAULT_STYLE = {
   fill: Cesium.Color.fromBytes(45, 140, 240, 99),
   outline: Cesium.Color.fromBytes(45, 140, 240, 255),
}
const resolveStyle = style => ({
   fill: style?.fill || DEFAULT_STYLE.fill,
   outline: style?.outline || DEFAULT_STYLE.outline,
})

const normalizePoints = points =>
   (points || []).map(point => ({
@@ -12,7 +20,7 @@
   }))

export class EditPolygonTool extends ToolBase {
   constructor(viewer) {
   constructor(viewer, options = {}) {
      super(viewer)
      this.tooltip = new MapTooltip(viewer)
      this.dataSource = null
@@ -21,6 +29,7 @@
      this.positions = []
      this.isDragging = false
      this.draggedIndex = -1
      this.style = resolveStyle(options?.style)
   }

   start(points = []) {
@@ -96,7 +105,7 @@
               () => new Cesium.PolygonHierarchy(this.positions),
               false
            ),
            material: Cesium.Color.fromBytes(45, 140, 240, 99),
            material: this.style.fill,
            outline: false,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            show: new Cesium.CallbackProperty(() => this.positions.length >= 3, false),
@@ -111,7 +120,7 @@
            }, false),
            clampToGround: true,
            width: 2,
            material: Cesium.Color.fromBytes(45, 140, 240, 255),
            material: this.style.outline,
            show: new Cesium.CallbackProperty(() => this.positions.length >= 2, false),
         },
      })
@@ -130,7 +139,7 @@
            point: {
               pixelSize: 12,
               color: Cesium.Color.WHITE,
               outlineColor: Cesium.Color.fromBytes(45, 140, 240, 255),
               outlineColor: this.style.outline,
               outlineWidth: 2,
               heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
               disableDepthTestDistance: Number.POSITIVE_INFINITY,
@@ -153,6 +162,25 @@
      return scene.camera.pickEllipsoid(screenPosition, scene.globe.ellipsoid)
   }

   setStyle(style) {
      this.style = resolveStyle(style)
      if (this.polygonEntity?.polygon) {
         this.polygonEntity.polygon.material = this.style.fill
      }
      if (this.polylineEntity?.polyline) {
         this.polylineEntity.polyline.material = this.style.outline
      }
      if (this.dataSource) {
         this.dataSource.entities.values
            .filter(entity => entity?.name === POINT_ENTITY_NAME)
            .forEach(entity => {
               if (entity?.point) {
                  entity.point.outlineColor = this.style.outline
               }
            })
      }
   }

   disableMapControl() {
      const controller = this.viewer.scene.screenSpaceCameraController
      controller.enableRotate = false