From d67f4b5be7df9f8063b238a25f3118ad766053fe Mon Sep 17 00:00:00 2001
From: ycc <2607536214@qq.com>
Date: Wed, 14 Jan 2026 17:12:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=89=8D=E7=AB=AFcesium=E5=AE=89?=
 =?UTF-8?q?=E8=A3=85=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json                  |    1 +
 ruoyi-ui/src/router/index.js           |    5 +
 ruoyi-ui/src/views/cesiumMap/index.vue | 1578 ++++++++++++++++++++++++++++++++
 ruoyi-ui/src/views/index.vue           |   10 +
 ruoyi-ui/vue.config.js                 |   18 +-
 5 files changed, 1611 insertions(+), 1 deletion(-)
 create mode 100644 ruoyi-ui/src/views/cesiumMap/index.vue

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 6694542..f52ace5 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.28.1",
+    "cesium": "^1.95.0",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
     "echarts": "5.4.0",
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index bbfd237..8c7dc38 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -47,6 +47,11 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/cesiumMap',
+    component: () => import('@/views/cesiumMap'),
+    hidden: true
+  },
+  {
     path: '/register',
     component: () => import('@/views/register'),
     hidden: true
diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue
new file mode 100644
index 0000000..76cb413
--- /dev/null
+++ b/ruoyi-ui/src/views/cesiumMap/index.vue
@@ -0,0 +1,1578 @@
+<template>
+  <div class="cesium-container">
+    <div id="cesiumViewer" ref="cesiumViewer"></div>
+    
+    <!-- 主工具栏 -->
+    <div class="main-toolbar">
+      <div class="toolbar-group">
+        <button 
+          @click="toggleDrawing('point')" 
+          :class="{ active: drawingMode === 'point' }"
+          title="点"
+          class="tool-btn"
+        >
+          <span class="icon">📍</span>
+          <span class="text">{{ drawingMode === 'point' ? '停止' : '点' }}</span>
+        </button>
+        
+        <button 
+          @click="toggleDrawing('line')" 
+          :class="{ active: drawingMode === 'line' }"
+          title="线"
+          class="tool-btn"
+        >
+          <span class="icon">📏</span>
+          <span class="text">{{ drawingMode === 'line' ? '停止' : '线' }}</span>
+        </button>
+        
+        <button 
+          @click="toggleDrawing('polygon')" 
+          :class="{ active: drawingMode === 'polygon' }"
+          title="面"
+          class="tool-btn"
+        >
+          <span class="icon">🔶</span>
+          <span class="text">{{ drawingMode === 'polygon' ? '停止' : '面' }}</span>
+        </button>
+      </div>
+      
+      <div class="toolbar-group">
+        <button 
+          @click="toggleDrawing('rectangle')" 
+          :class="{ active: drawingMode === 'rectangle' }"
+          title="矩形"
+          class="tool-btn"
+        >
+          <span class="icon">⬜</span>
+          <span class="text">{{ drawingMode === 'rectangle' ? '停止' : '矩形' }}</span>
+        </button>
+        
+        <button 
+          @click="toggleDrawing('circle')" 
+          :class="{ active: drawingMode === 'circle' }"
+          title="圆形"
+          class="tool-btn"
+        >
+          <span class="icon">⭕</span>
+          <span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span>
+        </button>
+      </div>
+      
+      <div class="toolbar-group">
+        <button 
+          @click="clearAll" 
+          :disabled="!allEntities.length"
+          title="清除所有"
+          class="tool-btn danger"
+        >
+          <span class="icon">🗑️</span>
+          <span class="text">清除</span>
+        </button>
+        
+        <button 
+          @click="exportData" 
+          :disabled="!allEntities.length"
+          title="导出数据"
+          class="tool-btn success"
+        >
+          <span class="icon">💾</span>
+          <span class="text">导出</span>
+        </button>
+      </div>
+    </div>
+    
+    <!-- 属性面板 -->
+    <div class="property-panel" v-if="selectedEntity">
+      <div class="panel-header">
+        <h4>属性设置</h4>
+        <button @click="selectedEntity = null" class="close-btn">×</button>
+      </div>
+      
+      <div class="panel-content">
+        <div class="form-group">
+          <label>颜色</label>
+          <input type="color" v-model="selectedEntity.color" @change="updateEntityStyle">
+        </div>
+        
+        <div class="form-group">
+          <label>线宽/边框宽</label>
+          <input type="range" v-model="selectedEntity.width" min="1" max="10" @change="updateEntityStyle">
+          <span>{{ selectedEntity.width }}px</span>
+        </div>
+        
+        <div class="form-group" v-if="selectedEntity.type === 'polygon'">
+          <label>填充透明度</label>
+          <input type="range" v-model="selectedEntity.opacity" min="0" max="1" step="0.1" @change="updateEntityStyle">
+          <span>{{ (selectedEntity.opacity * 100).toFixed(0) }}%</span>
+        </div>
+        
+        <div class="form-group">
+          <label>标签</label>
+          <input type="text" v-model="selectedEntity.label" @change="updateEntityLabel">
+        </div>
+        
+        <button @click="deleteSelectedEntity" class="delete-btn">删除此图形</button>
+      </div>
+    </div>
+    
+    <!-- 实体列表 -->
+    <!-- <div class="entity-list" v-if="allEntities.length > 0">
+      <div class="list-header">
+        <h4>已绘制图形 ({{ allEntities.length }})</h4>
+        <span class="hint">点击可选中并居中查看</span>
+      </div>
+      
+      <div class="entity-items">
+        <div 
+          v-for="entity in allEntities" 
+          :key="entity.id"
+          class="entity-item"
+          @click="selectEntity(entity)"
+          :class="{ active: selectedEntity && selectedEntity.id === entity.id }"
+        >
+          <div class="entity-icon">
+            <span v-if="entity.type === 'point'">📍</span>
+            <span v-if="entity.type === 'line'">📏</span>
+            <span v-if="entity.type === 'polygon'">🔶</span>
+            <span v-if="entity.type === 'rectangle'">⬜</span>
+            <span v-if="entity.type === 'circle'">⭕</span>
+          </div>
+          
+          <div class="entity-info">
+            <div class="entity-name">
+              {{ entity.label || `${entity.type.toUpperCase()} ${entity.id}` }}
+            </div>
+            <div class="entity-details">
+              <span class="entity-type">{{ getTypeName(entity.type) }}</span>
+              <span v-if="entity.type === 'point'" class="entity-coord">
+                {{ entity.lat.toFixed(4) }}°, {{ entity.lng.toFixed(4) }}°
+              </span>
+              <span v-else class="entity-points">
+                {{ entity.points ? entity.points.length : 0 }} 个点
+              </span>
+            </div>
+          </div>
+          
+          <button 
+            @click.stop="removeEntity(entity.id)"
+            class="entity-delete"
+            title="删除"
+          >
+            ×
+          </button>
+        </div>
+      </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>
+        <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>
+  </div>
+</template>
+
+<script>
+import * as Cesium from 'cesium'
+import 'cesium/Build/Cesium/Widgets/widgets.css'
+export default {
+  name: 'CesiumMap',
+  
+  data() {
+    return {
+      viewer: null,
+      scaleBar: null,
+      
+      // 绘制相关
+      drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle'
+      drawingHandler: null,
+      tempEntity: 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 }
+      }
+    }
+  },
+  
+  mounted() {
+    this.initMap()
+  },
+  
+  beforeDestroy() {
+    this.destroyViewer()
+  },
+  
+  methods: {
+    initMap() {
+      try {
+        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)
+      }
+    },
+    
+    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 {
+        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)
+        
+      } 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
+      }
+      
+      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
+      }
+      
+      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
+    },
+    
+    // 绘制矩形
+    startRectangleDrawing() {
+      let startPosition = null
+      
+      this.drawingHandler.setInputAction((click) => {
+        startPosition = this.getClickPosition(click.position)
+        if (startPosition) {
+          this.drawingStartPoint = startPosition
+        }
+      }, 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)
+            }
+            
+            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
+              }
+            })
+          }
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+      
+      this.drawingHandler.setInputAction(() => {
+        if (startPosition && this.tempEntity) {
+          this.finishRectangleDrawing(startPosition)
+          startPosition = null
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_UP)
+      
+      // 右键取消
+      this.drawingHandler.setInputAction(() => {
+        this.cancelDrawing()
+      }, 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
+    },
+    
+    // 绘制圆形
+    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)
+          }
+          
+          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
+              }
+            })
+          }
+        }
+      }, 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
+        },
+        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
+        }
+      })
+      
+      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
+        }
+      })
+      
+      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
+        })
+      }
+    },
+    
+    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() {
+      // 停止绘制
+      this.stopDrawing()
+      this.drawingMode = null
+      
+      // 移除所有实体
+      this.allEntities.forEach(entity => {
+        if (entity.entity) {
+          this.viewer.entities.remove(entity.entity)
+        }
+      })
+      
+      // 清空数组
+      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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cesium-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+
+#cesiumViewer {
+  width: 100%;
+  height: 100%;
+}
+
+/* 主工具栏 */
+.main-toolbar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.toolbar-group {
+  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;
+}
+
+.tool-btn {
+  padding: 10px 15px;
+  background: white;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #495057;
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.tool-btn:hover {
+  background: #f8f9fa;
+  border-color: #4dabf7;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.tool-btn.active {
+  background: #4dabf7;
+  color: white;
+  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;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 250px;
+  max-width: 300px;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.panel-header h4 {
+  margin: 0;
+  color: #495057;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #6c757d;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.close-btn:hover {
+  background: #f8f9fa;
+  color: #495057;
+}
+
+.panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.form-group label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6c757d;
+}
+
+.form-group input[type="color"] {
+  width: 100%;
+  height: 36px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  padding: 2px;
+  cursor: pointer;
+}
+
+.form-group input[type="range"] {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.form-group input[type="text"] {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.form-group span {
+  font-size: 12px;
+  color: #6c757d;
+  min-width: 40px;
+  text-align: right;
+}
+
+.delete-btn {
+  padding: 10px;
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.3s;
+  margin-top: 10px;
+}
+
+.delete-btn:hover {
+  background: #c82333;
+}
+
+/* 实体列表 */
+.entity-list {
+  position: absolute;
+  top: 220px;
+  right: 20px;
+  z-index: 1000;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 250px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.list-header {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.list-header h4 {
+  margin: 0 0 5px 0;
+  color: #495057;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.list-header .hint {
+  font-size: 11px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.entity-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.entity-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.entity-item:hover {
+  background: #e3f2fd;
+  border-color: #4dabf7;
+}
+
+.entity-item.active {
+  background: #4dabf7;
+  border-color: #4dabf7;
+}
+
+.entity-item.active .entity-name,
+.entity-item.active .entity-type,
+.entity-item.active .entity-coord,
+.entity-item.active .entity-points {
+  color: white;
+}
+
+.entity-icon {
+  font-size: 20px;
+  margin-right: 12px;
+  width: 24px;
+  text-align: center;
+}
+
+.entity-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.entity-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: #495057;
+  margin-bottom: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.entity-details {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: #6c757d;
+}
+
+.entity-type {
+  background: #e9ecef;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+}
+
+.entity-coord,
+.entity-points {
+  font-family: 'Monaco', 'Menlo', monospace;
+}
+
+.entity-delete {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: #dc3545;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  opacity: 0.7;
+  transition: opacity 0.3s;
+  flex-shrink: 0;
+}
+
+.entity-delete:hover {
+  opacity: 1;
+}
+
+/* 测量结果面板 */
+.measurement-panel {
+  position: absolute;
+  bottom: 80px;
+  left: 20px;
+  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;
+}
+
+.measurement-content h5 {
+  margin: 0 0 10px 0;
+  color: #495057;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.measurement-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.measurement-item:last-child {
+  margin-bottom: 0;
+}
+
+.measurement-item span {
+  color: #6c757d;
+}
+
+.measurement-item strong {
+  color: #495057;
+  font-weight: 600;
+}
+
+/* 自定义比例尺样式 */
+: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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index e211a1b..ef48f88 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -2,6 +2,13 @@
   <div class="app-container home">
     <el-row :gutter="20">
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
+        <el-button
+            type="primary"
+            size="mini"
+            icon="el-icon-cloudy"
+            plain
+            @click="goCesium()"
+            >cesium地图跳转</el-button>
         <h2>若依后台管理框架</h2>
         <p>
           一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
@@ -1100,6 +1107,9 @@ export default {
     }
   },
   methods: {
+    goCesium(){
+      this.$router.push({ path: this.redirect || "/cesiumMap" }).catch(()=>{})
+    },
     goTarget(href) {
       window.open(href, "_blank")
     }
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 40e140d..8ff151d 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -9,7 +9,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
 
 const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
 
-const baseUrl = 'http://localhost:8080' // 后端接口
+const baseUrl = 'http://192.168.50.30:8080' // 后端接口
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
@@ -59,6 +59,22 @@ module.exports = {
   },
   configureWebpack: {
     name: name,
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          include: /node_modules\/@cesium/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env'],
+              plugins: ['@babel/plugin-proposal-nullish-coalescing-operator', 
+                       '@babel/plugin-proposal-optional-chaining']
+            }
+          }
+        }
+      ]
+    },
     resolve: {
       alias: {
         '@': resolve('src')