From 8ee7117a35074c1358bdc48f23d4d23c2bb1fcc1 Mon Sep 17 00:00:00 2001
From: ctw <1051735452@qq.com>
Date: Fri, 16 Jan 2026 13:45:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E8=83=BD=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/cesiumMap/index.vue | 1766 ++++++++------------------------
 1 file changed, 431 insertions(+), 1335 deletions(-)

diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
index 31c43b9..14d0acf 100644
--- a/ruoyi-ui/src/views/cesiumMap/index.vue
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -1,1253 +1,486 @@
 <template>
   <div class="cesium-container">
     <div id="cesiumViewer" ref="cesiumViewer"></div>
-    
-    <!-- 主工具栏 -->
+
     <div class="main-toolbar" :class="{ collapsed: isToolbarCollapsed }">
-      <!-- 展开/收起按钮 -->
       <div class="collapse-btn" @click="toggleToolbar">
-        <span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span>
+        <span class="collapse-icon">{{ isToolbarCollapsed ? ' ▶ ' : ' ◀ ' }}</span>
         <span class="collapse-text" v-if="!isToolbarCollapsed">收起</span>
       </div>
-      
-      <!-- 工具栏内容 -->
+
       <div class="toolbar-content" v-show="!isToolbarCollapsed">
         <div class="toolbar-group">
-          <button 
-            @click="toggleDrawing('point')" 
+          <button
+            @click="toggleDrawing('point')"
             :class="{ active: drawingMode === 'point' }"
             title="点"
             class="tool-btn"
           >
-            <span class="icon">📍</span>
+            <span class="icon"> 📍 </span>
             <span class="text">{{ drawingMode === 'point' ? '停止' : '点' }}</span>
           </button>
-          
-          <button 
-            @click="toggleDrawing('line')" 
+
+          <button
+            @click="toggleDrawing('line')"
             :class="{ active: drawingMode === 'line' }"
             title="线"
             class="tool-btn"
           >
-            <span class="icon">📏</span>
+            <span class="icon"> 📏 </span>
             <span class="text">{{ drawingMode === 'line' ? '停止' : '线' }}</span>
           </button>
-          
-          <button 
-            @click="toggleDrawing('polygon')" 
+
+          <button
+            @click="toggleDrawing('polygon')"
             :class="{ active: drawingMode === 'polygon' }"
             title="面"
             class="tool-btn"
           >
-            <span class="icon">🔶</span>
+            <span class="icon"> 🔶 </span>
             <span class="text">{{ drawingMode === 'polygon' ? '停止' : '面' }}</span>
           </button>
-        </div>
-        
-        <div class="toolbar-group">
-          <button 
-            @click="toggleDrawing('rectangle')" 
+
+          <button
+            @click="toggleDrawing('rectangle')"
             :class="{ active: drawingMode === 'rectangle' }"
             title="矩形"
             class="tool-btn"
           >
-            <span class="icon">⬜</span>
+            <span class="icon"> ⬛ </span>
             <span class="text">{{ drawingMode === 'rectangle' ? '停止' : '矩形' }}</span>
           </button>
-          
-          <button 
-            @click="toggleDrawing('circle')" 
+
+          <button
+            @click="toggleDrawing('circle')"
             :class="{ active: drawingMode === 'circle' }"
-            title="圆形"
+            title="圆"
             class="tool-btn"
           >
-            <span class="icon">⭕</span>
-            <span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span>
+            <span class="icon"> ⭕ </span>
+            <span class="text">{{ drawingMode === 'circle' ? '停止' : '圆' }}</span>
           </button>
         </div>
-        
+
+        <div class="divider"></div>
+
         <div class="toolbar-group">
-          <button 
-            @click="clearAll" 
-            :disabled="!allEntities.length"
-            title="清除所有"
-            class="tool-btn danger"
-          >
-            <span class="icon">🗑️</span>
+          <button @click="clearAll" class="tool-btn danger" title="清除所有">
+            <span class="icon"> 🗑️ </span>
             <span class="text">清除</span>
           </button>
-          
-          <button 
-            @click="exportData" 
-            :disabled="!allEntities.length"
-            title="导出数据"
-            class="tool-btn success"
-          >
-            <span class="icon">💾</span>
+          <button @click="exportGeoJSON" class="tool-btn success" title="导出数据">
+            <span class="icon"> 💾 </span>
             <span class="text">导出</span>
           </button>
         </div>
       </div>
-      
-      <!-- 收起时的最小化工具栏 -->
-      <div class="toolbar-minimized" v-show="isToolbarCollapsed">
-        <button 
-          @click="toggleDrawing('point')" 
-          :class="{ active: drawingMode === 'point' }"
-          title="点"
-          class="min-tool-btn"
-        >
-          <span class="icon">📍</span>
-        </button>
-        <button 
-          @click="toggleDrawing('line')" 
-          :class="{ active: drawingMode === 'line' }"
-          title="线"
-          class="min-tool-btn"
-        >
-          <span class="icon">📏</span>
-        </button>
-        <button 
-          @click="toggleDrawing('polygon')" 
-          :class="{ active: drawingMode === 'polygon' }"
-          title="面"
-          class="min-tool-btn"
-        >
-          <span class="icon">🔶</span>
-        </button>
-        <button 
-          @click="toggleDrawing('rectangle')" 
-          :class="{ active: drawingMode === 'rectangle' }"
-          title="矩形"
-          class="min-tool-btn"
-        >
-          <span class="icon">⬜</span>
-        </button>
-        <button 
-          @click="toggleDrawing('circle')" 
-          :class="{ active: drawingMode === 'circle' }"
-          title="圆形"
-          class="min-tool-btn"
-        >
-          <span class="icon">⭕</span>
-        </button>
-        <div class="min-tool-separator"></div>
-        <button 
-          @click="clearAll" 
-          :disabled="!allEntities.length"
-          title="清除所有"
-          class="min-tool-btn danger"
-        >
-          <span class="icon">🗑️</span>
-        </button>
-        <button 
-          @click="exportData" 
-          :disabled="!allEntities.length"
-          title="导出数据"
-          class="min-tool-btn success"
-        >
-          <span class="icon">💾</span>
-        </button>
-      </div>
     </div>
-    
-    <!-- 测量结果显示 -->
-    <div class="measurement-panel" v-if="measurementResult">
-      <div class="measurement-content">
-        <h5>测量结果</h5>
-        <div class="measurement-item" v-if="measurementResult.distance">
-          <span>长度：</span>
-          <strong>{{ measurementResult.distance.toFixed(2) }} 米</strong>
-        </div>
-        <div class="measurement-item" v-if="measurementResult.area">
-          <span>面积：</span>
-          <strong>{{ measurementResult.area.toFixed(2) }} 平方米</strong>
+
+    <div class="property-panel" v-if="currentEntity || isDrawing">
+      <div class="panel-header">
+        <h3>属性信息</h3>
+        <button class="close-btn" @click="currentEntity = null">×</button>
+      </div>
+      <div class="panel-content">
+        <div class="prop-item" v-if="isDrawing">
+          <label>状态：</label>
+          <span>正在绘制 {{ drawingModeName }}...</span>
         </div>
-        <div class="measurement-item" v-if="measurementResult.radius">
-          <span>半径：</span>
-          <strong>{{ measurementResult.radius.toFixed(2) }} 米</strong>
         </div>
-        <button @click="measurementResult = null" class="close-btn">关闭</button>
+    </div>
+
+    <div class="measurement-panel" v-if="measurementResult">
+      <div class="measure-item">
+        <span class="label">{{ measurementResult.label }}：</span>
+        <span class="value">{{ measurementResult.value }}</span>
+        <span class="unit">{{ measurementResult.unit }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-// import * as Cesium from 'cesium'
-// import 'cesium/Build/Cesium/Widgets/widgets.css'
+// 如果项目中没有在index.html全局引入Cesium，请取消下面这行的注释
+// import * as Cesium from "cesium/Cesium";
+// import "cesium/Widgets/widgets.css";
+
 export default {
-  name: 'CesiumMap',
-  
+  name: "CesiumMap",
   data() {
     return {
       viewer: null,
-      scaleBar: null,
+      handler: null,
       isToolbarCollapsed: false,
-      
-      // 绘制相关
-      drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
-      drawingHandler: null,
-      tempEntity: null,
-      drawingPoints: [],
-      drawingStartPoint: null,
+      drawingMode: null, // point, line, polygon, rectangle, circle
       isDrawing: false,
-      
-      // 实体管理
-      allEntities: [], // 所有绘制的实体
-      entityCounter: 0,
-      selectedEntity: null, // 当前选中的实体
-      
-      // 测量结果
+      activeShapePoints: [],
+      activeShape: null,
+      floatingPoint: null,
+      allEntities: [], // 存储所有绘制的对象
       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 }
-      }
+      currentEntity: null
+    };
+  },
+  computed: {
+    drawingModeName() {
+      const names = {
+        point: '点',
+        line: '线',
+        polygon: '面',
+        rectangle: '矩形',
+        circle: '圆'
+      };
+      return names[this.drawingMode] || '';
     }
   },
-  
   mounted() {
-    // this.initMap()
-    this.checkCesiumLoaded()
+    this.initCesium();
   },
-  
   beforeDestroy() {
-    this.destroyViewer()
+    if (this.viewer) {
+      this.viewer.destroy();
+    }
+    if (this.handler) {
+      this.handler.destroy();
+    }
   },
-  
   methods: {
-    // 切换工具栏展开/收起
     toggleToolbar() {
-      this.isToolbarCollapsed = !this.isToolbarCollapsed
-    },
-    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.isToolbarCollapsed = !this.isToolbarCollapsed;
+    },
+
+    // 初始化地图 - 修复版
+    initCesium() {
+      // 销毁旧实例防止重叠
+      if (this.viewer) this.viewer.destroy();
+
+      const container = this.$refs.cesiumViewer;
+
+      // 配置项：关闭所有不必要的控件，强制2D
+      const viewerOptions = {
+        animation: false,
+        baseLayerPicker: false,
+        fullscreenButton: false,
+        vrButton: false,
+        geocoder: false,
+        homeButton: false,
+        infoBox: false,
+        sceneModePicker: false,
+        selectionIndicator: false,
+        timeline: false,
+        navigationHelpButton: false,
+        sceneMode: Cesium.SceneMode.SCENE2D, // 强制2D视图
+        mapProjection: new Cesium.WebMercatorProjection(),
+        // 关键修复：直接在这里加载 ArcGIS 卫星底图
+        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
+            enablePickFeatures: 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 {
-        // 使用本地MBTiles服务
-        // 获取API基础路径，如果未配置则使用相对路径
-        const baseApi = process.env.VUE_APP_BASE_API || '/dev-api'
-        const mbtilesUrl = baseApi.replace(/\/$/, '') + '/api/mbtiles/tile/{z}/{x}/{y}'
-        
-        console.log('加载MBTiles地图，服务地址:', mbtilesUrl)
-        
-        const mbtilesProvider = new Cesium.UrlTemplateImageryProvider({
-          url: mbtilesUrl,
-          minimumLevel: 0,
-          maximumLevel: 18,
-          tileWidth: 256,
-          tileHeight: 256,
-          tilingScheme: new Cesium.WebMercatorTilingScheme(),
-          credit: 'MBTiles离线地图'
-        })
-        
-        this.viewer.imageryLayers.addImageryProvider(mbtilesProvider)
-        console.log('MBTiles地图加载成功')
-        
-      } catch (error) {
-        console.error('加载MBTiles地图失败:', error)
-        // 如果MBTiles加载失败，尝试使用原来的在线地图作为备用
-        try {
-          const offlineProvider = new Cesium.UrlTemplateImageryProvider({
-            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
-            minimumLevel: 0,
-            maximumLevel: 18,
-            tileWidth: 256,
-            tileHeight: 256,
-            tilingScheme: new Cesium.WebMercatorTilingScheme(),
-            credit: '备用在线地图'
-          })
-          this.viewer.imageryLayers.addImageryProvider(offlineProvider)
-          console.warn('已切换到备用在线地图')
-        } catch (fallbackError) {
-          console.error('备用地图也加载失败:', fallbackError)
-          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)
-            }
-          })
+        this.viewer = new Cesium.Viewer(container, viewerOptions);
+
+        // 隐藏版权信息 (可选)
+        if(this.viewer._cesiumWidget && this.viewer._cesiumWidget._creditContainer) {
+          this.viewer._cesiumWidget._creditContainer.style.display = "none";
         }
+
+        // 锁定视角：禁止旋转和倾斜，保持纯2D操作手感
+        this.viewer.scene.screenSpaceCameraController.enableRotate = false;
+        this.viewer.scene.screenSpaceCameraController.enableTilt = false;
+        this.viewer.scene.screenSpaceCameraController.enableLook = false;
+
+        // 初始化绘图事件
+        this.initDrawHandler();
+
+        console.log("地图初始化成功");
+      } catch (e) {
+        console.error("地图初始化失败", e);
+        // 如果外网不通，尝试加载网格作为最后的兜底
+        viewerOptions.imageryProvider = new Cesium.GridImageryProvider();
+        this.viewer = new Cesium.Viewer(container, viewerOptions);
       }
     },
-    
-    // ================== 绘制功能 ==================
-    
+
+    // 切换绘制模式
     toggleDrawing(mode) {
       if (this.drawingMode === mode) {
-        // 停止当前绘制
-        this.stopDrawing()
-        this.drawingMode = null
+        this.stopDrawing(); // 再次点击停止绘制
       } else {
-        // 停止之前的绘制
-        if (this.drawingMode) {
-          this.stopDrawing()
-        }
-        
-        // 开始新的绘制
-        this.drawingMode = mode
-        this.startDrawing(mode)
+        this.stopDrawing(); // 先停止之前的
+        this.drawingMode = mode;
+        this.isDrawing = true;
+        this.measurementResult = null;
       }
     },
-    
-    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
-      }
-      
-      this.viewer.scene.canvas.style.cursor = 'crosshair'
-      console.log(`开始绘制 ${this.getTypeName(mode)}`)
-    },
-    
+
     stopDrawing() {
-      if (this.drawingHandler) {
-        this.drawingHandler.destroy()
-        this.drawingHandler = null
+      this.drawingMode = null;
+      this.isDrawing = false;
+      this.activeShapePoints = [];
+      if (this.activeShape) {
+        this.viewer.entities.remove(this.activeShape);
+        this.activeShape = null;
       }
-      
-      if (this.tempEntity) {
-        this.viewer.entities.remove(this.tempEntity)
-        this.tempEntity = null
+      if (this.floatingPoint) {
+        this.viewer.entities.remove(this.floatingPoint);
+        this.floatingPoint = 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.drawingHandler.setInputAction((click) => {
-        const position = this.getClickPosition(click.position)
-        if (position) {
-          this.drawingPoints.push(position)
-          
-          // 更新临时线
-          if (this.tempEntity) {
-            this.viewer.entities.remove(this.tempEntity)
-          }
-          
-          if (this.drawingPoints.length > 1) {
-            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)
-      
-      // 右键完成绘制
-      this.drawingHandler.setInputAction(() => {
-        if (this.drawingPoints.length > 1) {
-          this.finishLineDrawing()
-        } else {
-          this.cancelDrawing()
-        }
-      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-    },
-    
-    finishLineDrawing() {
-      const positions = [...this.drawingPoints]
-      const entity = this.addLineEntity(positions)
-      
-      // 计算长度
-      const length = this.calculateLineLength(positions)
-      this.measurementResult = {
-        distance: length,
-        type: 'line'
-      }
-      
-      this.stopDrawing()
-      return entity
-    },
-    
-    // 绘制多边形
-    startPolygonDrawing() {
-      this.drawingHandler.setInputAction((click) => {
-        const position = this.getClickPosition(click.position)
-        if (position) {
-          this.drawingPoints.push(position)
-          
-          // 更新临时多边形
-          if (this.tempEntity) {
-            this.viewer.entities.remove(this.tempEntity)
-          }
-          
-          if (this.drawingPoints.length > 2) {
-            // 闭合多边形
-            const polygonPoints = [...this.drawingPoints, this.drawingPoints[0]]
-            this.tempEntity = this.viewer.entities.add({
-              polygon: {
-                hierarchy: new Cesium.PolygonHierarchy(polygonPoints),
-                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
-              }
-            })
-          } else if (this.drawingPoints.length === 2) {
-            // 只有两个点时显示线
-            this.tempEntity = this.viewer.entities.add({
-              polyline: {
-                positions: this.drawingPoints,
-                width: this.defaultStyles.polygon.width,
-                material: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color),
-                clampToGround: true
-              }
-            })
-          } else if (this.drawingPoints.length === 1) {
-            // 只有一个点时显示点
-            this.tempEntity = this.viewer.entities.add({
-              position: this.drawingPoints[0],
-              point: {
-                pixelSize: 8,
-                color: Cesium.Color.fromCssColorString(this.defaultStyles.polygon.color)
-              }
-            })
-          }
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
-      
-      // 双击完成绘制
-      this.drawingHandler.setInputAction((click) => {
-        if (this.drawingPoints.length > 2) {
-          this.finishPolygonDrawing()
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
-      
-      // 右键取消
-      this.drawingHandler.setInputAction(() => {
-        this.cancelDrawing()
-      }, 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
+
+    clearAll() {
+      this.viewer.entities.removeAll();
+      this.allEntities = [];
+      this.stopDrawing();
+      this.measurementResult = null;
     },
-    
-    // 绘制矩形
-    startRectangleDrawing() {
-      let startPosition = null
-      
-      this.drawingHandler.setInputAction((click) => {
-        startPosition = this.getClickPosition(click.position)
-        if (startPosition) {
-          this.drawingStartPoint = startPosition
+
+    // 初始化绘图逻辑
+    initDrawHandler() {
+      this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
+
+      // 左键点击
+      this.handler.setInputAction((event) => {
+        if (!this.isDrawing) return;
+
+        // 获取点击坐标
+        const earthPosition = this.viewer.scene.camera.pickEllipsoid(event.position, this.viewer.scene.globe.ellipsoid);
+        if (!earthPosition) return;
+
+        if (this.drawingMode === 'point') {
+          this.createPoint(earthPosition);
+          this.stopDrawing();
+          return;
         }
-      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
-      
-      this.drawingHandler.setInputAction((movement) => {
-        if (startPosition) {
-          const endPosition = this.getClickPosition(movement.endPosition)
-          if (endPosition) {
-            // 更新临时矩形
-            if (this.tempEntity) {
-              this.viewer.entities.remove(this.tempEntity)
+
+        if (this.activeShapePoints.length === 0) {
+          this.activeShapePoints.push(earthPosition);
+          const dynamicPositions = new Cesium.CallbackProperty(() => {
+            if (this.drawingMode === 'polygon') {
+              return new Cesium.PolygonHierarchy(this.activeShapePoints);
             }
-            
-            const rectangle = this.calculateRectangle(startPosition, endPosition)
-            this.tempEntity = this.viewer.entities.add({
-              rectangle: {
-                coordinates: rectangle,
-                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
-              }
-            })
-          }
+            return this.activeShapePoints;
+          }, false);
+
+          this.activeShape = this.drawShape(dynamicPositions);
         }
-      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-      
-      this.drawingHandler.setInputAction(() => {
-        if (startPosition && this.tempEntity) {
-          this.finishRectangleDrawing(startPosition)
-          startPosition = null
+
+        this.activeShapePoints.push(earthPosition);
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+      // 鼠标移动
+      this.handler.setInputAction((event) => {
+        if (!this.isDrawing || this.activeShapePoints.length === 0) return;
+
+        const newPosition = this.viewer.scene.camera.pickEllipsoid(event.endPosition, this.viewer.scene.globe.ellipsoid);
+        if (!newPosition) return;
+
+        if (this.floatingPoint) {
+          this.floatingPoint.position.setValue(newPosition);
+        } else {
+          this.floatingPoint = this.viewer.entities.add({
+            position: newPosition,
+            point: { pixelSize: 5, color: Cesium.Color.YELLOW }
+          });
         }
-      }, Cesium.ScreenSpaceEventType.LEFT_UP)
-      
-      // 右键取消
-      this.drawingHandler.setInputAction(() => {
-        this.cancelDrawing()
-      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+
+        this.activeShapePoints.pop();
+        this.activeShapePoints.push(newPosition);
+
+        // 实时计算测量结果
+        this.calculateMeasure();
+
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+      // 右键结束绘制
+      this.handler.setInputAction(() => {
+        if (!this.isDrawing) return;
+        this.terminateShape();
+      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-    
-    finishRectangleDrawing(startPosition) {
-      if (!this.tempEntity) return
-      
-      const rectangleCoords = this.tempEntity.rectangle.coordinates.getValue()
-      const entity = this.addRectangleEntity(rectangleCoords)
-      
-      // 计算面积
-      const area = this.calculateRectangleArea(rectangleCoords)
-      this.measurementResult = {
-        area: area,
-        type: 'rectangle'
-      }
-      
-      this.stopDrawing()
-      return entity
+
+    terminateShape() {
+      this.activeShapePoints.pop(); // 移除鼠标当前的浮动点
+      this.drawShape(this.activeShapePoints); // 绘制最终形状
+      this.viewer.entities.remove(this.activeShape); // 移除动态形状
+      this.viewer.entities.remove(this.floatingPoint);
+      this.activeShape = null;
+      this.floatingPoint = null;
+      this.activeShapePoints = [];
+      this.isDrawing = false;
+      this.drawingMode = null;
     },
-    
-    // 绘制圆形
-    startCircleDrawing() {
-      let centerPosition = null
-      let radius = 0
-      
-      this.drawingHandler.setInputAction((click) => {
-        centerPosition = this.getClickPosition(click.position)
-        if (centerPosition) {
-          this.drawingStartPoint = centerPosition
-          
-          // 创建中心点
-          if (this.tempEntity) {
-            this.viewer.entities.remove(this.tempEntity)
+
+    drawShape(positionData) {
+      let shape;
+      const isDynamic = (positionData instanceof Cesium.CallbackProperty);
+
+      if (this.drawingMode === 'line') {
+        shape = this.viewer.entities.add({
+          polyline: {
+            positions: positionData,
+            clampToGround: true,
+            width: 3,
+            material: Cesium.Color.BLUE
           }
-          
-          this.tempEntity = this.viewer.entities.add({
-            position: centerPosition,
-            point: {
-              pixelSize: 8,
-              color: Cesium.Color.fromCssColorString(this.defaultStyles.circle.color)
-            }
-          })
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_DOWN)
-      
-      this.drawingHandler.setInputAction((movement) => {
-        if (centerPosition) {
-          const currentPosition = this.getClickPosition(movement.endPosition)
-          if (currentPosition) {
-            radius = Cesium.Cartesian3.distance(centerPosition, currentPosition)
-            
-            // 更新临时圆形
-            if (this.tempEntity) {
-              this.viewer.entities.remove(this.tempEntity)
-            }
-            
-            // 创建圆形多边形
-            const positions = this.calculateCircle(centerPosition, radius, 64)
-            this.tempEntity = this.viewer.entities.add({
-              polygon: {
-                hierarchy: new Cesium.PolygonHierarchy(positions),
-                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
-              }
-            })
+        });
+        if (!isDynamic) this.allEntities.push({ type: 'line', entity: shape });
+      }
+      else if (this.drawingMode === 'polygon') {
+        shape = this.viewer.entities.add({
+          polygon: {
+            hierarchy: positionData,
+            material: new Cesium.ColorMaterialProperty(Cesium.Color.BLUE.withAlpha(0.3)),
+            outline: true,
+            outlineColor: Cesium.Color.BLUE
           }
+        });
+        if (!isDynamic) this.allEntities.push({ type: 'polygon', entity: shape });
+      }
+      else if (this.drawingMode === 'rectangle') {
+        // 矩形特殊处理
+        const rectProp = new Cesium.CallbackProperty(() => {
+           const p = this.activeShapePoints;
+           if(p.length < 2) return null;
+           return Cesium.Rectangle.fromCartesianArray(p);
+        }, false);
+
+        if (isDynamic) {
+             shape = this.viewer.entities.add({
+                rectangle: {
+                    coordinates: rectProp,
+                    material: Cesium.Color.RED.withAlpha(0.3),
+                    outline: true,
+                    outlineColor: Cesium.Color.RED
+                }
+            });
+        } else {
+             // 静态矩形
+             const rect = Cesium.Rectangle.fromCartesianArray(positionData);
+             shape = this.viewer.entities.add({
+                rectangle: {
+                    coordinates: rect,
+                    material: Cesium.Color.RED.withAlpha(0.3),
+                    outline: true,
+                    outlineColor: Cesium.Color.RED
+                }
+            });
+            this.allEntities.push({ type: 'rectangle', entity: shape });
         }
-      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
-      
-      this.drawingHandler.setInputAction(() => {
-        if (centerPosition && radius > 0) {
-          this.finishCircleDrawing(centerPosition, radius)
-          centerPosition = null
-          radius = 0
-        }
-      }, Cesium.ScreenSpaceEventType.LEFT_UP)
-      
-      // 右键取消
-      // this.drawingHandler.setInputAction(() => {
-      //   this.cancelDrawing()
-      // }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-    },
-    
-    finishCircleDrawing(center, radius) {
-      const positions = this.calculateCircle(center, radius, 64)
-      const entity = this.addCircleEntity(center, radius, positions)
-      
-      // 计算面积
-      const area = Math.PI * radius * radius
-      this.measurementResult = {
-        area: area,
-        radius: radius,
-        type: 'circle'
       }
-      
-      this.stopDrawing()
-      return entity
-    },
-    
-    cancelDrawing() {
-      this.stopDrawing()
-      this.drawingMode = null
-    },
-    
-    // ================== 实体创建方法 ==================
-    
-    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
-        },
+      else if (this.drawingMode === 'circle') {
+          // 简易圆：第一个点圆心，第二个点决定半径
+           const circleProp = new Cesium.CallbackProperty(() => {
+               if(this.activeShapePoints.length < 2) return null;
+               const p1 = this.activeShapePoints[0];
+               const p2 = this.activeShapePoints[this.activeShapePoints.length - 1];
+               const radius = Cesium.Cartesian3.distance(p1, p2);
+               return radius;
+           }, false);
+
+           if(isDynamic) {
+               shape = this.viewer.entities.add({
+                   position: this.activeShapePoints[0],
+                   ellipse: {
+                       semiMinorAxis: circleProp,
+                       semiMajorAxis: circleProp,
+                       material: Cesium.Color.GREEN.withAlpha(0.3),
+                       outline: true,
+                       outlineColor: Cesium.Color.GREEN
+                   }
+               });
+           } else {
+               const p1 = positionData[0];
+               const p2 = positionData[positionData.length - 1];
+               const radius = Cesium.Cartesian3.distance(p1, p2);
+               shape = this.viewer.entities.add({
+                   position: p1,
+                   ellipse: {
+                       semiMinorAxis: radius,
+                       semiMajorAxis: radius,
+                       material: Cesium.Color.GREEN.withAlpha(0.3),
+                       outline: true,
+                       outlineColor: Cesium.Color.GREEN
+                   }
+               });
+               this.allEntities.push({ type: 'circle', entity: shape });
+           }
+      }
+      return shape;
+    },
+
+    createPoint(position) {
+      const point = this.viewer.entities.add({
+        position: position,
+        point: { pixelSize: 10, color: Cesium.Color.RED },
         label: {
-          text: `${this.entityCounter}`,
-          font: '14px Arial',
-          fillColor: Cesium.Color.WHITE,
-          outlineColor: Cesium.Color.BLACK,
-          outlineWidth: 2,
+          text: '点 ' + (this.allEntities.length + 1),
+          font: '14px sans-serif',
           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
-        }
-      })
-      
-      const entityData = {
-        id,
-        type: 'rectangle',
-        coordinates: coordinates,
-        entity: entity,
-        color: this.defaultStyles.rectangle.color,
-        opacity: this.defaultStyles.rectangle.opacity,
-        width: this.defaultStyles.rectangle.width,
-        label: `矩形 ${this.entityCounter}`
-      }
-      
-      this.allEntities.push(entityData)
-      
-      entity.clickHandler = (e) => {
-        this.selectEntity(entityData)
-        e.stopPropagation()
-      }
-      
-      return entityData
-    },
-    
-    addCircleEntity(center, radius, positions) {
-      this.entityCounter++
-      const id = `circle_${this.entityCounter}`
-      
-      const entity = this.viewer.entities.add({
-        id: id,
-        name: `圆形 ${this.entityCounter}`,
-        polygon: {
-          hierarchy: new Cesium.PolygonHierarchy(positions),
-          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
-        },
-        position: center,
-        point: {
-          pixelSize: 5,
-          color: Cesium.Color.RED
+          outlineWidth: 2,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+          pixelOffset: new Cesium.Cartesian2(0, -9)
         }
-      })
-      
-      const centerLL = this.cartesianToLatLng(center)
-      const entityData = {
-        id,
-        type: 'circle',
-        center: centerLL,
-        radius: radius,
-        positions: positions,
-        entity: entity,
-        color: this.defaultStyles.circle.color,
-        opacity: this.defaultStyles.circle.opacity,
-        width: this.defaultStyles.circle.width,
-        label: `圆形 ${this.entityCounter}`
-      }
-      
-      this.allEntities.push(entityData)
-      
-      entity.clickHandler = (e) => {
-        this.selectEntity(entityData)
-        e.stopPropagation()
-      }
-      
-      return entityData
-    },
-    
-    // ================== 工具方法 ==================
-    
-    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
-    },
-    
-    calculateRectangleArea(coordinates) {
-      const rect = coordinates.getValue ? coordinates.getValue() : coordinates
-      const width = Cesium.Cartesian3.distance(
-        Cesium.Cartesian3.fromRadians(rect.west, rect.north),
-        Cesium.Cartesian3.fromRadians(rect.east, rect.north)
-      )
-      const height = Cesium.Cartesian3.distance(
-        Cesium.Cartesian3.fromRadians(rect.west, rect.north),
-        Cesium.Cartesian3.fromRadians(rect.west, rect.south)
-      )
-      
-      return width * height
-    },
-    
-    // ================== 实体管理 ==================
-    
-    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
-        })
-      }
+      });
+      this.allEntities.push({ type: 'point', entity: point });
     },
-    
-    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
+
+    calculateMeasure() {
+      if (this.activeShapePoints.length < 2) return;
+
+      let val = 0;
+      let label = '';
+      let unit = '';
+
+      if (this.drawingMode === 'line') {
+        // 计算折线总长
+        for (let i = 0; i < this.activeShapePoints.length - 1; i++) {
+          val += Cesium.Cartesian3.distance(this.activeShapePoints[i], this.activeShapePoints[i+1]);
         }
+        label = '总长度';
+        unit = '米';
+      } else if (this.drawingMode === 'circle') {
+          const p1 = this.activeShapePoints[0];
+          const p2 = this.activeShapePoints[this.activeShapePoints.length - 1];
+          val = Cesium.Cartesian3.distance(p1, p2);
+          label = '半径';
+          unit = '米';
       }
-    },
-    
-    clearAll() {
-      // 停止绘制
-      this.stopDrawing()
-      this.drawingMode = null
-      
-      // 移除所有实体
-      this.allEntities.forEach(entity => {
-        if (entity.entity) {
-          this.viewer.entities.remove(entity.entity)
+      // 多边形面积计算比较复杂，暂略，可后续添加
+
+      this.measurementResult = {
+        label,
+        value: val.toFixed(2),
+        unit
+      };
+    },
+
+    exportGeoJSON() {
+      const exportData = this.allEntities.map(item => {
+        // 简化版导出逻辑
+        return {
+          type: item.type,
+          id: item.entity.id
         }
-      })
-      
-      // 清空数组
-      this.allEntities = []
-      this.entityCounter = 0
-      this.selectedEntity = null
-      this.measurementResult = null
-      
-      console.log('已清除所有图形')
-    },
-    
-    // ================== 其他方法 ==================
-    
-    getTypeName(type) {
-      const names = {
-        point: '点',
-        line: '线',
-        polygon: '面',
-        rectangle: '矩形',
-        circle: '圆形'
-      }
-      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)
-    },
-    
-    initScaleBar() {
-      // ... 原有的比例尺代码保持不变
-    },
-    
-    updateScaleBar() {
-      // ... 原有的比例尺更新代码保持不变
-    },
-    
-    destroyViewer() {
-      this.stopDrawing()
-      this.clearAll()
-      
-      if (this.viewer) {
-        this.viewer.destroy()
-        this.viewer = null
-      }
+      });
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], {type : 'application/json'});
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'map_data.json';
+      a.click();
     }
   }
-}
+};
 </script>
 
 <style scoped>
 .cesium-container {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100vh; /* 确保占满屏幕 */
   position: relative;
+  overflow: hidden;
 }
 
 #cesiumViewer {
@@ -1255,165 +488,73 @@ export default {
   height: 100%;
 }
 
-/* 主工具栏 - 修改后 */
+/* 玻璃拟态工具栏 */
 .main-toolbar {
   position: absolute;
-  top: 100px;
+  top: 20px;
   right: 20px;
   z-index: 1000;
   display: flex;
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-}
-
-.main-toolbar.collapsed {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-/* 工具栏内容 */
-.toolbar-content {
-  display: flex;
   flex-direction: column;
-  gap: 15px;
-  padding: 15px;
-  min-width: 180px;
+  align-items: flex-end;
+  transition: all 0.3s ease;
 }
 
-/* 收起按钮 */
 .collapse-btn {
-  display: flex;
-  align-items: center;
-  padding: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 6px 12px;
+  border-radius: 8px;
   cursor: pointer;
-  background: #f8f9fa;
-  border-top-left-radius: 12px;
-  border-bottom-left-radius: 12px;
-  border-right: 1px solid #e9ecef;
-  transition: all 0.3s ease;
-  user-select: none;
-}
-
-.collapse-btn:hover {
-  background: #e9ecef;
-}
-
-.collapse-icon {
-  font-size: 14px;
-  font-weight: bold;
-  color: #495057;
-  margin-right: 5px;
-}
-
-.collapse-text {
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  margin-bottom: 8px;
   font-size: 12px;
-  color: #6c757d;
-  white-space: nowrap;
+  user-select: none;
+  display: flex;
+  align-items: center;
 }
 
-/* 工具栏组 */
-.toolbar-group {
+.toolbar-content {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.18);
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.toolbar-group:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
+  gap: 10px;
 }
 
-/* 收起时的最小化工具栏 */
-.toolbar-minimized {
+.toolbar-group {
   display: flex;
   flex-direction: column;
-  padding: 10px 8px;
   gap: 8px;
 }
 
-.min-tool-btn {
-  width: 36px;
-  height: 36px;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  background: white;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: #495057;
-  transition: all 0.3s ease;
-}
-
-.min-tool-btn:hover {
-  background: #f8f9fa;
-  border-color: #4dabf7;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.min-tool-btn.active {
-  background: #4dabf7;
-  color: white;
-  border-color: #4dabf7;
-}
-
-.min-tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.min-tool-btn.danger {
-  color: #dc3545;
-}
-
-.min-tool-btn.danger:hover {
-  background: #f8d7da;
-  border-color: #dc3545;
-}
-
-.min-tool-btn.success {
-  color: #28a745;
-}
-
-.min-tool-btn.success:hover {
-  background: #d4edda;
-  border-color: #28a745;
-}
-
-.min-tool-separator {
+.divider {
   height: 1px;
-  background: #e9ecef;
+  background: rgba(0,0,0,0.1);
   margin: 5px 0;
 }
 
-/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */
 .tool-btn {
-  padding: 10px 15px;
-  background: white;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
-  cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: rgba(255,255,255,0.5);
+  cursor: pointer;
+  transition: all 0.2s;
   font-size: 14px;
-  font-weight: 500;
-  color: #495057;
-  transition: all 0.3s ease;
-  min-width: 120px;
+  color: #333;
 }
 
 .tool-btn:hover {
-  background: #f8f9fa;
-  border-color: #4dabf7;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: #fff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
 .tool-btn.active {
@@ -1422,42 +563,20 @@ export default {
   border-color: #4dabf7;
 }
 
-.tool-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
 .tool-btn.danger {
   color: #dc3545;
 }
-
 .tool-btn.danger:hover {
   background: #f8d7da;
-  border-color: #dc3545;
 }
 
 .tool-btn.success {
   color: #28a745;
 }
-
 .tool-btn.success:hover {
   background: #d4edda;
-  border-color: #28a745;
 }
 
-.tool-btn .icon {
-  font-size: 16px;
-  width: 20px;
-  text-align: center;
-}
-
-.tool-btn .text {
-  white-space: nowrap;
-}
-
-/* 其他样式保持不变... */
-
 /* 属性面板 */
 .property-panel {
   position: absolute;
@@ -1468,56 +587,33 @@ export default {
   border-radius: 12px;
   padding: 20px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 250px;
-  max-width: 300px;
+  min-width: 200px;
 }
 
-/* 测量结果面板 */
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 5px;
+}
+.close-btn {
+  border: none;
+  background: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+/* 测量面板 */
 .measurement-panel {
   position: absolute;
   bottom: 80px;
   left: 20px;
+  background: rgba(0,0,0,0.7);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
   z-index: 1000;
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 12px;
-  padding: 15px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  min-width: 200px;
-}
-
-/* 自定义比例尺样式 */
-: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;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .main-toolbar {
-    right: 10px;
-    top: 80px;
-  }
-  
-  .toolbar-content {
-    min-width: 150px;
-  }
-  
-  .tool-btn {
-    min-width: 100px;
-    padding: 8px 12px;
-  }
 }
-</style>
\ No newline at end of file
+</style>