Merge remote-tracking branch 'origin/main'
This commit is contained in:
djhk
commit
838d0878aa
@ -46,15 +46,17 @@
|
||||
@fly-to-coordinate="flyToCoordinate"
|
||||
/>
|
||||
|
||||
<!-- 绘图工具面板 -->
|
||||
<DrawingToolPanel
|
||||
<!-- 绘图工具面板 -->
|
||||
<DrawingToolPanel
|
||||
v-if="isInitialized"
|
||||
:is-drawing="isDrawing"
|
||||
:current-drawing-type="currentDrawingType"
|
||||
:drawings="drawings"
|
||||
:selected-drawing="selectedDrawing"
|
||||
:drawing-info="drawingInfo"
|
||||
:drawing-options="drawingOptions"
|
||||
:get-drawing-status="getDrawingStatus"
|
||||
:get-drawing-info-text="getDrawingInfoText"
|
||||
@start-circle-drawing="startCircleDrawing"
|
||||
@start-polygon-drawing="startPolygonDrawing"
|
||||
@cancel-drawing="cancelDrawing"
|
||||
@ -65,8 +67,13 @@
|
||||
@fly-to-drawing="flyToDrawing"
|
||||
@update-circle-option="updateCircleOption"
|
||||
@update-polygon-option="updatePolygonOption"
|
||||
@copy-drawing-info="copyDrawingInfo"
|
||||
@fly-to-selected-drawing="flyToSelectedDrawing"
|
||||
@print-selected-drawing-info="handlePrintSelectedDrawingInfo"
|
||||
@print-all-drawings-info="handlePrintAllDrawingsInfo"
|
||||
@print-drawing-info="handlePrintDrawingInfo"
|
||||
@export-drawing-info="handleExportDrawingInfo"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -150,8 +157,41 @@ const {
|
||||
flyToDrawing,
|
||||
updateDrawingOptions,
|
||||
getDrawingStatus,
|
||||
getDrawingInfoText
|
||||
} = useDrawingManager(drawingTool); // 直接传递 drawingTool ref
|
||||
getDrawingInfoText,
|
||||
printSelectedDrawingInfo,
|
||||
printAllDrawingsInfo,
|
||||
printDrawingInfo,
|
||||
exportSelectedDrawingAsText
|
||||
} = useDrawingManager(drawingTool);
|
||||
|
||||
|
||||
// 打印方法
|
||||
const handlePrintSelectedDrawingInfo = () => {
|
||||
console.log('执行打印选中空域');
|
||||
printSelectedDrawingInfo();
|
||||
};
|
||||
|
||||
const handlePrintAllDrawingsInfo = () => {
|
||||
console.log('执行打印所有空域');
|
||||
printAllDrawingsInfo();
|
||||
};
|
||||
|
||||
const handlePrintDrawingInfo = (id: string) => {
|
||||
console.log('执行打印指定空域:', id);
|
||||
printDrawingInfo(id);
|
||||
};
|
||||
|
||||
const handleExportDrawingInfo = () => {
|
||||
const text = exportSelectedDrawingAsText();
|
||||
if (text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
console.log('空域信息已复制到剪贴板');
|
||||
// 可以添加提示消息
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 添加预定义模型
|
||||
|
||||
@ -8,6 +8,37 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="panel-section" v-if="drawings.size > 0">
|
||||
<h4>信息操作</h4>
|
||||
<div class="action-buttons">
|
||||
<button
|
||||
class="action-btn print-btn"
|
||||
@click="handlePrintSelectedDrawingInfo"
|
||||
:disabled="!selectedDrawing"
|
||||
title="打印选中空域信息到控制台"
|
||||
>
|
||||
🖨️ 打印选中空域
|
||||
</button>
|
||||
<button
|
||||
class="action-btn print-all-btn"
|
||||
@click="handlePrintAllDrawingsInfo"
|
||||
:disabled="drawings.size === 0"
|
||||
title="打印所有空域信息到控制台"
|
||||
>
|
||||
📋 打印所有空域
|
||||
</button>
|
||||
<button
|
||||
class="action-btn export-btn"
|
||||
@click="handleExportSelectedDrawingInfo"
|
||||
:disabled="!selectedDrawing"
|
||||
title="导出选中空域信息为文本"
|
||||
>
|
||||
📤 导出选中空域
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h4>绘制工具</h4>
|
||||
<div class="drawing-buttons">
|
||||
@ -49,6 +80,9 @@
|
||||
<button @click="flyToSelectedDrawing" class="action-btn fly-btn">
|
||||
✈️ 飞向空域
|
||||
</button>
|
||||
<button @click="handlePrintSelectedDrawingInfo" class="action-btn print-info-btn" :disabled="!selectedDrawing">
|
||||
🖨️ 控制台打印
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -56,9 +90,14 @@
|
||||
<div class="panel-section" v-if="drawings.size > 0">
|
||||
<div class="drawings-header">
|
||||
<h4>已绘制空域 ({{ drawings.size }})</h4>
|
||||
<button @click="clearAllDrawings" class="clear-btn" title="清除所有">
|
||||
🗑️
|
||||
</button>
|
||||
<div class="header-actions">
|
||||
<button @click="handlePrintAllDrawingsInfo" class="action-btn" title="打印所有空域信息" :disabled="drawings.size === 0">
|
||||
🖨️
|
||||
</button>
|
||||
<button @click="clearAllDrawings" class="clear-btn" title="清除所有">
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawings-list">
|
||||
<div
|
||||
@ -83,12 +122,14 @@
|
||||
</div>
|
||||
<div class="drawing-actions">
|
||||
<button @click.stop="flyToDrawing(id)" title="飞向">✈️</button>
|
||||
<button @click.stop="handlePrintDrawingInfo(id)" title="打印信息">🖨️</button>
|
||||
<button @click.stop="removeDrawing(id)" title="删除">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="panel-section options-section">
|
||||
<h4>样式设置</h4>
|
||||
<div class="options-tabs">
|
||||
@ -226,6 +267,21 @@ import { ref } from 'vue';
|
||||
import * as Cesium from 'cesium';
|
||||
import type { DrawingResult } from './components/DrawingTool';
|
||||
|
||||
// const props = defineProps<{
|
||||
// isDrawing: boolean;
|
||||
// currentDrawingType: string | null;
|
||||
// drawings: Map<string, DrawingResult>;
|
||||
// selectedDrawing: string | null;
|
||||
// drawingInfo: any;
|
||||
// drawingOptions: any;
|
||||
// getDrawingStatus: () => string;
|
||||
// getDrawingInfoText: () => string;
|
||||
// printSelectedDrawingInfo: () => void;
|
||||
// printAllDrawingsInfo: () => void;
|
||||
// exportSelectedDrawingAsText: () => string;
|
||||
// }>();
|
||||
|
||||
// 定义props
|
||||
const props = defineProps<{
|
||||
isDrawing: boolean;
|
||||
currentDrawingType: string | null;
|
||||
@ -249,7 +305,11 @@ const emit = defineEmits<{
|
||||
'update-circle-option': [key: string, value: any];
|
||||
'update-polygon-option': [key: string, value: any];
|
||||
'copy-drawing-info': [];
|
||||
'fly-to-selected-drawing': [];
|
||||
'fly-to-selected-drawing': [id: string];
|
||||
'print-selected-drawing-info': [];
|
||||
'print-all-drawings-info': [];
|
||||
'print-drawing-info': [id: string];
|
||||
'export-drawing-info': [id: string];
|
||||
}>();
|
||||
|
||||
const activeTab = ref<'circle' | 'polygon'>('circle');
|
||||
@ -279,10 +339,35 @@ const clearAllDrawings = () => {
|
||||
emit('clear-drawings');
|
||||
};
|
||||
|
||||
// 方法实现
|
||||
const flyToDrawing = (id: string) => {
|
||||
console.log('点击飞向空域按钮:', id);
|
||||
emit('fly-to-drawing', id);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 打印方法
|
||||
const handlePrintSelectedDrawingInfo = () => {
|
||||
console.log('点击了打印选中空域按钮');
|
||||
emit('print-selected-drawing-info');
|
||||
};
|
||||
|
||||
const handlePrintAllDrawingsInfo = () => {
|
||||
console.log('点击了打印所有空域按钮');
|
||||
emit('print-all-drawings-info');
|
||||
};
|
||||
|
||||
const handlePrintDrawingInfo = (id: string) => {
|
||||
console.log('点击了打印空域信息按钮:', id);
|
||||
emit('print-drawing-info', id);
|
||||
};
|
||||
|
||||
const handleExportSelectedDrawingInfo = () => {
|
||||
console.log('点击了导出空域信息按钮');
|
||||
emit('export-drawing-info');
|
||||
};
|
||||
|
||||
const updateCircleOption = (key: string, value: any) => {
|
||||
emit('update-circle-option', key, value);
|
||||
};
|
||||
@ -296,6 +381,7 @@ const copyDrawingInfo = () => {
|
||||
};
|
||||
|
||||
const flyToSelectedDrawing = () => {
|
||||
console.log('点击飞向选中空域按钮');
|
||||
emit('fly-to-selected-drawing');
|
||||
};
|
||||
|
||||
@ -331,6 +417,110 @@ const hexToColor = (hex: string): Cesium.Color => {
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* 新增操作按钮样式 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn:not(:disabled):hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
background: rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.print-btn:hover:not(:disabled) {
|
||||
background: rgba(255, 152, 0, 0.5);
|
||||
}
|
||||
|
||||
.print-all-btn {
|
||||
background: rgba(156, 39, 176, 0.3);
|
||||
}
|
||||
|
||||
.print-all-btn:hover:not(:disabled) {
|
||||
background: rgba(156, 39, 176, 0.5);
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
background: rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.export-btn:hover:not(:disabled) {
|
||||
background: rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.header-actions .action-btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* 信息操作按钮调整 */
|
||||
.info-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-actions .action-btn {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.print-info-btn {
|
||||
background: rgba(255, 152, 0, 0.3);
|
||||
}
|
||||
|
||||
.print-info-btn:hover {
|
||||
background: rgba(255, 152, 0, 0.5);
|
||||
}
|
||||
|
||||
/* 绘图操作按钮调整 */
|
||||
.drawing-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.drawing-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.drawing-actions button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 新增信息显示样式 */
|
||||
.info-section {
|
||||
border: 1px solid #1890ff;
|
||||
|
||||
@ -667,6 +667,215 @@ export class DrawingTool {
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* 打印空域基本信息
|
||||
*/
|
||||
printDrawingInfo(drawingId: string): void {
|
||||
const drawing = this.drawingEntities.get(drawingId);
|
||||
if (!drawing) {
|
||||
console.warn(`未找到ID为 ${drawingId} 的空域`);
|
||||
return;
|
||||
}
|
||||
|
||||
const info = this.generateDrawingInfo(drawing);
|
||||
this.printFormattedInfo(info);
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印所有空域信息
|
||||
*/
|
||||
printAllDrawingsInfo(): void {
|
||||
if (this.drawingEntities.size === 0) {
|
||||
console.log('当前没有绘制任何空域');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`=== 空域信息汇总 (共 ${this.drawingEntities.size} 个) ===`);
|
||||
this.drawingEntities.forEach((drawing, id) => {
|
||||
const info = this.generateDrawingInfo(drawing);
|
||||
this.printFormattedInfo(info);
|
||||
console.log('---'); // 分隔线
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化打印信息
|
||||
*/
|
||||
private printFormattedInfo(info: DrawingInfo): void {
|
||||
const { id, type, area, properties } = info;
|
||||
|
||||
console.log(`🛡️ 空域ID: ${id}`);
|
||||
console.log(`📝 类型: ${type === 'circle' ? '圆形空域' : '多边形空域'}`);
|
||||
console.log(`📊 面积: ${(area / 1000000).toFixed(3)} km²`);
|
||||
|
||||
if (type === 'circle') {
|
||||
const center = properties.center;
|
||||
console.log(`📍 圆心坐标:`);
|
||||
console.log(` 经度: ${center.longitude.toFixed(6)}°`);
|
||||
console.log(` 纬度: ${center.latitude.toFixed(6)}°`);
|
||||
console.log(` 高程: ${center.height.toFixed(2)} 米`);
|
||||
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;
|
||||
const boundaryPoints = properties.boundaryPoints;
|
||||
|
||||
console.log(`📍 中心点坐标:`);
|
||||
console.log(` 经度: ${center.longitude.toFixed(6)}°`);
|
||||
console.log(` 纬度: ${center.latitude.toFixed(6)}°`);
|
||||
console.log(` 高程: ${center.height.toFixed(2)} 米`);
|
||||
|
||||
console.log(`🗺️ 边界范围:`);
|
||||
console.log(` 北: ${bounds.north.toFixed(6)}°`);
|
||||
console.log(` 南: ${bounds.south.toFixed(6)}°`);
|
||||
console.log(` 东: ${bounds.east.toFixed(6)}°`);
|
||||
console.log(` 西: ${bounds.west.toFixed(6)}°`);
|
||||
|
||||
console.log(`📏 尺寸信息:`);
|
||||
console.log(` 宽度: ${(properties.width / 1000).toFixed(3)} km`);
|
||||
console.log(` 高度: ${(properties.height / 1000).toFixed(3)} km`);
|
||||
console.log(` 周长: ${(properties.perimeter / 1000).toFixed(3)} km`);
|
||||
|
||||
console.log(`📍 边界顶点 (${boundaryPoints.length}个):`);
|
||||
boundaryPoints.forEach((point, index) => {
|
||||
console.log(` 顶点${index + 1}: ${point.longitude.toFixed(6)}°, ${point.latitude.toFixed(6)}°, ${point.height.toFixed(2)}米`);
|
||||
});
|
||||
}
|
||||
|
||||
console.log(`🎨 样式设置:`);
|
||||
console.log(` 填充颜色: ${properties.options.color}`);
|
||||
console.log(` 边框颜色: ${properties.options.outlineColor}`);
|
||||
console.log(` 边框宽度: ${properties.options.outlineWidth}px`);
|
||||
console.log(` 拉伸高度: ${properties.options.extrudedHeight}米`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取空域信息的JSON格式
|
||||
*/
|
||||
getDrawingInfoJSON(drawingId: string): any {
|
||||
const drawing = this.drawingEntities.get(drawingId);
|
||||
if (!drawing) return null;
|
||||
|
||||
const info = this.generateDrawingInfo(drawing);
|
||||
return this.formatInfoToJSON(info);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取所有空域信息的JSON格式
|
||||
*/
|
||||
getAllDrawingsInfoJSON(): any[] {
|
||||
const result = [];
|
||||
for (const [id, drawing] of this.drawingEntities) {
|
||||
const info = this.generateDrawingInfo(drawing);
|
||||
result.push(this.formatInfoToJSON(info));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化信息为JSON
|
||||
*/
|
||||
private formatInfoToJSON(info: DrawingInfo): any {
|
||||
const jsonInfo: any = {
|
||||
id: info.id,
|
||||
type: info.type,
|
||||
area: {
|
||||
squareMeters: info.area,
|
||||
squareKilometers: info.area / 1000000
|
||||
},
|
||||
properties: {
|
||||
...info.properties,
|
||||
options: {
|
||||
color: info.properties.options.color?.toCssColorString(),
|
||||
outlineColor: info.properties.options.outlineColor?.toCssColorString(),
|
||||
outlineWidth: info.properties.options.outlineWidth,
|
||||
extrudedHeight: info.properties.options.extrudedHeight
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 移除循环引用
|
||||
delete jsonInfo.properties.boundaryPoints;
|
||||
delete jsonInfo.properties.center;
|
||||
|
||||
if (info.type === 'circle') {
|
||||
jsonInfo.circle = {
|
||||
center: info.properties.center,
|
||||
radius: info.radius,
|
||||
diameter: info.radius! * 2,
|
||||
circumference: info.properties.circumference
|
||||
};
|
||||
} else {
|
||||
jsonInfo.polygon = {
|
||||
center: info.properties.center,
|
||||
bounds: info.properties.bounds,
|
||||
dimensions: {
|
||||
width: info.properties.width,
|
||||
height: info.properties.height,
|
||||
perimeter: info.properties.perimeter
|
||||
},
|
||||
vertexCount: info.properties.boundaryPoints.length,
|
||||
vertices: info.properties.boundaryPoints
|
||||
};
|
||||
}
|
||||
|
||||
return jsonInfo;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出空域信息为文本
|
||||
*/
|
||||
exportDrawingInfoAsText(drawingId: string): string {
|
||||
const drawing = this.drawingEntities.get(drawingId);
|
||||
if (!drawing) return '';
|
||||
|
||||
const info = this.generateDrawingInfo(drawing);
|
||||
return this.formatInfoAsText(info);
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化信息为文本
|
||||
*/
|
||||
private formatInfoAsText(info: DrawingInfo): string {
|
||||
let text = '';
|
||||
|
||||
if (info.type === 'circle') {
|
||||
const center = info.properties.center;
|
||||
text = `圆形空域信息
|
||||
空域ID: ${info.id}
|
||||
圆心坐标: 经度${center.longitude.toFixed(6)}°, 纬度${center.latitude.toFixed(6)}°, 高程${center.height.toFixed(2)}米
|
||||
半径: ${(info.radius! / 1000).toFixed(3)} km
|
||||
直径: ${(info.radius! * 2 / 1000).toFixed(3)} km
|
||||
周长: ${(info.properties.circumference / 1000).toFixed(3)} km
|
||||
面积: ${(info.area / 1000000).toFixed(3)} km²`;
|
||||
} else {
|
||||
const center = info.properties.center;
|
||||
const bounds = info.properties.bounds;
|
||||
text = `多边形空域信息
|
||||
空域ID: ${info.id}
|
||||
中心点: 经度${center.longitude.toFixed(6)}°, 纬度${center.latitude.toFixed(6)}°, 高程${center.height.toFixed(2)}米
|
||||
边界范围: 北${bounds.north.toFixed(6)}° 南${bounds.south.toFixed(6)}° 东${bounds.east.toFixed(6)}° 西${bounds.west.toFixed(6)}°
|
||||
尺寸: 宽度${(info.properties.width / 1000).toFixed(3)}km 高度${(info.properties.height / 1000).toFixed(3)}km
|
||||
周长: ${(info.properties.perimeter / 1000).toFixed(3)} km
|
||||
面积: ${(info.area / 1000000).toFixed(3)} km²
|
||||
顶点数量: ${info.properties.boundaryPoints.length}`;
|
||||
|
||||
// 添加顶点信息
|
||||
info.properties.boundaryPoints.forEach((point, index) => {
|
||||
text += `\n顶点${index + 1}: 经度${point.longitude.toFixed(6)}°, 纬度${point.latitude.toFixed(6)}°, 高程${point.height.toFixed(2)}米`;
|
||||
});
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 计算面积
|
||||
*/
|
||||
@ -845,19 +1054,217 @@ export class DrawingTool {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞向图形
|
||||
*/
|
||||
// flyToDrawing(id: string, duration: number = 2): void {
|
||||
// console.log("飞飞飞非法欸")
|
||||
// const drawing = this.drawingEntities.get(id);
|
||||
// console.log("飞飞飞非111")
|
||||
// if (drawing) {
|
||||
// console.log("飞飞飞222")
|
||||
// this.viewer.flyTo(drawing.entity, {
|
||||
// duration: duration,
|
||||
// offset: new Cesium.HeadingPitchRange(0, -0.5, 0)
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* 飞向图形
|
||||
*/
|
||||
flyToDrawing(id: string, duration: number = 2): void {
|
||||
console.log("飞飞飞非法欸")
|
||||
console.log('=== flyToDrawing 开始执行 ===');
|
||||
console.log('目标空域ID:', id);
|
||||
|
||||
const drawing = this.drawingEntities.get(id);
|
||||
console.log("飞飞飞非111")
|
||||
if (drawing) {
|
||||
console.log("飞飞飞222")
|
||||
this.viewer.flyTo(drawing.entity, {
|
||||
if (!drawing) {
|
||||
console.error('❌ 未找到空域:', id);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('找到空域:', drawing);
|
||||
|
||||
try {
|
||||
if (drawing.type === 'circle') {
|
||||
// 对于圆形，飞到圆心上方
|
||||
const center = drawing.positions[0];
|
||||
const radius = drawing.positions.length > 1 ?
|
||||
Cesium.Cartesian3.distance(center, drawing.positions[1]) :
|
||||
(drawing.properties.options.radius || 1000);
|
||||
|
||||
const height = radius * 2 + 500; // 在半径2倍高度加上500米
|
||||
|
||||
console.log('圆形空域 - 圆心:', center);
|
||||
console.log('圆形空域 - 半径:', radius);
|
||||
console.log('圆形空域 - 飞行高度:', height);
|
||||
|
||||
this.viewer.camera.flyTo({
|
||||
destination: center,
|
||||
orientation: {
|
||||
heading: 0,
|
||||
pitch: -Math.PI/4,
|
||||
roll: 0
|
||||
},
|
||||
duration: duration,
|
||||
complete: () => {
|
||||
console.log('✅ 飞向圆形空域完成');
|
||||
},
|
||||
cancel: () => {
|
||||
console.log('❌ 飞向圆形空域取消');
|
||||
}
|
||||
});
|
||||
|
||||
} else {
|
||||
// 对于多边形，飞到边界框
|
||||
console.log('多边形空域 - 实体:', drawing.entity);
|
||||
|
||||
this.viewer.flyTo(drawing.entity, {
|
||||
duration: duration,
|
||||
offset: new Cesium.HeadingPitchRange(0, -Math.PI/4, 0),
|
||||
complete: () => {
|
||||
console.log('✅ 飞向多边形空域完成');
|
||||
},
|
||||
cancel: () => {
|
||||
console.log('❌ 飞向多边形空域取消');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log('✅ flyTo 命令已发送');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 飞向空域时发生错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞向图形（改进版本）
|
||||
*/
|
||||
flyToDrawingImproved(id: string, duration: number = 2): void {
|
||||
console.log('=== flyToDrawingImproved 开始执行 ===');
|
||||
|
||||
const drawing = this.drawingEntities.get(id);
|
||||
if (!drawing) {
|
||||
console.error('❌ 未找到空域:', id);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 计算实体的边界球
|
||||
const boundingSphere = this.computeEntityBoundingSphere(drawing.entity);
|
||||
if (!boundingSphere) {
|
||||
console.error('❌ 无法计算边界球');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('边界球:', boundingSphere);
|
||||
|
||||
// 飞到边界球
|
||||
this.viewer.camera.flyToBoundingSphere(boundingSphere, {
|
||||
duration: duration,
|
||||
offset: new Cesium.HeadingPitchRange(0, -0.5, 0)
|
||||
offset: new Cesium.HeadingPitchRange(0, -Math.PI/4, boundingSphere.radius * 3),
|
||||
complete: () => {
|
||||
console.log('✅ 飞向空域完成');
|
||||
},
|
||||
cancel: () => {
|
||||
console.log('❌ 飞向空域取消');
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 飞向空域时发生错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算实体的边界球
|
||||
*/
|
||||
private computeEntityBoundingSphere(entity: Cesium.Entity): Cesium.BoundingSphere | null {
|
||||
try {
|
||||
// 方法1: 使用 Cesium 的 computeBoundingSphere
|
||||
if (entity.polygon || entity.ellipse) {
|
||||
const boundingSphere = entity.computeBoundingSphere();
|
||||
if (boundingSphere) {
|
||||
return boundingSphere;
|
||||
}
|
||||
}
|
||||
|
||||
// 方法2: 手动计算边界球
|
||||
if (entity.polygon && entity.polygon.hierarchy) {
|
||||
const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now());
|
||||
if (hierarchy && hierarchy.positions) {
|
||||
return Cesium.BoundingSphere.fromPoints(hierarchy.positions);
|
||||
}
|
||||
}
|
||||
|
||||
// 方法3: 对于椭圆，使用位置和半径
|
||||
if (entity.ellipse && entity.position) {
|
||||
const position = entity.position.getValue(Cesium.JulianDate.now());
|
||||
const semiMajorAxis = entity.ellipse.semiMajorAxis?.getValue(Cesium.JulianDate.now()) || 1000;
|
||||
const semiMinorAxis = entity.ellipse.semiMinorAxis?.getValue(Cesium.JulianDate.now()) || 1000;
|
||||
const radius = Math.max(semiMajorAxis, semiMinorAxis);
|
||||
|
||||
return new Cesium.BoundingSphere(position, radius);
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error('计算边界球时发生错误:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 飞向图形的简单方法
|
||||
*/
|
||||
flyToDrawingSimple(id: string, duration: number = 2): void {
|
||||
console.log('=== flyToDrawingSimple 开始执行 ===');
|
||||
|
||||
const drawing = this.drawingEntities.get(id);
|
||||
if (!drawing) {
|
||||
console.error('❌ 未找到空域:', id);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取实体的位置
|
||||
const position = drawing.entity.position?.getValue(Cesium.JulianDate.now());
|
||||
if (!position) {
|
||||
console.error('❌ 无法获取实体位置');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('实体位置:', position);
|
||||
|
||||
// 转换到经纬度
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(position);
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||||
const height = cartographic.height + 2000; // 在实体高度上加2000米
|
||||
|
||||
console.log('目标位置 - 经度:', longitude, '纬度:', latitude, '高度:', height);
|
||||
|
||||
// 飞到该位置
|
||||
this.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
|
||||
orientation: {
|
||||
heading: 0,
|
||||
pitch: -Math.PI/3, // -60度俯角
|
||||
roll: 0
|
||||
},
|
||||
duration: duration,
|
||||
complete: () => {
|
||||
console.log('✅ 飞向空域完成');
|
||||
},
|
||||
cancel: () => {
|
||||
console.log('❌ 飞向空域取消');
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 飞向空域时发生错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -181,11 +181,125 @@ export function useDrawingManager(drawingTool: any) { // 修改参数类型为 a
|
||||
};
|
||||
|
||||
// 飞向图形
|
||||
const flyToDrawing = (id: string): void => {
|
||||
const tool = drawingTool?.value;
|
||||
if (tool) {
|
||||
tool.flyToDrawing(id);
|
||||
// const flyToDrawing = (id: string): void => {
|
||||
// const tool = drawingTool?.value;
|
||||
// if (tool) {
|
||||
// tool.flyToDrawing(id);
|
||||
// }
|
||||
// };
|
||||
|
||||
/**
|
||||
* 飞向图形
|
||||
*/
|
||||
const flyToDrawing = (id: string): void => {
|
||||
const tool = getTool();
|
||||
console.log('=== flyToDrawing 被调用 ===');
|
||||
console.log('目标ID:', id);
|
||||
console.log('工具是否存在:', !!tool);
|
||||
console.log('空域是否存在:', drawings.has(id));
|
||||
|
||||
if (!tool) {
|
||||
console.error('❌ 绘图工具未初始化');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!drawings.has(id)) {
|
||||
console.error('❌ 空域不存在:', id);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('✅ 开始执行飞向操作...');
|
||||
|
||||
// 尝试不同的飞向方法
|
||||
try {
|
||||
// 方法1: 使用改进版本
|
||||
tool.flyToDrawingImproved(id, 2);
|
||||
|
||||
// 或者方法2: 使用简单版本
|
||||
// tool.flyToDrawingSimple(id, 2);
|
||||
|
||||
// 或者方法3: 使用原始版本
|
||||
// tool.flyToDrawing(id, 2);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 飞向操作失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 飞向选中空域
|
||||
*/
|
||||
const flyToSelectedDrawing = (): void => {
|
||||
console.log('=== flyToSelectedDrawing 被调用 ===');
|
||||
console.log('当前选中的空域:', selectedDrawing.value);
|
||||
|
||||
if (!selectedDrawing.value) {
|
||||
console.error('❌ 请先选择一个空域');
|
||||
return;
|
||||
}
|
||||
|
||||
flyToDrawing(selectedDrawing.value);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 导出选中空域信息为文本
|
||||
*/
|
||||
const exportSelectedDrawingAsText = (): string => {
|
||||
console.log('=== exportSelectedDrawingAsText 开始执行 ===');
|
||||
const tool = getTool();
|
||||
console.log('工具状态:', !!tool);
|
||||
console.log('选中空域:', selectedDrawing.value);
|
||||
|
||||
if (!tool) {
|
||||
console.error('❌ 绘图工具未初始化');
|
||||
return '';
|
||||
}
|
||||
if (!selectedDrawing.value) {
|
||||
console.error('❌ 请先选择一个空域');
|
||||
return '';
|
||||
}
|
||||
|
||||
try {
|
||||
const text = tool.exportDrawingInfoAsText(selectedDrawing.value);
|
||||
console.log('导出的文本内容:', text);
|
||||
return text;
|
||||
} catch (error) {
|
||||
console.error('❌ 导出空域信息时发生错误:', error);
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出所有空域信息
|
||||
*/
|
||||
const exportAllDrawingsAsText = (): string => {
|
||||
console.log('=== exportAllDrawingsAsText 开始执行 ===');
|
||||
const tool = getTool();
|
||||
|
||||
if (!tool) {
|
||||
console.error('❌ 绘图工具未初始化');
|
||||
return '';
|
||||
}
|
||||
if (drawings.size === 0) {
|
||||
console.warn('⚠️ 当前没有绘制任何空域');
|
||||
return '';
|
||||
}
|
||||
|
||||
let text = `=== 空域信息汇总 (共 ${drawings.size} 个) ===\n\n`;
|
||||
|
||||
drawings.forEach((drawing, id) => {
|
||||
try {
|
||||
const drawingText = tool.exportDrawingInfoAsText(id);
|
||||
text += drawingText + '\n\n' + '='.repeat(50) + '\n\n';
|
||||
} catch (error) {
|
||||
console.error(`导出空域 ${id} 时发生错误:`, error);
|
||||
text += `空域 ${id} 导出失败\n\n` + '='.repeat(50) + '\n\n';
|
||||
}
|
||||
});
|
||||
|
||||
console.log('导出的所有空域文本内容:', text);
|
||||
return text;
|
||||
};
|
||||
|
||||
// 更新绘图选项
|
||||
@ -277,6 +391,99 @@ export function useDrawingManager(drawingTool: any) { // 修改参数类型为 a
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const printSelectedDrawingInfo = (): void => {
|
||||
console.log('printSelectedDrawingInfo 被调用');
|
||||
console.log('drawingTool:', drawingTool);
|
||||
console.log('selectedDrawing:', selectedDrawing.value);
|
||||
|
||||
const tool = getTool();
|
||||
if (!tool) {
|
||||
console.error('绘图工具未找到');
|
||||
return;
|
||||
}
|
||||
if (!selectedDrawing.value) {
|
||||
console.error('没有选中的空域');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('开始打印空域信息...');
|
||||
tool.printDrawingInfo(selectedDrawing.value);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 打印选中空域信息
|
||||
*/
|
||||
// const printSelectedDrawingInfo = (): void => {
|
||||
// const tool = getTool();
|
||||
// if (!tool || !selectedDrawing.value) {
|
||||
// console.warn('请先选择一个空域');
|
||||
// return;
|
||||
// }
|
||||
// console.log('=== 打印选中空域信息 ===');
|
||||
// tool.printDrawingInfo(selectedDrawing.value);
|
||||
// };
|
||||
|
||||
// 辅助函数：安全地访问 drawingTool
|
||||
const getTool = () => {
|
||||
return drawingTool?.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 打印所有空域信息
|
||||
*/
|
||||
const printAllDrawingsInfo = (): void => {
|
||||
const tool = getTool();
|
||||
if (!tool) {
|
||||
console.warn('绘图工具未初始化');
|
||||
return;
|
||||
}
|
||||
console.log('=== 打印所有空域信息 ===');
|
||||
tool.printAllDrawingsInfo();
|
||||
};
|
||||
|
||||
/**
|
||||
* 打印指定空域信息
|
||||
*/
|
||||
const printDrawingInfo = (id: string): void => {
|
||||
const tool = getTool();
|
||||
if (!tool) {
|
||||
console.warn('绘图工具未初始化');
|
||||
return;
|
||||
}
|
||||
console.log(`=== 打印空域信息: ${id} ===`);
|
||||
tool.printDrawingInfo(id);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取选中空域的JSON信息
|
||||
*/
|
||||
const getSelectedDrawingJSON = (): any => {
|
||||
const tool = getTool();
|
||||
if (!tool || !selectedDrawing.value) return null;
|
||||
return tool.getDrawingInfoJSON(selectedDrawing.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取所有空域的JSON信息
|
||||
*/
|
||||
const getAllDrawingsJSON = (): any[] => {
|
||||
const tool = getTool();
|
||||
if (!tool) return [];
|
||||
return tool.getAllDrawingsInfoJSON();
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出选中空域信息为文本
|
||||
*/
|
||||
// const exportSelectedDrawingAsText = (): string => {
|
||||
// const tool = getTool();
|
||||
// if (!tool || !selectedDrawing.value) return '';
|
||||
// return tool.exportDrawingInfoAsText(selectedDrawing.value);
|
||||
// };
|
||||
|
||||
|
||||
return {
|
||||
isDrawing,
|
||||
currentDrawingType,
|
||||
@ -297,6 +504,14 @@ export function useDrawingManager(drawingTool: any) { // 修改参数类型为 a
|
||||
importDrawings,
|
||||
getDrawingStatus,
|
||||
getDrawingInfoText,
|
||||
formatCoordinate
|
||||
formatCoordinate,
|
||||
// 新增的打印方法
|
||||
printSelectedDrawingInfo,
|
||||
printAllDrawingsInfo,
|
||||
printDrawingInfo,
|
||||
getSelectedDrawingJSON,
|
||||
getAllDrawingsJSON,
|
||||
exportSelectedDrawingAsText,
|
||||
flyToSelectedDrawing
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user