cesium地图添加空域的永久化及复现
This commit is contained in:
zhulongchuan
parent
1a87cadb08
commit
042fd7e7b1
@ -49,7 +49,7 @@
|
||||
:disabled="drawings.size === 0"
|
||||
title="打印所有空域信息到控制台"
|
||||
>
|
||||
📋 打印所有空域
|
||||
📋 保存所有空域
|
||||
</button>
|
||||
<button
|
||||
class="action-btn export-btn"
|
||||
|
||||
@ -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 = [
|
||||
|
||||
@ -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.outlineColor}`);
|
||||
console.log(` 边框宽度: ${properties.options.outlineWidth}px`);
|
||||
console.log(` 拉伸高度: ${properties.options.extrudedHeight}米`);
|
||||
console.log(` 填充颜色: ${properties?.options?.color}`);
|
||||
console.log(` 边框颜色: ${properties?.options?.outlineColor}`);
|
||||
console.log(` 边框宽度: ${properties?.options?.outlineWidth}px`);
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
@ -23,19 +23,44 @@ export function useCesium(containerId: string) {
|
||||
try {
|
||||
// Cesium.Ion.defaultAccessToken = 'your-cesium-ion-access-token';
|
||||
|
||||
viewer.value = new Cesium.Viewer(containerId, {
|
||||
terrainProvider: await Cesium.createWorldTerrainAsync(),
|
||||
animation: false,
|
||||
timeline: false,
|
||||
baseLayerPicker: false,
|
||||
geocoder: false,
|
||||
homeButton: false,
|
||||
sceneModePicker: false,
|
||||
navigationHelpButton: false,
|
||||
fullscreenButton: false,
|
||||
infoBox: false
|
||||
});
|
||||
// viewer.value = new Cesium.Viewer(containerId, {
|
||||
// terrainProvider: await Cesium.createWorldTerrainAsync(),
|
||||
// animation: false,
|
||||
// timeline: false,
|
||||
// baseLayerPicker: false,
|
||||
// geocoder: false,
|
||||
// homeButton: false,
|
||||
// sceneModePicker: false,
|
||||
// navigationHelpButton: false,
|
||||
// fullscreenButton: 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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user