cesium-xs-sdk 1.0.0

package/src/modules/tools/DrawTool.js

@@ -0,0 +1,961 @@
+import { BaseTool } from './BaseTool.js';
+import { PlotGeometryUtil } from '../../utils/PlotGeometryUtil.js';
+import { PlotGraphicType, isLinePlotType } from '../PlotGraphicType.js';
+
+/**
+ * 绘制类型枚举
+ */
+export const DrawType = {
+  POINT: 'point',
+  LINE: 'line',
+  POLYGON: 'polygon',
+  RECTANGLE: 'rectangle',
+  CIRCLE: 'circle',
+
+  // 标绘类型
+  TRIANGLE: 'triangle',
+  SECTOR: 'sector',
+  ELLIPSE: 'ellipse',
+  FINE_ARROW: 'fineArrow',
+  ASSAULT_DIRECTION: 'assaultDirection',
+  STRAIGHT_ARROW: 'straightArrow',
+  ATTACK_ARROW: 'attackArrow',
+  SWALLOWTAIL_ATTACK_ARROW: 'swallowtailAttackArrow',
+  SQUAD_COMBAT: 'squadCombat',
+  SWALLOWTAIL_SQUAD_COMBAT: 'swallowtailSquadCombat',
+  DOUBLE_ARROW: 'doubleArrow',
+  CURVED_ARROW: 'curvedArrow',
+  CURVE: 'curve'
+};
+
+/**
+ * 标绘绘制配置表
+ * 描述每种标绘类型的：渲染类型、最少点数、完成触发方式、对应 PlotGraphicType
+ * 注：当前仅配置已实现的标绘类型，后续随算法实现逐步放开
+ */
+const PLOT_DRAW_CONFIG = {
+  [DrawType.TRIANGLE]: {
+    category: 'polygon',
+    minPoints: 3,
+    finishOnCount: 3,
+    plotType: PlotGraphicType.TRIANGLE
+  },
+  [DrawType.SECTOR]: {
+    category: 'polygon',
+    minPoints: 3,
+    finishOnCount: 3,
+    plotType: PlotGraphicType.SECTOR
+  },
+  [DrawType.ELLIPSE]: {
+    category: 'polygon',
+    minPoints: 3,
+    finishOnCount: 3,
+    plotType: PlotGraphicType.ELLIPSE
+  },
+  [DrawType.FINE_ARROW]: {
+    category: 'polygon',
+    minPoints: 2,
+    finishOnCount: 2,
+    plotType: PlotGraphicType.FINE_ARROW
+  },
+  [DrawType.ASSAULT_DIRECTION]: {
+    category: 'polygon',
+    minPoints: 2,
+    finishOnCount: 2,
+    plotType: PlotGraphicType.ASSAULT_DIRECTION
+  },
+  [DrawType.STRAIGHT_ARROW]: {
+    category: 'line',
+    minPoints: 2,
+    finishOnCount: 2,
+    plotType: PlotGraphicType.STRAIGHT_ARROW
+  },
+  [DrawType.ATTACK_ARROW]: {
+    category: 'polygon',
+    minPoints: 3,
+    finishOnDoubleClick: true,
+    plotType: PlotGraphicType.ATTACK_ARROW
+  },
+  [DrawType.SWALLOWTAIL_ATTACK_ARROW]: {
+    category: 'polygon',
+    minPoints: 3,
+    finishOnDoubleClick: true,
+    plotType: PlotGraphicType.SWALLOWTAIL_ATTACK_ARROW
+  },
+  [DrawType.SQUAD_COMBAT]: {
+    category: 'polygon',
+    minPoints: 2,
+    finishOnDoubleClick: true,
+    plotType: PlotGraphicType.SQUAD_COMBAT
+  },
+  [DrawType.SWALLOWTAIL_SQUAD_COMBAT]: {
+    category: 'polygon',
+    minPoints: 2,
+    finishOnDoubleClick: true,
+    plotType: PlotGraphicType.SWALLOWTAIL_SQUAD_COMBAT
+  },
+  [DrawType.DOUBLE_ARROW]: {
+    category: 'polygon',
+    minPoints: 4,
+    finishOnCount: 4,
+    plotType: PlotGraphicType.DOUBLE_ARROW
+  },
+  [DrawType.CURVED_ARROW]: {
+    category: 'line',
+    minPoints: 2,
+    finishOnDoubleClick: true,
+    plotType: PlotGraphicType.CURVED_ARROW
+  },
+  [DrawType.CURVE]: {
+    category: 'line',
+    minPoints: 2,
+    finishOnDoubleClick: true,
+    plotType: PlotGraphicType.CURVE
+  }
+};
+
+/**
+ * 绘制工具
+ * 支持点、线、面、矩形、圆的交互式绘制
+ */
+export class DrawTool extends BaseTool {
+  constructor(editorModule, options = {}) {
+    super(editorModule, options);
+    this._drawType = options.drawType || DrawType.POINT;
+    this._tempEntities = [];    // 临时图元（辅助点等）
+    this._tempPositions = [];   // 用户点击的位置数组
+    this._isDrawing = false;     // 是否正在绘制
+    this._startPos = null;      // 起始位置（用于矩形、圆）
+    this._mouseMoveHandler = null;
+    this._clickCount = 0;
+    // 预览线/面实体（单独保存，避免每次重建）
+    this._previewLine = null;
+    this._previewPolygon = null;
+    this._previewRect = null;
+    this._previewCircle = null;
+    this._previewPlot = null; // 标绘图元预览
+    this._currentMousePos = null; // 当前鼠标位置
+  }
+
+  /**
+   * 设置绘制类型
+   * @param {string} type 绘制类型 DrawType
+   */
+  setDrawType(type) {
+    this._drawType = type;
+    return this;
+  }
+
+  /**
+   * 获取绘制类型
+   */
+  getDrawType() {
+    return this._drawType;
+  }
+
+  onActivate() {
+    // 注册鼠标事件
+    this.registerObserver('mouse:click', this._onClick.bind(this));
+    this.registerObserver('mouse:move', this._onMove.bind(this));
+    this.registerObserver('mouse:rightclick', this._onRightClick.bind(this));
+    this.registerObserver('keyboard:keydown', this._onKeyDown.bind(this));
+  }
+
+  onDeactivate() {
+    this.clearTempEntities();
+    this._isDrawing = false;
+    this._tempPositions = [];
+    this._clickCount = 0;
+    this._currentMousePos = null;
+    this._startPos = null;
+    this._previewPlot = null;
+  }
+
+  _onClick(lngLat, entity, movement) {
+    // lngLat 已经是经纬度数组 [lon, lat, height]
+    if (!lngLat) return;
+
+    // 优先处理标绘类型
+    const plotConfig = PLOT_DRAW_CONFIG[this._drawType];
+    if (plotConfig) {
+      this._handlePlotClick(lngLat, plotConfig);
+      return;
+    }
+
+    switch (this._drawType) {
+      case DrawType.POINT:
+        this._drawPoint(lngLat);
+        break;
+      case DrawType.LINE:
+        this._handleLineClick(lngLat);
+        break;
+      case DrawType.POLYGON:
+        this._handlePolygonClick(lngLat);
+        break;
+      case DrawType.RECTANGLE:
+        this._handleRectangleClick(lngLat);
+        break;
+      case DrawType.CIRCLE:
+        this._handleCircleClick(lngLat);
+        break;
+    }
+  }
+
+  _onMove(data) {
+    // mouse:move 事件的 movement 对象使用 endPosition
+    const screenPos = data.position || data.endPosition;
+    if (!screenPos) return;
+    const lonLat = this.screenToLonLat({ x: screenPos.x, y: screenPos.y });
+    if (!lonLat) return;
+
+    this._currentMousePos = lonLat;
+
+    if (this._drawType === DrawType.POINT) return;
+
+    // 标绘类型预览
+    const plotConfig = PLOT_DRAW_CONFIG[this._drawType];
+    if (plotConfig) {
+      if (this._isDrawing && this._tempPositions.length >= plotConfig.minPoints - 1) {
+        this._updatePlotPreview(plotConfig, lonLat);
+      }
+      return;
+    }
+
+    if (this._isDrawing) {
+      if (this._drawType === DrawType.LINE) {
+        this._updateTempLine(lonLat);
+      } else if (this._drawType === DrawType.POLYGON) {
+        this._updateTempPolygon(lonLat);
+      }
+    }
+
+    if (this._startPos) {
+      this._updateRectOrCirclePreview(lonLat);
+    }
+  }
+
+  _onKeyDown(data) {
+    // ESC 取消绘制
+    if (data.key === 'Escape') {
+      this.cancelDrawing();
+    }
+    // Enter 完成当前绘制（线、面、标绘）
+    if (data.key === 'Enter') {
+      const plotConfig = PLOT_DRAW_CONFIG[this._drawType];
+      if (plotConfig && this._isDrawing && this._tempPositions.length >= plotConfig.minPoints) {
+        this._finishPlotDrawing(plotConfig);
+        return;
+      }
+      this.finishDrawing();
+    }
+    // Backspace 删除上一个点（用于线、面、标绘）
+    if (data.key === 'Backspace' && this._isDrawing && this._tempPositions.length > 0) {
+      const plotConfig = PLOT_DRAW_CONFIG[this._drawType];
+      if (plotConfig) {
+        this._tempPositions.pop();
+        const lastTemp = this._tempEntities.pop();
+        if (lastTemp) {
+          this.removeTempEntity(lastTemp);
+        }
+        this._updatePlotPreview(plotConfig);
+        return;
+      }
+
+      this._tempPositions.pop();
+      // 删除对应的临时辅助点
+      const lastTemp = this._tempEntities.pop();
+      if (lastTemp) {
+        this.removeTempEntity(lastTemp);
+      }
+      this._updateTempPositions();
+    }
+  }
+
+  _onRightClick(_lngLat, _entity, _movement) {
+    // 右键结束绘制（用于线、面、标绘）
+    if (this._isDrawing) {
+      const plotConfig = PLOT_DRAW_CONFIG[this._drawType];
+      if (plotConfig && this._tempPositions.length >= plotConfig.minPoints) {
+        this._finishPlotDrawing(plotConfig);
+        return;
+      }
+      this.finishDrawing();
+    }
+  }
+
+  _drawPoint(lonLat) {
+    const id = this.generateId('point');
+    this._graphicModule.CreatePoint(id)
+      .setPosition(lonLat)
+      .setColor(Cesium.Color.RED)
+      .setPixelSize(10);
+
+    this._emitGraphicCreated('point', id);
+  }
+
+  _handleLineClick(lonLat) {
+    this._tempPositions.push(lonLat);
+    this._isDrawing = true;
+
+    // 创建辅助点
+    const tempPoint = this.createTempEntity(this.generateId('temp_point'), {
+      position: Cesium.Cartesian3.fromDegrees(...lonLat),
+      point: {
+        color: Cesium.Color.YELLOW,
+        pixelSize: 8
+      }
+    });
+    this._tempEntities.push(tempPoint);
+
+    // 如果已经有至少2个点，创建或更新临时线
+    if (this._tempPositions.length >= 2) {
+      this._updateTempLine();
+    }
+
+    this._emitDrawProgress('line', this._tempPositions.slice());
+  }
+
+  _handlePolygonClick(lonLat) {
+    this._tempPositions.push(lonLat);
+    this._isDrawing = true;
+
+    // 创建辅助点
+    const tempPoint = this.createTempEntity(this.generateId('temp_point'), {
+      position: Cesium.Cartesian3.fromDegrees(...lonLat),
+      point: {
+        color: Cesium.Color.YELLOW,
+        pixelSize: 8
+      }
+    });
+    this._tempEntities.push(tempPoint);
+
+    // 如果已经有至少3个点，显示临时面
+    if (this._tempPositions.length >= 3) {
+      this._updateTempPolygon();
+    }
+
+    this._emitDrawProgress('polygon', this._tempPositions.slice());
+  }
+
+  _handleRectangleClick(lonLat) {
+    if (!this._startPos) {
+      // 第一次点击：设置起始点
+      this._startPos = lonLat;
+      // 创建起始点标记
+      const startMarker = this.createTempEntity(this.generateId('temp_start'), {
+        position: Cesium.Cartesian3.fromDegrees(...lonLat),
+        point: {
+          color: Cesium.Color.YELLOW,
+          pixelSize: 10
+        }
+      });
+      this._tempEntities.push(startMarker);
+    } else {
+      // 第二次点击：完成矩形
+      this._finishRectangle(lonLat);
+    }
+  }
+
+  _handleCircleClick(lonLat) {
+    if (!this._startPos) {
+      this._startPos = lonLat;
+      const startMarker = this.createTempEntity(this.generateId('temp_start'), {
+        position: Cesium.Cartesian3.fromDegrees(...lonLat),
+        point: {
+          color: Cesium.Color.YELLOW,
+          pixelSize: 10
+        }
+      });
+      this._tempEntities.push(startMarker);
+    } else {
+      this._finishCircle(lonLat);
+    }
+  }
+
+  _updateTempLine(mousePos) {
+    // 构建预览线位置：已有位置 + 鼠标当前位置（跟随鼠标）
+    const previewPositions = [...this._tempPositions];
+    if (mousePos) {
+      previewPositions.push(mousePos);
+    }
+
+    // 计算 Cartesian3 数组
+    const flatCoords = [];
+    for (const c of previewPositions) {
+      flatCoords.push(c[0], c[1], c[2] || 0);
+    }
+    const cartesians = Cesium.Cartesian3.fromDegreesArrayHeights(flatCoords);
+
+    if (!this._previewLine) {
+      // 首次创建预览线
+      this._previewLine = this.createTempEntity(this.generateId('temp_line'), {
+        polyline: {
+          positions: cartesians,
+          material: Cesium.Color.YELLOW,
+          width: 2
+        }
+      });
+      this._tempEntities.push(this._previewLine);
+    } else {
+      // 直接更新位置属性，避免重建实体
+      // this._previewLine.polyline.positions = cartesians;
+      this._previewLine.polyline.positions = new Cesium.CallbackProperty(() => {
+        return cartesians;
+      }, false);
+    }
+  }
+
+  _updateTempPolygon(mousePos) {
+    if (this._tempPositions.length < 3) return;
+
+    // 构建预览多边形：已有位置 + 鼠标当前位置 
+    const previewPositions = [...this._tempPositions];
+    if (mousePos) {
+      previewPositions.push(mousePos);
+    }
+    // previewPositions.push(this._tempPositions[0]); // 闭合
+
+    const flatCoords = [];
+    for (const c of previewPositions) {
+      flatCoords.push(c[0], c[1], c[2] || 0);
+    }
+    const cartesians = Cesium.Cartesian3.fromDegreesArrayHeights(flatCoords);
+
+    if (!this._previewPolygon) {
+      // 首次创建预览面
+      this._previewPolygon = this.createTempEntity(this.generateId('temp_polygon'), {
+        polygon: {
+          hierarchy: new Cesium.PolygonHierarchy(cartesians),
+          material: Cesium.Color.YELLOW.withAlpha(0.5),
+          outline: false,
+          outlineColor: Cesium.Color.YELLOW,
+        }
+      });
+      this._tempEntities.push(this._previewPolygon);
+    } else {
+      // 直接更新层级，避免重建实体，使用 CallbackProperty 防止闪烁
+      this._previewPolygon.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+        return new Cesium.PolygonHierarchy(cartesians);
+      }, false);
+    }
+  }
+
+  _updateRectOrCirclePreview(currentLonLat) {
+    if (!this._startPos) return;
+
+    if (this._drawType === DrawType.RECTANGLE) {
+      this._updateRectPreview(currentLonLat);
+    } else if (this._drawType === DrawType.CIRCLE) {
+      this._updateCirclePreview(currentLonLat);
+    }
+  }
+
+  _updateRectPreview(currentLonLat) {
+    const corner1 = this._startPos;
+    const corner2 = currentLonLat;
+
+    // 计算矩形四个角
+    const positions = [
+      [corner1[0], corner1[1]],
+      [corner2[0], corner1[1]],
+      [corner2[0], corner2[1]],
+      [corner1[0], corner2[1]],
+      [corner1[0], corner1[1]]
+    ];
+
+    const flatCoords = [];
+    for (const c of positions) {
+      flatCoords.push(c[0], c[1], 0);
+    }
+    const cartesians = Cesium.Cartesian3.fromDegreesArrayHeights(flatCoords);
+
+    if (!this._previewRect) {
+      this._previewRect = this.createTempEntity(this.generateId('temp_rect'), {
+        polyline: {
+          positions: new Cesium.CallbackProperty(() => cartesians, false),
+          material: Cesium.Color.YELLOW.withAlpha(0.7),
+          width: 2
+        },
+        polygon: {
+          hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(cartesians), false),
+          material: Cesium.Color.YELLOW.withAlpha(0.2),
+          outline: false
+        }
+      });
+      this._previewRect._isPreview = true;
+      this._tempEntities.push(this._previewRect);
+    } else {
+      // 直接更新位置属性
+      this._previewRect.polyline.positions = new Cesium.CallbackProperty(() => {
+        const c1 = this._startPos;
+        const c2 = this._currentMousePos;
+        if (!c1 || !c2) return cartesians;
+        const pos = [
+          [c1[0], c1[1]],
+          [c2[0], c1[1]],
+          [c2[0], c2[1]],
+          [c1[0], c2[1]],
+          [c1[0], c1[1]]
+        ];
+        const flat = [];
+        for (const p of pos) {
+          flat.push(p[0], p[1], 0);
+        }
+        return Cesium.Cartesian3.fromDegreesArrayHeights(flat);
+      }, false);
+      this._previewRect.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+        const c1 = this._startPos;
+        const c2 = this._currentMousePos;
+        if (!c1 || !c2) return new Cesium.PolygonHierarchy(cartesians);
+        const pos = [
+          [c1[0], c1[1]],
+          [c2[0], c1[1]],
+          [c2[0], c2[1]],
+          [c1[0], c2[1]],
+          [c1[0], c1[1]]
+        ];
+        const flat = [];
+        for (const p of pos) {
+          flat.push(p[0], p[1], 0);
+        }
+        return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(flat));
+      }, false);
+    }
+  }
+
+  _updateCirclePreview(currentLonLat) {
+    const center = this._startPos;
+    const radius = this._calcDistance(center, currentLonLat);
+    const segments = 64;
+
+    if (!this._previewCircle) {
+      this._previewCircle = this.createTempEntity(this.generateId('temp_circle'), {
+        polygon: {
+          hierarchy: new Cesium.CallbackProperty(() => {
+            const positions = this._generateCirclePositions(center, radius, segments);
+            const flat = positions.flatMap(c => [c[0], c[1], 0]);
+            return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(flat));
+          }, false),
+          material: Cesium.Color.YELLOW.withAlpha(0.2),
+          outline: false // 地形贴合时不支持 outline，设为 false 避免警告
+        }
+      });
+      this._previewCircle._isPreview = true;
+      this._tempEntities.push(this._previewCircle);
+    } else {
+      // 直接更新
+      this._previewCircle.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+        const r = this._calcDistance(this._startPos, this._currentMousePos);
+        const pos = this._generateCirclePositions(this._startPos, r, 64);
+        const flat = pos.flatMap(c => [c[0], c[1], 0]);
+        return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(flat));
+      }, false);
+    }
+  }
+
+  _finishRectangle(corner2) {
+    const corner1 = this._startPos;
+    const positions = [
+      [corner1[0], corner1[1]],
+      [corner2[0], corner1[1]],
+      [corner2[0], corner2[1]],
+      [corner1[0], corner2[1]]
+    ];
+
+    const id = this.generateId('rectangle');
+    const entity = this._graphicModule.CreatePolygon(id)
+      .setPositions(positions)
+      .setColor(Cesium.Color.BLUE.withAlpha(0.5))
+      .setOutlineColor(Cesium.Color.BLUE)
+      .setOutlineWidth(2)
+      .setHeightReference(Cesium.HeightReference.NONE);
+
+    this.clearTempEntities();
+    this._startPos = null;
+    this._emitGraphicCreated('rectangle', id);
+  }
+
+  _finishCircle(edgeLonLat) {
+    const center = this._startPos;
+    const radius = this._calcDistance(center, edgeLonLat);
+    const positions = this._generateCirclePositions(center, radius, 64);
+
+    const id = this.generateId('circle');
+    console.log('创建圆:', { center, radius, edgeLonLat, positionsCount: positions.length });
+
+    // 创建圆并标记为圆形
+    const wrapper = this._graphicModule.CreatePolygon(id);
+    wrapper.setPositions(positions)
+      .setColor(Cesium.Color.BLUE.withAlpha(0.5))
+      .setOutlineColor(Cesium.Color.BLUE)
+      .setOutlineWidth(2);
+
+    // 给 entity 添加圆形标记（用于 EditTool 特殊处理）
+    const entity = wrapper._entity;
+    entity._isCircle = true;
+    entity._circleCenter = center;  // [lon, lat]
+    entity._circleRadius = radius;  // 米
+
+    this.clearTempEntities();
+    this._startPos = null;
+    this._currentMousePos = null;
+    this._emitGraphicCreated('circle', id);
+  }
+
+  _generateCirclePositions(center, radius, segments) {
+    const [lon, lat] = center;
+    const positions = [];
+    const radPerDeg = Math.PI / 180;
+
+    // 当前纬度的经度米数（随纬度变化）
+    const metersPerLonDeg = 111320 * Math.cos(lat * radPerDeg);
+    const metersPerLatDeg = 110540; // 纬度方向相对固定
+
+    for (let i = 0; i <= segments; i++) {
+      const angle = (i / segments) * Math.PI * 2;
+
+      // 东向和北向偏移（米）→ 转换为度
+      const dLon = (radius * Math.cos(angle) / metersPerLonDeg);
+      const dLat = (radius * Math.sin(angle) / metersPerLatDeg);
+
+      positions.push([lon + dLon, lat + dLat]);
+    }
+
+    return positions;
+  }
+
+  _calcDistance(coord1, coord2) {
+    const earthRadius = 6371000; // 米
+    const [lon1, lat1] = coord1.map(d => d * Math.PI / 180);
+    const [lon2, lat2] = coord2.map(d => d * Math.PI / 180);
+
+    const dLat = lat2 - lat1;
+    const dLon = lon2 - lon1;
+
+    const a = Math.sin(dLat / 2) ** 2 +
+      Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+    return earthRadius * c;
+  }
+
+  /**
+   * 将椭圆控制点中的短轴端点投影到与长轴垂直的直线上
+   * @param {Array} points [center, majorEnd, minorEndOrMouse]
+   * @returns {Array} [center, majorEnd, projectedMinorEnd]
+   */
+  _normalizeEllipseControlPoints(points) {
+    if (!points || points.length < 3) return points;
+
+    const center = points[0];
+    const majorEnd = points[1];
+    const rawMinor = points[2];
+
+    const major = [majorEnd[0] - center[0], majorEnd[1] - center[1]];
+    const majorLen = Math.hypot(major[0], major[1]);
+    if (majorLen === 0) return points;
+
+    const ux = major[0] / majorLen;
+    const uy = major[1] / majorLen;
+    // 长轴逆时针旋转 90° 得到短轴方向
+    const perpUx = -uy;
+    const perpUy = ux;
+
+    const mouseVec = [rawMinor[0] - center[0], rawMinor[1] - center[1]];
+    const projectedLen = mouseVec[0] * perpUx + mouseVec[1] * perpUy;
+
+    return [
+      center,
+      majorEnd,
+      [center[0] + perpUx * projectedLen, center[1] + perpUy * projectedLen, center[2] || 0]
+    ];
+  }
+
+  // ==================== 标绘类型绘制方法 ====================
+
+  /**
+   * 处理标绘类型点击事件
+   * @param {Array} lngLat [lon, lat, height]
+   * @param {object} config 标绘配置
+   */
+  _handlePlotClick(lngLat, config) {
+    this._tempPositions.push(lngLat);
+    this._isDrawing = true;
+
+    // 创建辅助点
+    const tempPoint = this.createTempEntity(this.generateId('temp_point'), {
+      position: Cesium.Cartesian3.fromDegrees(...lngLat),
+      point: {
+        color: Cesium.Color.YELLOW,
+        pixelSize: 8
+      }
+    });
+    this._tempEntities.push(tempPoint);
+
+    // 更新预览
+    if (this._tempPositions.length >= config.minPoints) {
+      this._updatePlotPreview(config);
+    }
+
+    this._emitDrawProgress(config.plotType, this._tempPositions.slice());
+
+    // 判断是否完成绘制
+    if (config.finishOnCount && this._tempPositions.length >= config.finishOnCount) {
+      this._finishPlotDrawing(config);
+      return;
+    }
+
+    // 点数达到最小值后可以右键/Enter 结束（用于双击结束的类型）
+    if (config.finishOnDoubleClick && this._tempPositions.length >= config.minPoints) {
+      // 不自动完成，等待右键/Enter/双击
+      console.log(`标绘 ${config.plotType} 已达到最小点数，可右键或按 Enter 完成`);
+    }
+  }
+
+  /**
+   * 更新标绘图元预览
+   * @param {object} config 标绘配置
+   * @param {Array} mousePos 当前鼠标位置 [lon, lat, height]
+   */
+  _updatePlotPreview(config, mousePos) {
+    const isEllipse = config.plotType === PlotGraphicType.ELLIPSE;
+    const normalizeForEllipse = (pts) => isEllipse ? this._normalizeEllipseControlPoints(pts) : pts;
+
+    const previewPositions = [...this._tempPositions];
+    if (mousePos) {
+      previewPositions.push(mousePos);
+    }
+
+    if (previewPositions.length < config.minPoints) return;
+
+    const factoryName = `create${this._capitalizePlotType(config.plotType)}`;
+    if (!PlotGeometryUtil[factoryName]) {
+      console.warn(`未知标绘类型: ${config.plotType}`);
+      return;
+    }
+
+    const geometryPositions = normalizeForEllipse(previewPositions);
+    const positions = PlotGeometryUtil[factoryName](geometryPositions);
+    const isLine = config.category === 'line';
+    const flatCoords = [];
+    for (const c of positions) {
+      flatCoords.push(c[0], c[1], c[2] || 0);
+    }
+    const cartesians = Cesium.Cartesian3.fromDegreesArrayHeights(flatCoords);
+
+    if (!this._previewPlot) {
+      if (isLine) {
+        this._previewPlot = this.createTempEntity(this.generateId('temp_plot'), {
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => cartesians, false),
+            material: Cesium.Color.YELLOW,
+            width: 2
+          }
+        });
+      } else {
+        this._previewPlot = this.createTempEntity(this.generateId('temp_plot'), {
+          polygon: {
+            hierarchy: new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(cartesians), false),
+            material: Cesium.Color.YELLOW.withAlpha(0.3),
+            outline: false
+          },
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => [...cartesians, cartesians[0]], false),
+            material: Cesium.Color.YELLOW,
+            width: 1
+          }
+        });
+      }
+      this._previewPlot._isPreview = true;
+      this._tempEntities.push(this._previewPlot);
+    } else {
+      const self = this;
+      if (isLine) {
+        this._previewPlot.polyline.positions = new Cesium.CallbackProperty(() => {
+          const dynamicPositions = [...self._tempPositions];
+          if (self._currentMousePos) {
+            dynamicPositions.push(self._currentMousePos);
+          }
+          if (dynamicPositions.length < config.minPoints) return [];
+          const pos = PlotGeometryUtil[factoryName](normalizeForEllipse(dynamicPositions));
+          const flat = [];
+          for (const c of pos) {
+            flat.push(c[0], c[1], c[2] || 0);
+          }
+          return Cesium.Cartesian3.fromDegreesArrayHeights(flat);
+        }, false);
+      } else {
+        this._previewPlot.polygon.hierarchy = new Cesium.CallbackProperty(() => {
+          const dynamicPositions = [...self._tempPositions];
+          if (self._currentMousePos) {
+            dynamicPositions.push(self._currentMousePos);
+          }
+          if (dynamicPositions.length < config.minPoints) return new Cesium.PolygonHierarchy([]);
+          const pos = PlotGeometryUtil[factoryName](normalizeForEllipse(dynamicPositions));
+          const flat = [];
+          for (const c of pos) {
+            flat.push(c[0], c[1], c[2] || 0);
+          }
+          return new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(flat));
+        }, false);
+        this._previewPlot.polyline.positions = new Cesium.CallbackProperty(() => {
+          const dynamicPositions = [...self._tempPositions];
+          if (self._currentMousePos) {
+            dynamicPositions.push(self._currentMousePos);
+          }
+          if (dynamicPositions.length < config.minPoints) return [];
+          const pos = PlotGeometryUtil[factoryName](normalizeForEllipse(dynamicPositions));
+          const flat = [];
+          for (const c of pos) {
+            flat.push(c[0], c[1], c[2] || 0);
+          }
+          const cart = Cesium.Cartesian3.fromDegreesArrayHeights(flat);
+          return [...cart, cart[0]];
+        }, false);
+      }
+    }
+  }
+
+  /**
+   * 完成标绘图元绘制
+   * @param {object} config 标绘配置
+   */
+  _finishPlotDrawing(config) {
+    if (this._tempPositions.length < config.minPoints) return;
+
+    const factoryName = `create${this._capitalizePlotType(config.plotType)}`;
+    if (!PlotGeometryUtil[factoryName]) {
+      console.warn(`未知标绘类型: ${config.plotType}`);
+      return;
+    }
+
+    const id = this.generateId(config.plotType);
+    const isLine = config.category === 'line';
+
+    // 椭圆：将第三点击点投影到与长轴垂直的直线上
+    const finalPositions = config.plotType === PlotGraphicType.ELLIPSE
+      ? this._normalizeEllipseControlPoints(this._tempPositions)
+      : this._tempPositions;
+
+    // 创建标绘图元
+    const wrapper = this._graphicModule.createPlotGraphic(
+      id,
+      config.plotType,
+      finalPositions
+    );
+
+    // 应用默认样式
+    if (isLine) {
+      wrapper.setColor(Cesium.Color.BLUE).setWidth(2);
+    } else {
+      wrapper
+        .setColor(Cesium.Color.BLUE.withAlpha(0.5))
+        .setOutlineColor(Cesium.Color.BLUE)
+        .setOutlineWidth(2);
+    }
+
+    this.clearTempEntities();
+    this._startPos = null;
+    this._currentMousePos = null;
+    this._isDrawing = false;
+    this._tempPositions = [];
+    this._previewPlot = null;
+
+    this._emitGraphicCreated(config.plotType, id);
+  }
+
+  /**
+   * 将标绘类型名转为工厂方法名
+   * @private
+   */
+  _capitalizePlotType(plotType) {
+    return plotType
+      .replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+      .replace(/^./, s => s.toUpperCase());
+  }
+
+  _updateTempPositions() {
+    if (this._drawType === DrawType.LINE) {
+      this._updateTempLine();
+    } else if (this._drawType === DrawType.POLYGON) {
+      this._updateTempPolygon();
+    }
+  }
+
+  /**
+   * 取消当前绘制
+   */
+  cancelDrawing() {
+    this.clearTempEntities();
+    this._tempPositions = [];
+    this._isDrawing = false;
+    this._clickCount = 0;
+    this._startPos = null;
+    this._currentMousePos = null;
+    this._emitDrawCancel();
+  }
+
+  /**
+   * 完成当前绘制（回车键触发）
+   */
+  finishDrawing() {
+    if (this._drawType === DrawType.LINE && this._tempPositions.length >= 2) {
+      const id = this.generateId('line');
+      this._graphicModule.CreateLine(id)
+        .setPositions(this._tempPositions)
+        .setColor(Cesium.Color.BLUE)
+        .setWidth(2);
+
+      this._emitGraphicCreated('line', id);
+    } else if (this._drawType === DrawType.POLYGON && this._tempPositions.length >= 3) {
+      const positions = [...this._tempPositions, this._tempPositions[0]]; // 闭合
+      const id = this.generateId('polygon');
+      this._graphicModule.CreatePolygon(id)
+        .setPositions(positions)
+        .setColor(Cesium.Color.BLUE.withAlpha(0.5))
+        .setOutlineColor(Cesium.Color.BLUE)
+
+      this._emitGraphicCreated('polygon', id);
+    }
+
+    this.clearTempEntities();
+    this._tempPositions = [];
+    this._isDrawing = false;
+    this._clickCount = 0;
+    this._currentMousePos = null;
+  }
+
+  /**
+   * 清除所有临时图元
+   */
+  clearTempEntities() {
+    this._tempEntities.forEach(entity => {
+      this.removeTempEntity(entity);
+    });
+    this._tempEntities = [];
+    this._previewLine = null;
+    this._previewPolygon = null;
+    this._previewRect = null;
+    this._previewCircle = null;
+    this._previewPlot = null;
+  }
+
+  _emitGraphicCreated(type, id) {
+    // 触发图元创建事件
+    if (this._options.onGraphicCreated) {
+      this._options.onGraphicCreated({ type, id });
+    }
+  }
+
+  _emitDrawProgress(type, positions) {
+    if (this._options.onDrawProgress) {
+      this._options.onDrawProgress({ type, positions });
+    }
+  }
+
+  _emitDrawCancel() {
+    if (this._options.onDrawCancel) {
+      this._options.onDrawCancel();
+    }
+  }
+}