<template>
  <div class="cesium-container">
    <div id="cesiumViewer" ref="cesiumViewer"></div>

    <drawing-toolbar
      :draw-dom-click="drawDomClick"
      :drawing-mode="drawingMode"
      :has-entities="allEntities.length > 0"
      @toggle-drawing="toggleDrawing"
      @clear-all="clearAll"
      @export-data="exportData"
      @import-data="importData"
      @locate="handleLocate"
    />

    <measurement-panel
      v-if="measurementResult"
      :result="measurementResult"
      @close="measurementResult = null"
    />
  </div>
</template>

<script>
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import DrawingToolbar from './DrawingToolbar.vue'
import MeasurementPanel from './MeasurementPanel.vue'
import axios from 'axios'
import request from '@/utils/request'
import { getToken } from '@/utils/auth'
export default {
  name: 'CesiumMap',
  props: {
    drawDomClick: {
      type: Boolean,
      default: false,
      // 增加 props 类型校验，方便调试
      validator(val) {
        const isBoolean = typeof val === 'boolean'
        if (!isBoolean) {
          console.error('drawDomClick 必须是布尔值，当前值：', val, '类型：', typeof val)
        }
        return isBoolean
      }
    },
  },
  watch: {
    drawDomClick: {
      immediate: true, // 组件初始化时立即执行一次
      handler(newVal, oldVal) {
        // 可选：如果需要在值变化时执行额外逻辑（比如初始化地图）
        if (newVal) {
          // this.initMap()
        }
      }
    }
  },
  data() {
    return {
      viewer: null,
      scaleBar: null,

      // 绘制相关
      drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
      drawingHandler: null,
      tempEntity: null,      // 最终实体
      tempPreviewEntity: null, // 预览实体（新增）
      drawingPoints: [],
      drawingStartPoint: null,
      isDrawing: false,

      // 实体管理
      allEntities: [], // 所有绘制的实体
      entityCounter: 0,
      selectedEntity: null, // 当前选中的实体

      // 测量结果
      measurementResult: null,

      // 默认样式
      defaultStyles: {
        point: { color: '#FF0000', size: 12 },
        line: { color: '#00FF00', width: 3 },
        polygon: { color: '#0000FF', opacity: 0.5, width: 2 },
        rectangle: { color: '#FFA500', opacity: 0.3, width: 2 },
        circle: { color: '#800080', opacity: 0.4, width: 2 },
        sector: { color: '#FF6347', opacity: 0.5, width: 2 },
        arrow: { color: '#FF0000', width: 6 },
        text: { color: '#000000', font: '32px Microsoft YaHei, PingFang SC, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.8)' },
        image: { width: 100, height: 100 }
      }
    }
  },
  components: {
    DrawingToolbar,
    MeasurementPanel
  },
  mounted() {
    console.log(this.drawDomClick,999999)
    // this.initMap()
    this.checkCesiumLoaded()
  },

  beforeDestroy() {
    this.destroyViewer()
  },

  methods: {
    checkCesiumLoaded() {
      if (typeof Cesium === 'undefined') {
        console.error('Cesium未加载，请检查CDN链接');
        // 可以设置重试机制
        setTimeout(() => {
          if (typeof Cesium !== 'undefined') {
            this.initMap();
          } else {
            console.error('Cesium加载失败');
          }
        }, 1000);
      } else {
        this.initMap();
      }
    },
    initMap() {
      try {
        // 确保 Cesium 已加载
        Cesium.buildModuleUrl.setBaseUrl(window.CESIUM_BASE_URL)
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjN2MzMmE5OS01NGU3LTQzOGQtYjdjZi1mNGIwZTFjZjQ0NmEiLCJpZCI6MTQ0MDc2LCJpYXQiOjE2ODU3NjY1OTN9.iCmFY-5WNdvyAT-EO2j-unrFm4ZN9J6aSuB2wElQZ-I'

        this.viewer = new Cesium.Viewer('cesiumViewer', {
          animation: false,
          fullscreenButton: false,
          baseLayerPicker: false,
          navigationInstructionsInitiallyVisible: false,
          geocoder: false,
          homeButton: false,
          infoBox: false,
          sceneModePicker: false,
          selectionIndicator: false,
          timeline: false,
          navigationHelpButton: false,
          sceneMode: Cesium.SceneMode.SCENE2D,
          mapProjection: new Cesium.WebMercatorProjection(),
          imageryProvider: false,
          terrainProvider: new Cesium.EllipsoidTerrainProvider(),
          baseLayer: false
        })

        this.viewer.cesiumWidget.creditContainer.style.display = "none"
        this.loadOfflineMap()
        this.setup2DConstraints()

        this.viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 5000000),
          orientation: {
            heading: 0,
            pitch: -Cesium.Math.PI_OVER_TWO,
            roll: 0
          }
        })

        this.initScaleBar()
        console.log('Cesium离线二维地图已加载')

      } catch (error) {
        console.error('地图错误:', error)
        // 如果Cesium加载失败，显示错误信息
        this.showErrorMessage();
      }
    },
    showErrorMessage() {
      const container = document.getElementById('cesiumViewer');
      if (container) {
        container.innerHTML = `
          <div style="
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
            color: #666;
            font-family: Arial, sans-serif;
          ">
            <h3 style="margin-bottom: 20px;">地图加载失败</h3>
            <p>可能的原因：</p>
            <ul style="text-align: left; margin: 10px 0;">
              <li>网络连接问题</li>
              <li>Cesium CDN资源未加载</li>
              <li>浏览器兼容性问题</li>
            </ul>
            <button onclick="location.reload()" style="
              margin-top: 20px;
              padding: 10px 20px;
              background: #4dabf7;
              color: white;
              border: none;
              border-radius: 4px;
              cursor: pointer;
            ">
              重新加载
            </button>
          </div>
        `;
      }
    },

    setup2DConstraints() {
      const scene = this.viewer.scene
      const controller = scene.screenSpaceCameraController

      controller.enableTilt = false
      controller.enableRotate = false
      controller.enableLook = false
      scene.screenSpaceCameraController.maximumPitch = 0
      scene.screenSpaceCameraController.minimumPitch = 0
    },

    loadOfflineMap() {
  this.viewer.imageryLayers.removeAll()
  try {
    // 修改部分：将原来的 ArcGIS 卫星图替换为高德矢量行政图
    const administrativeMap = new Cesium.UrlTemplateImageryProvider({
      // 高德地图矢量瓦片服务（纯 2D 行政图风格）
      url: 'https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      minimumLevel: 0,
      maximumLevel: 18,
      // 高德不需要专门的 TilingScheme，默认即可，或者使用 WebMercator
      tilingScheme: new Cesium.WebMercatorTilingScheme()
    })

    this.viewer.imageryLayers.addImageryProvider(administrativeMap)

    // 如果需要叠加路网或注记，可以在这里再 add 一个图层

  } catch (error) {
    console.error('加载地图失败:', error)
    this.showGridLayer()
  }
},

    showGridLayer() {
      const gridProvider = new Cesium.GridImageryProvider()
      this.viewer.imageryLayers.addImageryProvider(gridProvider)
      this.addCoordinateLabels()
    },

    addCoordinateLabels() {
      for (let lon = -180; lon <= 180; lon += 30) {
        for (let lat = -90; lat <= 90; lat += 30) {
          this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(lon, lat),
            label: {
              text: `${lat}°N\n${lon}°E`,
              font: '12px sans-serif',
              fillColor: Cesium.Color.BLACK,
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              pixelOffset: new Cesium.Cartesian2(10, 0)
            }
          })
        }
      }
    },

    // ================== 绘制功能 ==================

    toggleDrawing(mode) {
      if (this.drawingMode === mode) {
        // 停止当前绘制
        this.stopDrawing()
        this.drawingMode = null
      } else {
        // 停止之前的绘制
        if (this.drawingMode) {
          this.stopDrawing()
        }

        // 开始新的绘制
        this.drawingMode = mode
        this.startDrawing(mode)
      }
    },

    startDrawing(mode) {
      this.stopDrawing()
      this.drawingPoints = []
      this.drawingStartPoint = null
      this.isDrawing = true

      this.drawingHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)

      // 根据模式设置不同的鼠标样式和事件
      switch(mode) {
        case 'point':
          this.startPointDrawing()
          break
        case 'line':
          this.startLineDrawing()
          break
        case 'polygon':
          this.startPolygonDrawing()
          break
        case 'rectangle':
          this.startRectangleDrawing()
          break
        case 'circle':
          this.startCircleDrawing()
          break
        case 'sector':
          this.startSectorDrawing()
          break
        case 'arrow':
          this.startArrowDrawing()
          break
        case 'text':
          this.startTextDrawing()
          break
        case 'image':
          this.startImageDrawing()
          break
      }

      this.viewer.scene.canvas.style.cursor = 'crosshair'
      console.log(`开始绘制 ${this.getTypeName(mode)}`)
    },

    stopDrawing() {
      if (this.drawingHandler) {
        this.drawingHandler.destroy();
        this.drawingHandler = null;
      }

      if (this.tempEntity) {
        this.viewer.entities.remove(this.tempEntity);
        this.tempEntity = null;
      }

      // 确保也清理预览实体
      if (this.tempPreviewEntity) {
        this.viewer.entities.remove(this.tempPreviewEntity);
        this.tempPreviewEntity = null;
      }

      this.drawingPoints = [];
      this.drawingStartPoint = null;
      this.isDrawing = false;

      this.viewer.scene.canvas.style.cursor = 'default';
    },
    // ********************************************************************
    // 绘制点
    startPointDrawing() {
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position)
        if (position) {
          const { lat, lng } = this.cartesianToLatLng(position)
          this.addPointEntity(lat, lng)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },

    // 绘制线
    // 绘制线
    startLineDrawing() {
      this.drawingPoints = [];
      // 记录当前鼠标的实时位置
      let activeCursorPosition = null;

      // 清除可能存在的旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
      this.tempEntity = null;
      this.tempPreviewEntity = null;

      // 1. 鼠标移动事件：仅更新坐标变量，不操作实体
      this.drawingHandler.setInputAction((movement) => {
        const newPosition = this.getClickPosition(movement.endPosition);
        if (newPosition) {
          activeCursorPosition = newPosition;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 2. 鼠标点击事件：确定点位
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          this.drawingPoints.push(position);

          // === 第一步：点击第一个点后，立即创建“动态虚线” ===
          if (this.drawingPoints.length === 1) {
            activeCursorPosition = position; // 初始化鼠标位置

            // 创建预览虚线（只创建这一次，之后它会自动随数据更新）
            this.tempPreviewEntity = this.viewer.entities.add({
              polyline: {
                // 关键：使用 CallbackProperty 动态获取位置
                positions: new Cesium.CallbackProperty(() => {
                  // 只有当有点且鼠标位置存在时才渲染
                  if (this.drawingPoints.length > 0 && activeCursorPosition) {
                    // 获取最后一个已确认的点
                    const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
                    // 返回 [最后一个点, 当前鼠标位置]
                    return [lastPoint, activeCursorPosition];
                  }
                  return [];
                }, false),
                width: this.defaultStyles.line.width,
                // 虚线材质
                material: new Cesium.PolylineDashMaterialProperty({
                  color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
                  dashLength: 16
                }),
                clampToGround: true // 贴地
              }
            });
          }
          // === 第二步：点击后续点时，绘制/延长“固定实线” ===
          else {
            // 移除旧的实线，重新画包含新点的实线
            if (this.tempEntity) {
              this.viewer.entities.remove(this.tempEntity);
            }
            this.tempEntity = this.viewer.entities.add({
              polyline: {
                positions: this.drawingPoints,
                width: this.defaultStyles.line.width,
                material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
                clampToGround: true
              }
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 3. 右键完成绘制
      this.drawingHandler.setInputAction(() => {
        // 完成绘制前，移除那条动态虚线
        if (this.tempPreviewEntity) {
          this.viewer.entities.remove(this.tempPreviewEntity);
          this.tempPreviewEntity = null;
        }

        if (this.drawingPoints.length > 1) {
          this.finishLineDrawing();
        } else {
          this.cancelDrawing();
        }

        // 重置局部变量
        activeCursorPosition = null;
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    finishLineDrawing() {
      // 将预览线段转换为最终线段
      if (this.drawingPoints.length > 1) {
        // 移除预览线段
        if (this.tempPreviewEntity) {
          this.viewer.entities.remove(this.tempPreviewEntity);
          this.tempPreviewEntity = null;
        }

        // 创建最终的实线实体
        const entity = this.addLineEntity([...this.drawingPoints]);

        // 计算长度
        const length = this.calculateLineLength([...this.drawingPoints]);
        this.measurementResult = {
          distance: length,
          type: 'line'
        };

        this.stopDrawing();
        return entity;
      } else {
        this.cancelDrawing();
        return null;
      }
    },

    // 绘制多边形
    startPolygonDrawing() {
      this.drawingPoints = [];
      let activeCursorPosition = null; // 存储鼠标实时位置

      // 1. 清理旧实体
      // 移除之前可能遗留的实体，确保干净的画布
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
      this.tempEntity = null;
      this.tempPreviewEntity = null;

      // 2. 鼠标移动事件：只负责更新坐标变量，不涉及繁重的绘图逻辑
      this.drawingHandler.setInputAction((movement) => {
        const newPosition = this.getClickPosition(movement.endPosition);
        if (newPosition) {
          activeCursorPosition = newPosition;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 3. 鼠标点击事件：添加关键点
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          this.drawingPoints.push(position);

          // === 关键逻辑：点击第一个点时，创建唯一的“动态多边形” ===
          if (this.drawingPoints.length === 1) {
            activeCursorPosition = position; // 初始化鼠标位置

            this.tempEntity = this.viewer.entities.add({
              // --- 填充面配置 ---
              polygon: {
                // hierarchy 使用 CallbackProperty 实现动态填充
                hierarchy: new Cesium.CallbackProperty(() => {
                  // 组合：已确定的点 + 当前鼠标位置
                  if (activeCursorPosition) {
                    return new Cesium.PolygonHierarchy([...this.drawingPoints, activeCursorPosition]);
                  }
                  return new Cesium.PolygonHierarchy(this.drawingPoints);
                }, false),
                // 使用半透明颜色，方便看到地图底图
                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
                // 确保贴地
                perPositionHeight: false
              },
              // --- 边框线配置 ---
              polyline: {
                // positions 使用 CallbackProperty 实现动态闭合线
                positions: new Cesium.CallbackProperty(() => {
                  if (activeCursorPosition) {
                    // 闭合回路：[所有点, 鼠标位置, 回到起点]
                    return [...this.drawingPoints, activeCursorPosition, this.drawingPoints[0]];
                  }
                  return this.drawingPoints;
                }, false),
                width: this.defaultStyles.line.width,
                // 边框使用虚线，表示正在编辑中
                material: new Cesium.PolylineDashMaterialProperty({
                  color: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
                  dashLength: 16
                }),
                clampToGround: true
              }
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 4. 右键完成绘制
      this.drawingHandler.setInputAction(() => {
        if (this.drawingPoints.length >= 3) {
          this.finishPolygonDrawing(); // 调用原有的完成逻辑
        } else {
          this.cancelDrawing(); // 点数不够则取消
        }

        // 重置状态
        activeCursorPosition = null;
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    finishPolygonDrawing() {
      const positions = [...this.drawingPoints]
      const entity = this.addPolygonEntity(positions)

      // 计算面积
      const area = this.calculatePolygonArea(positions)
      this.measurementResult = {
        area: area,
        type: 'polygon'
      }

      this.stopDrawing()
      return entity
    },

    // 绘制矩形（优化版：两点定矩形，实时预览）
    startRectangleDrawing() {
      this.drawingPoints = []; // 存储起点和终点
      let activeCursorPosition = null; // 实时鼠标位置
      let startPoint = null; // 记录起点

      // 1. 清理旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      this.tempEntity = null;

      // 2. 鼠标移动事件：更新鼠标位置
      this.drawingHandler.setInputAction((movement) => {
        const newPosition = this.getClickPosition(movement.endPosition);
        if (newPosition) {
          activeCursorPosition = newPosition;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 3. 鼠标点击事件
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          // --- 情况A：第一次点击（确定起点） ---
          if (!startPoint) {
            startPoint = position;
            this.drawingPoints.push(startPoint);
            activeCursorPosition = startPoint; // 初始化鼠标位置

            // 创建动态预览矩形
            this.tempEntity = this.viewer.entities.add({
              rectangle: {
                // 关键：使用 CallbackProperty 动态计算矩形范围
                coordinates: new Cesium.CallbackProperty(() => {
                  if (startPoint && activeCursorPosition) {
                    // 使用 Cesium 内置工具，根据两个点（对角）自动计算矩形范围
                    return Cesium.Rectangle.fromCartesianArray([startPoint, activeCursorPosition]);
                  }
                  return Cesium.Rectangle.fromDegrees(0, 0, 0, 0);
                }, false),
                // 样式：半透明填充 + 边框
                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
                outlineWidth: 2,
                clampToGround: true // 贴地
              }
            });
          }
          // --- 情况B：第二次点击（确定终点） ---
          else {
            this.drawingPoints.push(position);
            // 停止监听鼠标移动，因为形状已确定
            activeCursorPosition = null;

            // 调用完成逻辑
            this.finishRectangleDrawing();
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 4. 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    finishRectangleDrawing() {
      // 1. 获取最终的矩形范围对象
      const rect = Cesium.Rectangle.fromCartesianArray(this.drawingPoints);

      // 2. 移除动态预览的临时实体
      if (this.tempEntity) {
        this.viewer.entities.remove(this.tempEntity);
        this.tempEntity = null;
      }

      // 3. 创建最终显示的静态实体
      const finalEntity = this.viewer.entities.add({
        id: 'rectangle-' + new Date().getTime(), // 给个唯一ID
        rectangle: {
          coordinates: rect,
          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
          outlineWidth: 2,
          clampToGround: true
        }
      });

      // 4. 记录到实体列表
      this.allEntities.push(finalEntity);

      // 5. 计算并显示面积
      const area = this.calculateRectangleArea(rect);
      this.measurementResult = {
        area: area,
        type: 'rectangle'
      };

      // 6. 重置状态
      this.stopDrawing();
    },

    // 计算矩形面积（辅助方法）
    calculateRectangleArea(rectangle) {
      // 获取地球椭球体对象
      const ellipsoid = this.viewer.scene.globe.ellipsoid;

      // 方法一：使用 Cesium 几何管道计算（更精确，但需要特定模块支持）
      // const geometry = new Cesium.RectangleGeometry({ rectangle: rectangle });
      // const geometryInstance = Cesium.RectangleGeometry.createGeometry(geometry);
      // ...比较复杂

      // 方法二：使用采样估算（简单且足够精确）
      // 获取矩形的四个角（弧度）
      const west = rectangle.west;
      const south = rectangle.south;
      const east = rectangle.east;
      const north = rectangle.north;

      // 计算中心点的纬度
      const centerLat = (south + north) / 2;

      // 计算宽度（东西向距离）：使用余弦定理校正纬度影响
      // 地球半径约为 6378137 米
      const R = 6378137;
      const width = (east - west) * R * Math.cos(centerLat);

      // 计算高度（南北向距离）
      const height = (north - south) * R;

      // 面积 = 宽 * 高
      const area = Math.abs(width * height);

      return area;
    },
    // 绘制圆形
    startCircleDrawing() {
      this.drawingPoints = []; // 存储圆心
      let activeCursorPosition = null; // 实时鼠标位置
      let centerPoint = null; // 圆心坐标

      // 1. 清理旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      this.tempEntity = null;

      // 2. 鼠标移动事件
      this.drawingHandler.setInputAction((movement) => {
        const newPosition = this.getClickPosition(movement.endPosition);
        if (newPosition) {
          activeCursorPosition = newPosition;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 3. 鼠标点击事件
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          // --- 情况A：第一次点击（确定圆心） ---
          if (!centerPoint) {
            centerPoint = position;
            this.drawingPoints.push(centerPoint);
            activeCursorPosition = centerPoint;

            // 创建动态预览圆形
            this.tempEntity = this.viewer.entities.add({
              position: centerPoint, // 圆心固定
              ellipse: {
                // 关键：使用 CallbackProperty 动态计算半径（半长轴和半短轴）
                semiMajorAxis: new Cesium.CallbackProperty(() => {
                  if (centerPoint && activeCursorPosition) {
                    return Cesium.Cartesian3.distance(centerPoint, activeCursorPosition);
                  }
                  return 0;
                }, false),
                semiMinorAxis: new Cesium.CallbackProperty(() => {
                  if (centerPoint && activeCursorPosition) {
                    return Cesium.Cartesian3.distance(centerPoint, activeCursorPosition);
                  }
                  return 0;
                }, false),
                // 样式设置
                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
                outlineWidth: 2,
                // height: 0, // 如果需要贴地可开启或使用 heightReference
              }
            });
          }
          // --- 情况B：第二次点击（确定边缘/半径） ---
          else {
            // 记录边缘点（虽然圆只需要圆心和半径，但记录下来方便后续处理）
            this.drawingPoints.push(position);
            activeCursorPosition = null; // 停止动态更新

            // 传递边缘点位置去结束绘制
            this.finishCircleDrawing(position);
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 4. 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    finishCircleDrawing(edgePosition) {
      const centerPoint = this.drawingPoints[0];

      // 1. 计算最终半径
      const radius = Cesium.Cartesian3.distance(centerPoint, edgePosition);

      // 2. 移除动态预览实体
      if (this.tempEntity) {
        this.viewer.entities.remove(this.tempEntity);
        this.tempEntity = null;
      }

      // 3. 创建最终显示的静态实体
      const finalEntity = this.viewer.entities.add({
        id: 'circle-' + new Date().getTime(),
        position: centerPoint,
        ellipse: {
          semiMajorAxis: radius,
          semiMinorAxis: radius,
          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color).withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
          outlineWidth: 2
        }
      });

      // 4. 记录实体
      this.allEntities.push(finalEntity);

      // 5. 计算面积 (π * r²) 并显示
      // 半径单位是米，面积单位是平方米
      const area = Math.PI * Math.pow(radius, 2);

      this.measurementResult = {
        radius: radius, // 也可以额外显示半径
        area: area,
        type: 'circle'
      };

      // 6. 结束绘制状态
      this.stopDrawing();
    },

    // 绘制扇形
    startSectorDrawing() {
      this.drawingPoints = []; // 存储圆心、半径端点、角度端点
      let activeCursorPosition = null; // 实时鼠标位置
      let centerPoint = null; // 圆心坐标
      let radiusPoint = null; // 半径端点
      let radius = 0; // 半径长度

      // 1. 清理旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
      this.tempEntity = null;
      this.tempPreviewEntity = null;

      // 2. 鼠标移动事件
      this.drawingHandler.setInputAction((movement) => {
        const newPosition = this.getClickPosition(movement.endPosition);
        if (newPosition) {
          activeCursorPosition = newPosition;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 3. 鼠标点击事件
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          // --- 情况A：第一次点击（确定圆心） ---
          if (!centerPoint) {
            centerPoint = position;
            this.drawingPoints.push(centerPoint);
            activeCursorPosition = centerPoint;

            // 创建动态预览半径线
            this.tempPreviewEntity = this.viewer.entities.add({
              polyline: {
                positions: new Cesium.CallbackProperty(() => {
                  if (centerPoint && activeCursorPosition) {
                    return [centerPoint, activeCursorPosition];
                  }
                  return [];
                }, false),
                width: this.defaultStyles.sector.width,
                material: new Cesium.PolylineDashMaterialProperty({
                  color: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
                  dashLength: 16
                }),
                clampToGround: true
              }
            });
          }
          // --- 情况B：第二次点击（确定半径） ---
          else if (!radiusPoint) {
            radiusPoint = position;
            this.drawingPoints.push(radiusPoint);
            radius = Cesium.Cartesian3.distance(centerPoint, radiusPoint);

            // 移除半径预览线
            if (this.tempPreviewEntity) {
              this.viewer.entities.remove(this.tempPreviewEntity);
              this.tempPreviewEntity = null;
            }

            // 创建动态预览扇形
            this.tempEntity = this.viewer.entities.add({
              polygon: {
                hierarchy: new Cesium.CallbackProperty(() => {
                  if (centerPoint && activeCursorPosition) {
                    const currentRadius = Cesium.Cartesian3.distance(centerPoint, activeCursorPosition);
                    const startAngle = this.calculatePointAngle(centerPoint, radiusPoint);
                    const endAngle = this.calculatePointAngle(centerPoint, activeCursorPosition);
                    const positions = this.generateSectorPositions(centerPoint, currentRadius, startAngle, endAngle);
                    return new Cesium.PolygonHierarchy(positions);
                  }
                  return new Cesium.PolygonHierarchy([]);
                }, false),
                material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
                outlineWidth: this.defaultStyles.sector.width
              }
            });
          }
          // --- 情况C：第三次点击（确定角度） ---
          else {
            const anglePoint = position;
            this.drawingPoints.push(anglePoint);
            activeCursorPosition = null; // 停止动态更新

            // 传递角度点位置去结束绘制
            this.finishSectorDrawing(centerPoint, radiusPoint, anglePoint);
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 4. 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    // 完成扇形绘制
    finishSectorDrawing(centerPoint, radiusPoint, anglePoint) {
      const radius = Cesium.Cartesian3.distance(centerPoint, anglePoint);
      const startAngle = this.calculatePointAngle(centerPoint, radiusPoint);
      const endAngle = this.calculatePointAngle(centerPoint, anglePoint);

      // 1. 移除动态预览实体
      if (this.tempEntity) {
        this.viewer.entities.remove(this.tempEntity);
        this.tempEntity = null;
      }

      // 2. 生成扇形顶点
      const positions = this.generateSectorPositions(centerPoint, radius, startAngle, endAngle);

      // 3. 创建最终显示的静态实体
      const finalEntity = this.viewer.entities.add({
        id: 'sector-' + new Date().getTime(),
        name: `扇形 ${this.entityCounter}`,
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(positions),
          material: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color).withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.sector.color),
          outlineWidth: this.defaultStyles.sector.width,
          perPositionHeight: false
        }
      });

      // 4. 记录实体
      this.entityCounter++;
      const entityData = {
        id: `sector_${this.entityCounter}`,
        type: 'sector',
        center: this.cartesianToLatLng(centerPoint),
        radius: radius,
        startAngle: startAngle,
        endAngle: endAngle,
        positions: positions,
        entity: finalEntity,
        color: this.defaultStyles.sector.color,
        opacity: 0.5,
        width: this.defaultStyles.sector.width,
        label: `扇形 ${this.entityCounter}`
      };
      this.allEntities.push(entityData);

      // 5. 结束绘制状态
      this.stopDrawing();
    },

    // 计算角度
    calculateAngle(center, start, end) {
      const startLL = Cesium.Cartographic.fromCartesian(start);
      const endLL = Cesium.Cartographic.fromCartesian(end);
      const centerLL = Cesium.Cartographic.fromCartesian(center);

      // 计算两点相对于圆心的角度
      const startAngle = Math.atan2(startLL.longitude - centerLL.longitude, startLL.latitude - centerLL.latitude);
      const endAngle = Math.atan2(endLL.longitude - centerLL.longitude, endLL.latitude - centerLL.latitude);

      // 返回角度差
      return endAngle - startAngle;
    },

    // 计算角度差
    calculateAngleDiff(center, start, end) {
      const startLL = Cesium.Cartographic.fromCartesian(start);
      const endLL = Cesium.Cartographic.fromCartesian(end);
      const centerLL = Cesium.Cartographic.fromCartesian(center);

      // 计算两点相对于圆心的角度
      const startAngle = Math.atan2(startLL.longitude - centerLL.longitude, startLL.latitude - centerLL.latitude);
      const endAngle = Math.atan2(endLL.longitude - centerLL.longitude, endLL.latitude - centerLL.latitude);

      // 计算角度差（确保为正值）
      let angleDiff = endAngle - startAngle;
      if (angleDiff < 0) {
        angleDiff += 2 * Math.PI;
      }

      // 确保角度差在合理范围内
      return Math.max(0.1, Math.min(Math.PI * 2, angleDiff));
    },

    // 计算点相对于圆心的角度
    calculatePointAngle(center, point) {
      const pointLL = Cesium.Cartographic.fromCartesian(point);
      const centerLL = Cesium.Cartographic.fromCartesian(center);

      // 计算点相对于圆心的角度
      const angle = Math.atan2(pointLL.longitude - centerLL.longitude, pointLL.latitude - centerLL.latitude);
      return angle;
    },

    // 生成扇形顶点位置
    generateSectorPositions(center, radius, startAngle, endAngle) {
      const positions = [];
      const centerLL = Cesium.Cartographic.fromCartesian(center);

      // 添加圆心
      positions.push(center);

      // 计算角度差
      let angleDiff = endAngle - startAngle;
      if (angleDiff < 0) {
        angleDiff += 2 * Math.PI;
      }

      // 确保角度差不为零
      angleDiff = Math.max(0.01, angleDiff);

      // 计算扇形的顶点数（根据角度差确定，确保平滑）
      const numPoints = Math.max(5, Math.ceil(angleDiff * 180 / Math.PI / 10));
      const angleStep = angleDiff / (numPoints - 1);

      // 生成扇形的顶点
      for (let i = 0; i < numPoints; i++) {
        const currentAngle = startAngle + i * angleStep;
        const distance = radius / 6378137; // 转换为弧度

        const lat = centerLL.latitude + Math.cos(currentAngle) * distance;
        const lng = centerLL.longitude + Math.sin(currentAngle) * distance / Math.cos(centerLL.latitude);

        const position = Cesium.Cartesian3.fromRadians(lng, lat);
        positions.push(position);
      }

      // 闭合扇形
      positions.push(center);

      return positions;
    },

    // 计算两点之间的距离（米）
    calculateDistance(point1, point2) {
      return Cesium.Cartesian3.distance(point1, point2);
    },

    // 绘制箭头
    startArrowDrawing() {
      this.drawingPoints = []; // 存储起点和终点
      let activeCursorPosition = null; // 实时鼠标位置

      // 1. 清理旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      if (this.tempPreviewEntity) this.viewer.entities.remove(this.tempPreviewEntity);
      this.tempEntity = null;
      this.tempPreviewEntity = null;

      // 2. 鼠标移动事件
      this.drawingHandler.setInputAction((movement) => {
        const newPosition = this.getClickPosition(movement.endPosition);
        if (newPosition) {
          activeCursorPosition = newPosition;
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 3. 鼠标点击事件
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          this.drawingPoints.push(position);

          // --- 情况A：第一次点击（确定起点） ---
          if (this.drawingPoints.length === 1) {
            activeCursorPosition = position; // 初始化鼠标位置

            // 创建动态预览箭头
            this.tempPreviewEntity = this.viewer.entities.add({
              polyline: {
                // 使用 CallbackProperty 动态获取位置
                positions: new Cesium.CallbackProperty(() => {
                  // 只有当有点且鼠标位置存在时才渲染
                  if (this.drawingPoints.length > 0 && activeCursorPosition) {
                    // 获取最后一个已确认的点
                    const lastPoint = this.drawingPoints[this.drawingPoints.length - 1];
                    // 返回 [最后一个点, 当前鼠标位置]
                    return [lastPoint, activeCursorPosition];
                  }
                  return [];
                }, false),
                width: 8, // 增加宽度以获得更大的箭头头部
                // 使用箭头材质
                material: new Cesium.PolylineArrowMaterialProperty(
                  Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color)
                ),
                clampToGround: true, // 贴地
                widthInMeters: false // 使用像素宽度模式
              }
            });
          }
          // --- 情况B：第二次点击（确定终点） ---
          else {
            // 停止监听鼠标移动，因为形状已确定
            activeCursorPosition = null;

            // 调用完成逻辑
            this.finishArrowDrawing();
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 4. 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    // 完成箭头绘制
    finishArrowDrawing() {
      // 将预览箭头转换为最终箭头
      if (this.drawingPoints.length > 1) {
        // 移除预览箭头
        if (this.tempPreviewEntity) {
          this.viewer.entities.remove(this.tempPreviewEntity);
          this.tempPreviewEntity = null;
        }

        // 创建最终的箭头实体
        const entity = this.addArrowEntity([...this.drawingPoints]);

        this.stopDrawing();
        return entity;
      } else {
        this.cancelDrawing();
        return null;
      }
    },

    // 添加箭头实体
    addArrowEntity(positions) {
      this.entityCounter++
      const id = `arrow_${this.entityCounter}`

      // 创建箭头实体，使用固定宽度以确保等比例放大
      const entity = this.viewer.entities.add({
        id: id,
        name: `箭头 ${this.entityCounter}`,
        polyline: {
          positions: positions,
          width: 8, // 增加宽度以获得更大的箭头头部
          material: new Cesium.PolylineArrowMaterialProperty(
            Cesium.Color.fromCssColorString(this.defaultStyles.arrow.color)
          ),
          clampToGround: true,
          // 使用像素宽度模式，确保箭头在缩放时保持比例
          widthInMeters: false
        }
      })

      const entityData = {
        id,
        type: 'arrow',
        points: positions.map(p => this.cartesianToLatLng(p)),
        positions: positions,
        entity: entity,
        color: this.defaultStyles.arrow.color,
        width: this.defaultStyles.arrow.width,
        label: `箭头 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    // 绘制文本框
    startTextDrawing() {
      // 1. 清理旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      this.tempEntity = null;

      // 2. 鼠标点击事件
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          // 弹出输入框，让用户输入文本内容
          const text = prompt('请输入文本内容:', '文本');
          if (text) {
            // 创建文本实体
            this.addTextEntity(position, text);
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 3. 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    // 添加文本实体
    addTextEntity(position, text) {
      this.entityCounter++
      const id = `text_${this.entityCounter}`

      // 获取经纬度坐标
      const { lat, lng } = this.cartesianToLatLng(position)

      const entity = this.viewer.entities.add({
        id: id,
        name: `文本 ${this.entityCounter}`,
        position: position,
        label: {
          text: text,
          font: this.defaultStyles.text.font,
          fillColor: Cesium.Color.fromCssColorString(this.defaultStyles.text.color),
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          backgroundColor: Cesium.Color.fromCssColorString(this.defaultStyles.text.backgroundColor),
          backgroundPadding: new Cesium.Cartesian2(10, 5),
          pixelOffset: new Cesium.Cartesian2(0, 0),
          // 随地图缩放调整大小
          scaleByDistance: new Cesium.NearFarScalar(
            1000,  // 近距离（米）
            1.0,   // 近距离时的缩放比例
            1000000, // 远距离（米）
            0.0    // 远距离时的缩放比例
          )
        }
      })

      const entityData = {
        id,
        type: 'text',
        lat,
        lng,
        text: text,
        position: position,
        entity: entity,
        color: this.defaultStyles.text.color,
        font: this.defaultStyles.text.font,
        backgroundColor: this.defaultStyles.text.backgroundColor,
        label: `文本 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    // 绘制图片
    startImageDrawing() {
      // 1. 清理旧实体
      if (this.tempEntity) this.viewer.entities.remove(this.tempEntity);
      this.tempEntity = null;

      // 2. 鼠标点击事件
      this.drawingHandler.setInputAction((click) => {
        const position = this.getClickPosition(click.position);
        if (position) {
          // 创建一个隐藏的文件输入元素
          const fileInput = document.createElement('input');
          fileInput.type = 'file';
          fileInput.accept = 'image/*';

          // 监听文件选择事件
          fileInput.onchange = (e) => {
            const file = e.target.files[0];
            if (file) {
              // 创建 FormData 对象用于上传
              const formData = new FormData();
              formData.append('file', file);

              // 上传文件到服务器
              this.uploadImage(formData, position);
            }
          };

          // 触发文件选择对话框
          fileInput.click();
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 3. 右键取消
      this.drawingHandler.setInputAction(() => {
        this.cancelDrawing();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },

    // 上传图片
    uploadImage(formData, position) {
      // 显示加载状态
      this.$modal.loading('图片上传中，请稍候...');

      try {
        // 创建请求配置
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };

        // 发送请求 - 使用项目封装的 request 实例
        request.post('/common/upload', formData, config)
          .then((response) => {
            this.$modal.closeLoading();

            if (response.code === 200) {
              // 上传成功，获取图片 URL
              let imageUrl = response.url;
              // 创建图片实体
              this.addImageEntity(position, imageUrl);
            } else {
              this.$modal.msgError('图片上传失败：' + (response.msg || '未知错误'));
            }
          })
          .catch((error) => {
            this.$modal.closeLoading();

            if (error.response) {
              // 服务器返回错误
              if (error.response.data && error.response.data.msg) {
                this.$modal.msgError('图片上传失败：' + error.response.data.msg);
              } else {
                this.$modal.msgError('图片上传失败：服务器返回错误 ' + error.response.status);
              }
            } else if (error.request) {
              // 请求发送但没有收到响应
              this.$modal.msgError('图片上传失败：无法连接到服务器，请检查网络');
            } else {
              // 请求配置错误
              this.$modal.msgError('图片上传失败：' + error.message);
            }
          });
      } catch (error) {
        this.$modal.closeLoading();
        this.$modal.msgError('图片上传失败：' + error.message);
      }
    },

    // 添加图片实体
    addImageEntity(position, imageUrl) {
      this.entityCounter++
      const id = `image_${this.entityCounter}`

      // 获取经纬度坐标
      const { lat, lng } = this.cartesianToLatLng(position)

      const entity = this.viewer.entities.add({
        id: id,
        name: `图片 ${this.entityCounter}`,
        position: position,
        billboard: {
          image: imageUrl,
          width: this.defaultStyles.image.width,
          height: this.defaultStyles.image.height,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          // 随地图缩放调整大小
          scaleByDistance: new Cesium.NearFarScalar(
            1000,  // 近距离（米）
            1.0,   // 近距离时的缩放比例
            1000000, // 远距离（米）
            0.0    // 远距离时的缩放比例
          )
        }
      })

      const entityData = {
        id,
        type: 'image',
        lat,
        lng,
        imageUrl: imageUrl,
        position: position,
        entity: entity,
        width: this.defaultStyles.image.width,
        height: this.defaultStyles.image.height,
        label: `图片 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    // ================== 实体创建方法 ==================

    addPointEntity(lat, lng) {
      this.entityCounter++
      const id = `point_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `点 ${this.entityCounter}`,
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        point: {
          pixelSize: this.defaultStyles.point.size,
          color: Cesium.Color.fromCssColorString(this.defaultStyles.point.color),
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2
        },
        label: {
          text: `${this.entityCounter}`,
          font: '14px Arial',
          fillColor: Cesium.Color.WHITE,
          outlineColor: Cesium.Color.BLACK,
          outlineWidth: 2,
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER
        }
      })

      const entityData = {
        id,
        type: 'point',
        lat,
        lng,
        entity: entity,
        color: this.defaultStyles.point.color,
        size: this.defaultStyles.point.size,
        label: `点 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      // 添加点击事件
      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addLineEntity(positions) {
      this.entityCounter++
      const id = `line_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `线 ${this.entityCounter}`,
        polyline: {
          positions: positions,
          width: this.defaultStyles.line.width,
          material: Cesium.Color.fromCssColorString(this.defaultStyles.line.color),
          clampToGround: true
        }
      })

      const entityData = {
        id,
        type: 'line',
        points: positions.map(p => this.cartesianToLatLng(p)),
        positions: positions,
        entity: entity,
        color: this.defaultStyles.line.color,
        width: this.defaultStyles.line.width,
        label: `线 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addPolygonEntity(positions) {
      this.entityCounter++
      const id = `polygon_${this.entityCounter}`

      // 闭合多边形
      const polygonPositions = [...positions, positions[0]]

      const entity = this.viewer.entities.add({
        id: id,
        name: `面 ${this.entityCounter}`,
        polygon: {
          hierarchy: new Cesium.PolygonHierarchy(polygonPositions),
          material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
            .withAlpha(this.defaultStyles.polygon.opacity),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
          outlineWidth: this.defaultStyles.polygon.width
        }
      })

      const entityData = {
        id,
        type: 'polygon',
        points: positions.map(p => this.cartesianToLatLng(p)),
        positions: polygonPositions,
        entity: entity,
        color: this.defaultStyles.polygon.color,
        opacity: this.defaultStyles.polygon.opacity,
        width: this.defaultStyles.polygon.width,
        label: `面 ${this.entityCounter}`
      }

      this.allEntities.push(entityData)

      entity.clickHandler = (e) => {
        this.selectEntity(entityData)
        e.stopPropagation()
      }

      return entityData
    },

    addRectangleEntity(coordinates) {
  this.entityCounter++
  const id = `rectangle_${this.entityCounter}`

  const entity = this.viewer.entities.add({
    id: id,
    name: `矩形 ${this.entityCounter}`,
    rectangle: {
      coordinates: coordinates,
      material: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color)
        .withAlpha(this.defaultStyles.rectangle.opacity),
      outline: true,
      outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.rectangle.color),
      outlineWidth: this.defaultStyles.rectangle.width
    }
  })

  // 【重要修改】直接把 entity 推入数组，修复清除功能的 bug
  this.allEntities.push(entity)

  return entity
},
    addCircleEntity(center, radius) {
      // 确保半径有效
      const validRadius = Math.max(radius, 1)

      this.entityCounter++
      const id = `circle_${this.entityCounter}`

      const entity = this.viewer.entities.add({
        id: id,
        name: `圆形 ${this.entityCounter}`,
        position: center, // 圆心位置

        // 【优化】使用 ellipse (椭圆) 绘制圆形
        ellipse: {
          semiMinorAxis: validRadius, // 半短轴 = 半径
          semiMajorAxis: validRadius, // 半长轴 = 半径
          material: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
            .withAlpha(this.defaultStyles.circle.opacity),
          outline: true,
          outlineColor: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color),
          outlineWidth: this.defaultStyles.circle.width
        }
      })

      // 【重要修改】直接把 entity 推入数组
      this.allEntities.push(entity)

      return entity
    },

    // ================== 工具方法 ==================

    getClickPosition(pixelPosition) {
      const cartesian = this.viewer.camera.pickEllipsoid(pixelPosition, this.viewer.scene.globe.ellipsoid)
      return cartesian
    },

    cartesianToLatLng(cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      return {
        lat: Cesium.Math.toDegrees(cartographic.latitude),
        lng: Cesium.Math.toDegrees(cartographic.longitude)
      }
    },

    calculateRectangle(start, end) {
      const startLL = this.cartesianToLatLng(start)
      const endLL = this.cartesianToLatLng(end)

      return Cesium.Rectangle.fromDegrees(
        Math.min(startLL.lng, endLL.lng),
        Math.min(startLL.lat, endLL.lat),
        Math.max(startLL.lng, endLL.lng),
        Math.max(startLL.lat, endLL.lat)
      )
    },

    calculateCircle(center, radius, segments) {
      const positions = []
      const centerLL = Cesium.Cartographic.fromCartesian(center)

      for (let i = 0; i < segments; i++) {
        const angle = (i / segments) * Math.PI * 2
        const lat = centerLL.latitude + (radius / 6378137) * Math.sin(angle)
        const lon = centerLL.longitude + (radius / 6378137) * Math.cos(angle) / Math.cos(centerLL.latitude)

        positions.push(Cesium.Cartesian3.fromRadians(lon, lat))
      }

      return positions
    },

    calculateLineLength(positions) {
      let totalLength = 0
      for (let i = 0; i < positions.length - 1; i++) {
        totalLength += Cesium.Cartesian3.distance(positions[i], positions[i + 1])
      }
      return totalLength
    },

    calculatePolygonArea(positions) {
      if (positions.length < 3) return 0

      let area = 0
      const n = positions.length

      for (let i = 0; i < n; i++) {
        const j = (i + 1) % n
        const p1 = Cesium.Cartographic.fromCartesian(positions[i])
        const p2 = Cesium.Cartographic.fromCartesian(positions[j])

        area += p1.longitude * p2.latitude - p2.longitude * p1.latitude
      }

      area = Math.abs(area) * 6378137 * 6378137 / 2
      return area
    },



    // ================== 实体管理 ==================

    selectEntity(entity) {
      this.selectedEntity = entity

      // 居中显示
      if (entity.type === 'point') {
        this.viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(entity.lng, entity.lat, 1000),
          duration: 1.0
        })
      } else if (entity.positions && entity.positions.length > 0) {
        const rectangle = Cesium.Rectangle.fromCartographicArray(
          entity.positions.map(p => Cesium.Cartographic.fromCartesian(p))
        )
        this.viewer.camera.flyTo({
          destination: rectangle,
          duration: 1.0
        })
      }
    },

    updateEntityStyle() {
      if (!this.selectedEntity || !this.selectedEntity.entity) return

      const entity = this.selectedEntity.entity
      const data = this.selectedEntity

      switch(data.type) {
        case 'point':
          entity.point.color = Cesium.Color.fromCssColorString(data.color)
          entity.point.pixelSize = data.size
          break
        case 'line':
          entity.polyline.material = Cesium.Color.fromCssColorString(data.color)
          entity.polyline.width = data.width
          break
        case 'polygon':
          entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
          entity.polygon.outlineWidth = data.width
          break
        case 'rectangle':
          entity.rectangle.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
          entity.rectangle.outlineColor = Cesium.Color.fromCssColorString(data.color)
          entity.rectangle.outlineWidth = data.width
          break
        case 'circle':
          entity.polygon.material = Cesium.Color.fromCssColorString(data.color).withAlpha(data.opacity)
          entity.polygon.outlineColor = Cesium.Color.fromCssColorString(data.color)
          entity.polygon.outlineWidth = data.width
          break
      }
    },

    updateEntityLabel() {
      if (!this.selectedEntity || !this.selectedEntity.entity) return

      const entity = this.selectedEntity.entity
      entity.name = this.selectedEntity.label

      // 如果是点，更新标签
      if (this.selectedEntity.type === 'point') {
        entity.label.text = this.selectedEntity.label
      }
    },

    deleteSelectedEntity() {
      if (this.selectedEntity) {
        this.removeEntity(this.selectedEntity.id)
        this.selectedEntity = null
      }
    },

    removeEntity(id) {
      const index = this.allEntities.findIndex(e => e.id === id)
      if (index > -1) {
        const entity = this.allEntities[index]

        // 从地图中移除
        if (entity.entity) {
          this.viewer.entities.remove(entity.entity)
        }

        // 从数组中移除
        this.allEntities.splice(index, 1)

        // 如果删除的是选中的实体，清空选中状态
        if (this.selectedEntity && this.selectedEntity.id === id) {
          this.selectedEntity = null
        }
      }
    },

    clearAll() {
  // 1. 检查数组是否有内容
  if (this.allEntities && this.allEntities.length > 0) {

    // 2. 遍历每一个对象进行删除
    this.allEntities.forEach(item => {
      try {
        // 情况 A: 数组里存的是原生的 Cesium Entity (点、线通常是这种情况)
        if (item instanceof Cesium.Entity) {
          this.viewer.entities.remove(item);
        }
        // 情况 B: 数组里存的是包装对象 (你的矩形、圆可能是这种 { entity: ... })
        else if (item.entity && item.entity instanceof Cesium.Entity) {
          this.viewer.entities.remove(item.entity);
        }
        // 情况 C: 兜底方案，尝试通过 ID 删除
        else if (item.id) {
          this.viewer.entities.removeById(item.id);
        }
      } catch (e) {
        console.warn('删除实体失败:', e);
      }
    });
  }

  // 3. 清空数组
  this.allEntities = [];

  // 4. 清理可能残留的绘制过程中的临时图形
  if (this.tempEntity) {
    this.viewer.entities.remove(this.tempEntity);
    this.tempEntity = null;
  }
  if (this.tempPreviewEntity) {
    this.viewer.entities.remove(this.tempPreviewEntity);
    this.tempPreviewEntity = null;
  }

  // 5. 重置其他状态（如测量面板、绘制状态）
  this.measurementResult = null;
  this.stopDrawing();
},

    // ================== 其他方法 ==================

    getTypeName(type) {
      const names = {
        point: '点',
        line: '线',
        polygon: '面',
        rectangle: '矩形',
        circle: '圆形',
        sector: '扇形',
        arrow: '箭头',
        text: '文本',
        image: '图片'
      }
      return names[type] || type
    },

    exportData() {
      const data = {
        version: '1.0',
        date: new Date().toISOString(),
        entities: this.allEntities.map(entity => ({
          id: entity.id,
          type: entity.type,
          label: entity.label,
          color: entity.color,
          data: entity.type === 'point' ? {
            lat: entity.lat,
            lng: entity.lng
          } : entity.type === 'line' || entity.type === 'polygon' ? {
            points: entity.points
          } : entity.type === 'rectangle' ? {
            coordinates: entity.coordinates
          } : {
            center: entity.center,
            radius: entity.radius
          }
        }))
      }

      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `cesium-drawing-${new Date().toISOString().slice(0, 10)}.json`
      a.click()
      URL.revokeObjectURL(url)

      console.log('数据已导出', data)
    },

    importData() {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '.json'
      input.onchange = (e) => {
        const file = e.target.files[0]
        if (!file) return

        const reader = new FileReader()
        reader.onload = (event) => {
          try {
            const data = JSON.parse(event.target.result)
            if (data.entities && Array.isArray(data.entities)) {
              data.entities.forEach(entityData => {
                this.importEntity(entityData)
              })
              console.log('数据已导入', data)
              this.$message.success(`成功导入 ${data.entities.length} 个实体`)
            } else {
              this.$message.error('文件格式不正确')
            }
          } catch (error) {
            console.error('导入失败', error)
            this.$message.error('文件解析失败')
          }
        }
        reader.readAsText(file)
      }
      input.click()
    },

    importEntity(entityData) {
      let entity
      const color = entityData.color || '#008aff'

      switch (entityData.type) {
        case 'point':
          entity = this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(entityData.data.lng, entityData.data.lat),
            point: {
              pixelSize: 10,
              color: Cesium.Color.fromCssColorString(color),
              outlineColor: Cesium.Color.WHITE,
              outlineWidth: 2
            },
            label: {
              text: entityData.label || '点',
              font: '14px sans-serif',
              fillColor: Cesium.Color.WHITE,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(0, -10)
            }
          })
          break

        case 'line':
          const linePositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
          entity = this.viewer.entities.add({
            polyline: {
              positions: linePositions,
              width: 3,
              material: Cesium.Color.fromCssColorString(color),
              clampToGround: true
            },
            label: {
              text: entityData.label || '线',
              font: '14px sans-serif',
              fillColor: Cesium.Color.WHITE,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              position: linePositions[0]
            }
          })
          break

        case 'polygon':
          const polygonPositions = entityData.data.points.map(p => Cesium.Cartesian3.fromDegrees(p.lng, p.lat))
          entity = this.viewer.entities.add({
            polygon: {
              hierarchy: polygonPositions,
              material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
              outline: true,
              outlineColor: Cesium.Color.fromCssColorString(color),
              outlineWidth: 2
            },
            label: {
              text: entityData.label || '面',
              font: '14px sans-serif',
              fillColor: Cesium.Color.WHITE,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              position: polygonPositions[0]
            }
          })
          break

        case 'rectangle':
          const rectCoords = entityData.data.coordinates
          entity = this.viewer.entities.add({
            rectangle: {
              coordinates: Cesium.Rectangle.fromDegrees(rectCoords.west, rectCoords.south, rectCoords.east, rectCoords.north),
              material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
              outline: true,
              outlineColor: Cesium.Color.fromCssColorString(color),
              outlineWidth: 2
            },
            label: {
              text: entityData.label || '矩形',
              font: '14px sans-serif',
              fillColor: Cesium.Color.WHITE,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              position: Cesium.Cartesian3.fromDegrees((rectCoords.west + rectCoords.east) / 2, (rectCoords.south + rectCoords.north) / 2)
            }
          })
          break

        case 'circle':
          // 检查半径是否有效
          const radius = entityData.data.radius || 1000
          if (radius <= 0) {
            this.$message.error('圆形半径必须大于0')
            return
          }
          entity = this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(entityData.data.center.lng, entityData.data.center.lat),
            ellipse: {
              semiMinorAxis: radius,
              semiMajorAxis: radius,
              material: Cesium.Color.fromCssColorString(color).withAlpha(0.5),
              outline: true,
              outlineColor: Cesium.Color.fromCssColorString(color),
              outlineWidth: 2
            },
            label: {
              text: entityData.label || '圆形',
              font: '14px sans-serif',
              fillColor: Cesium.Color.WHITE,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(0, -10)
            }
          })
          break
      }

      if (entity) {
        this.allEntities.push({
          id: entity.id,
          type: entityData.type,
          label: entityData.label,
          color: color,
          ...entityData.data
        })
      }
    },

    handleLocate() {
      const h = this.$createElement
      this.$msgbox({
        title: '定位',
        message: h('div', { style: 'padding: 10px 0;' }, [
          h('div', { style: 'margin-bottom: 15px;' }, [
            h('label', { style: 'display: block; margin-bottom: 5px; color: #606266;' }, '经度：'),
            h('input', {
              attrs: {
                type: 'number',
                placeholder: '例如 116.40',
                step: '0.000001',
                value: '116.3974'
              },
              style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;',
              ref: 'lngInput'
            })
          ]),
          h('div', null, [
            h('label', { style: 'display: block; margin-bottom: 5px; color: #606266;' }, '纬度：'),
            h('input', {
              attrs: {
                type: 'number',
                placeholder: '例如 39.90',
                step: '0.000001',
                value: '39.9093'
              },
              style: 'width: 100%; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; box-sizing: border-box;',
              ref: 'latInput'
            })
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            const lngInput = instance.$el.querySelector('input[placeholder="例如 116.40"]')
            const latInput = instance.$el.querySelector('input[placeholder="例如 39.90"]')
            const lng = parseFloat(lngInput.value)
            const lat = parseFloat(latInput.value)

            if (!lng || !lat || isNaN(lng) || isNaN(lat)) {
              this.$message.error('请输入有效的经度和纬度！')
              return
            }
            if (lng < -180 || lng > 180 || lat < -90 || lat > 90) {
              this.$message.error('经纬度超出有效范围！')
              return
            }

            if (this.viewer) {
              this.viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(lng, lat, 5000),
                orientation: {
                  heading: Cesium.Math.toRadians(0.0),
                  pitch: Cesium.Math.toRadians(-90.0),
                  roll: 0.0
                },
                duration: 2
              })
              this.$message.success(`已定位到经度 ${lng.toFixed(4)}，纬度 ${lat.toFixed(4)}`)
            }
            done()
          } else {
            this.$message.info('已取消定位')
            done()
          }
        }
      }).catch(() => {
        this.$message.info('已取消定位')
      })
    },

    initScaleBar() {
      // ... 原有的比例尺代码保持不变
    },

    updateScaleBar() {
      // ... 原有的比例尺更新代码保持不变
    },

    destroyViewer() {
      this.stopDrawing()
      this.clearAll()

      if (this.viewer) {
        this.viewer.destroy()
        this.viewer = null
      }
    }
  }
}
</script>

<style scoped>
.cesium-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#cesiumViewer {
  width: 100%;
  height: 100%;
}

/* 自定义比例尺样式 */
:deep(.scale-bar-container) {
  user-select: none;
  pointer-events: none;
}

/* 隐藏Cesium的默认控件 */
:deep(.cesium-viewer-bottom) {
  display: none !important;
}

:deep(.cesium-credit-logoContainer) {
  display: none !important;
}

:deep(.cesium-credit-textContainer) {
  display: none !important;
}
</style>

