cesium地图添加空域的永久化及复现

src/views/cesiums/DrawingToolPanel.vue

@@ -49,7 +49,7 @@
           :disabled="drawings.size === 0"
           title="打印所有空域信息到控制台"
         >
-          📋 打印所有空域
+          📋 保存所有空域
         </button>
         <button
           class="action-btn export-btn"

src/views/cesiums/ImportToolPanel.vue

@@ -83,6 +83,18 @@
       </div>
     </div>
 
+    <div class="panel-section">
+      <h4>加载纯数据</h4>
+      <div class="sample-data">
+        <button @click="loadData" class="sample-btn">
+          🎯 加载数据库数据
+        </button>
+        <div class="sample-description">
+          加载存下的数据
+        </div>
+      </div>
+    </div>
+
     <div class="panel-section">
       <h4>示例数据</h4>
       <div class="sample-data">
@@ -111,6 +123,8 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { API_GET_list, API_GET_byId, API_DELETE_delPlotting, API_POST_addPlotting, API_PUT_updatePlotting,} from "../../api/uav/plotting";
+import { id } from 'element-plus/es/locale/index.js';
 
 const props = defineProps<{
   importFromFile: (file: File, options: any) => Promise<string[]>;
@@ -178,7 +192,6 @@ const executeFileImport = async () => {
       success: false,
       message: `导入失败: ${error}`
     };
-  } finally {
     isImporting.value = false;
   }
 };
@@ -192,6 +205,7 @@ const executeJsonImport = () => {
 
   try {
     const data = JSON.parse(jsonInput.value);
+    console.log("data:",data)
     const importedIds = props.importAirspaceData(data, importOptions.value);
     
     const statistics = props.getImportStatistics();
@@ -213,6 +227,26 @@ const executeJsonImport = () => {
   }
 };
 
+const loadData= () => {
+  API_GET_list().then((response) => {
+    if (response.code === 200) {
+        // message.success("图上标绘加载成功");
+        response.rows.forEach((item) => {
+          const jsonData = item.plottingJson
+          console.log("此间数据如下111："+jsonData)
+          jsonInput.value = jsonData;
+        })
+        
+     } else {
+        // message.error(response.msg);
+     }
+     }, error => {
+    //  message.success("图上标绘加载失败");
+   });
+
+   executeJsonImport();
+}
+
 // 加载示例数据
 const loadSampleData = () => {
   const sampleData = [

src/views/cesiums/components/DrawingTool.ts

@@ -51,6 +51,10 @@ export interface DrawingResult {
 }
 
 import { AirspaceEditor } from './AirspaceEditor';
+import { map } from 'lodash-es';
+import { Position } from '@element-plus/icons-vue/dist/types/index.js';
+import { API_GET_list, API_GET_byId, API_DELETE_delPlotting, API_POST_addPlotting, API_PUT_updatePlotting,} from "../../../api/uav/plotting";
+
 
 export class DrawingTool {
   private airspaceEditor: AirspaceEditor;
@@ -144,6 +148,8 @@ export class DrawingTool {
      * 生成圆形信息
      */
   private generateCircleInfo(drawing: DrawingResult): DrawingInfo {
+    console.log("drawing 圆形:",drawing)
+    console.log("drawing 圆形:",drawing)
     const center = drawing.positions[0];
     const radius = drawing.positions.length > 1 ? 
       Cesium.Cartesian3.distance(center, drawing.positions[1]) : 
@@ -183,6 +189,7 @@ export class DrawingTool {
     let minLon = Infinity, maxLon = -Infinity;
     let minLat = Infinity, maxLat = -Infinity;
     let minHeight = Infinity, maxHeight = -Infinity;
+    console.log("DrawingResult 多边形信息:",drawing)
 
     const boundaryPoints = drawing.positions.map(position => {
       const cartographic = Cesium.Cartographic.fromCartesian(position);
@@ -809,7 +816,7 @@ export class DrawingTool {
         const drawingInfo = this.generateDrawingInfo({
           id,
           type: type as 'circle' | 'polygon',
-          positions,
+          positions: data.position,
           entity,
           properties: {
             ...properties,
@@ -822,7 +829,7 @@ export class DrawingTool {
         const drawingResult: DrawingResult = {
           id,
           type: type as 'circle' | 'polygon',
-          positions,
+          positions: data.position,
           entity,
           properties: {
             ...properties,
@@ -831,7 +838,7 @@ export class DrawingTool {
           },
           info: {
             ...drawingInfo,
-            area: properties.area || this.calculateArea(positions, type as 'circle' | 'polygon')
+            area: properties.area || this.calculateArea(data.position, type as 'circle' | 'polygon')
           }
         };
 
@@ -1208,8 +1215,10 @@ export class DrawingTool {
       console.log('当前没有绘制任何空域');
       return;
     }
+    this.getAllDrawingsInfoJSON();
 
     console.log(`=== 空域信息汇总 (共 ${this.drawingEntities.size} 个) ===`);
+    console.log("=== 空域信息汇总", this.drawingEntities);
     this.drawingEntities.forEach((drawing, id) => {
       const info = this.generateDrawingInfo(drawing);
       this.printFormattedInfo(info);
@@ -1217,11 +1226,14 @@ export class DrawingTool {
     });
   }
 
+  // const geojson = new map
+
   /**
    * 格式化打印信息
    */
   private printFormattedInfo(info: DrawingInfo): void {
     const { id, type, area, properties } = info;
+    const json = []; 
 
     console.log(`🛡️ 空域ID: ${id}`);
     console.log(`📝 类型: ${type === 'circle' ? '圆形空域' : '多边形空域'}`);
@@ -1236,6 +1248,7 @@ export class DrawingTool {
       console.log(`📏 半径: ${(info.radius! / 1000).toFixed(3)} km`);
       console.log(`📐 直径: ${(info.radius! * 2 / 1000).toFixed(3)} km`);
       console.log(`🔄 周长: ${(properties.circumference / 1000).toFixed(3)} km`);
+      
     } else {
       const center = properties.center;
       const bounds = properties.bounds;
@@ -1264,10 +1277,10 @@ export class DrawingTool {
     }
 
     console.log(`🎨 样式设置:`);
-    console.log(`   填充颜色: ${properties.options.color}`);
+    console.log(`   填充颜色: ${properties?.options?.color}`);
-    console.log(`   边框颜色: ${properties.options.outlineColor}`);
+    console.log(`   边框颜色: ${properties?.options?.outlineColor}`);
-    console.log(`   边框宽度: ${properties.options.outlineWidth}px`);
+    console.log(`   边框宽度: ${properties?.options?.outlineWidth}px`);
-    console.log(`   拉伸高度: ${properties.options.extrudedHeight}米`);
+    console.log(`   拉伸高度: ${properties?.options?.extrudedHeight}米`);
   }
 
   /**
@@ -1278,7 +1291,7 @@ export class DrawingTool {
     if (!drawing) return null;
 
     const info = this.generateDrawingInfo(drawing);
-    return this.formatInfoToJSON(info);
+    return this.formatToCustomStructure(info);
   }
 
   /**
@@ -1288,8 +1301,25 @@ export class DrawingTool {
     const result = [];
     for (const [id, drawing] of this.drawingEntities) {
       const info = this.generateDrawingInfo(drawing);
-      result.push(this.formatInfoToJSON(info));
+      result.push(this.formatToCustomStructure(info));
     }
+    console.log("result:",result);
+
+      // 转换为格式化的 JSON 字符串
+    const jsonString = JSON.stringify(result, null, 2);
+    let fromData = {
+      plottingJson: JSON.stringify(result)
+    }
+    console.log("result 字符串:", jsonString);
+    API_POST_addPlotting(fromData).then((response) => {
+      if (response.code === 200) {
+          // proxy.success("保存文件成功");
+       } else {
+          // message.error(response.msg);
+       }
+       }, error => {
+      //  message.success("保存文件失败");
+     });
     return result;
   }
 
@@ -1339,10 +1369,89 @@ export class DrawingTool {
         vertices: info.properties.boundaryPoints
       };
     }
+    console.log("jsonInfo:",jsonInfo)
 
     return jsonInfo;
   }
 
+  /**
+   * 格式化为空域自定义结构
+   */
+  private formatToCustomStructure(info: DrawingInfo): any {
+    console.log("格式化为空域自定义结构:",info)
+    const baseStructure: any = {
+      id: info.id,
+      type: info.type,
+      position: info.positions,
+      properties: {
+        name: `${info.type === 'circle' ? '圆形' : '多边形'}空域_${info.id.slice(0, 8)}`,
+        color: this.colorToHex(info.properties?.options?.color),
+        outlineColor: this.colorToHex(info.properties?.options?.outlineColor),
+        outlineWidth: info.properties?.options?.outlineWidth,
+        extrudedHeight: info.properties?.options?.extrudedHeight,
+        area: info.area,
+        areaKm: info.area / 1000000
+      }
+    };
+
+    if (info.type === 'circle') {
+      baseStructure.coordinates = {
+        center: {
+          longitude: info.properties.center.longitude,
+          latitude: info.properties.center.latitude,
+          height: info.properties.center.height
+        },
+        radius: info.radius
+      };
+      
+      // 为圆形添加额外属性
+      baseStructure.properties.circumference = info.properties.circumference;
+      baseStructure.properties.diameter = info.radius! * 2;
+    } else {
+      baseStructure.coordinates = info.properties.boundaryPoints.map((point: any) => ({
+        longitude: point.longitude,
+        latitude: point.latitude,
+        height: point.height
+      }));
+      
+      // 为多边形添加额外属性
+      baseStructure.properties.vertexCount = info.properties.boundaryPoints.length;
+      baseStructure.properties.perimeter = info.properties.perimeter;
+      baseStructure.properties.bounds = info.properties.bounds;
+      baseStructure.properties.center = info.properties.center;
+    }
+    console.log("baseStructure:",baseStructure)
+
+    return baseStructure;
+  }
+
+  /**
+   * 将颜色转换为十六进制格式
+   */
+  private colorToHex(color: any): string {
+    if (!color) return '#FFFF004D';
+    
+    try {
+      if (typeof color.toCssColorString === 'function') {
+        return color.toCssColorString();
+      }
+      
+      // 如果是 Cesium.Color 对象
+      if (color.red !== undefined) {
+        const r = Math.floor(color.red * 255);
+        const g = Math.floor(color.green * 255);
+        const b = Math.floor(color.blue * 255);
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+      }
+      
+      return '#FFFF004D';
+    } catch (error) {
+      console.warn('颜色转换失败:', error);
+      return '#FFFF004D';
+    }
+  }
+
+
   /**
    * 导出空域信息为文本
    */
@@ -1351,6 +1460,7 @@ export class DrawingTool {
     if (!drawing) return '';
 
     const info = this.generateDrawingInfo(drawing);
+    console.log("导出的空域json形式是什么样的呢:",info)
     return this.formatInfoAsText(info);
   }
 

src/views/cesiums/components/useCesium.ts

@@ -23,19 +23,44 @@ export function useCesium(containerId: string) {
     try {
       // Cesium.Ion.defaultAccessToken = 'your-cesium-ion-access-token';
 
-      viewer.value = new Cesium.Viewer(containerId, {
+      // viewer.value = new Cesium.Viewer(containerId, {
-        terrainProvider: await Cesium.createWorldTerrainAsync(),
+      //   terrainProvider: await Cesium.createWorldTerrainAsync(),
-        animation: false,
+      //   animation: false,
-        timeline: false,
+      //   timeline: false,
-        baseLayerPicker: false,
+      //   baseLayerPicker: false,
-        geocoder: false,
+      //   geocoder: false,
-        homeButton: false,
+      //   homeButton: false,
-        sceneModePicker: false,
+      //   sceneModePicker: false,
-        navigationHelpButton: false,
+      //   navigationHelpButton: false,
-        fullscreenButton: false,
+      //   fullscreenButton: false,
-        infoBox: false
+      //   infoBox: false
-      });
+      // });
 
+      viewer.value =  new Cesium.Viewer(containerId, {
+            navigationHelpButton: false,
+            sceneModePicker: true,
+            // 搜索键
+            // geocoder: false,
+            // home键
+            homeButton: true,
+            // 全屏按钮
+            fullscreenButton: false,
+
+            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
+                url: "http://t0.tianditu.com/img_w/wmts?service=wmts&tk=347521453441f82bd83c6f0b15240e50&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
+                layer: "tdtBasicLayer",
+                style: "default",
+                format: "image/jpeg",
+                tileMatrixSetID: "GoogleMapsCompatible",
+                maximumLevel: 18,
+            }),
+            // 地图选择器
+            // baseLayerPicker: false,
+            selectionIndicator: false, //鼠标点击wms选择框
+            infoBox: false,
+            timeline: false,
+            animation: false
+        });
       // 初始化工具类
       viewTool.value = new ViewTool(viewer.value);
       markerTool.value = new MarkerTool(viewer.value);