|
|
|
@ -3,167 +3,154 @@ |
|
|
|
<div id="cesiumViewer" ref="cesiumViewer"></div> |
|
|
|
|
|
|
|
<!-- 主工具栏 --> |
|
|
|
<div class="main-toolbar"> |
|
|
|
<div class="toolbar-group"> |
|
|
|
<div class="main-toolbar" :class="{ collapsed: isToolbarCollapsed }"> |
|
|
|
<!-- 展开/收起按钮 --> |
|
|
|
<div class="collapse-btn" @click="toggleToolbar"> |
|
|
|
<span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span> |
|
|
|
<span class="collapse-text" v-if="!isToolbarCollapsed">收起</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 工具栏内容 --> |
|
|
|
<div class="toolbar-content" v-show="!isToolbarCollapsed"> |
|
|
|
<div class="toolbar-group"> |
|
|
|
<button |
|
|
|
@click="toggleDrawing('point')" |
|
|
|
: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="toolbar-minimized" v-show="isToolbarCollapsed"> |
|
|
|
<button |
|
|
|
@click="toggleDrawing('point')" |
|
|
|
:class="{ active: drawingMode === 'point' }" |
|
|
|
title="点" |
|
|
|
class="tool-btn" |
|
|
|
class="min-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" |
|
|
|
class="min-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" |
|
|
|
class="min-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" |
|
|
|
class="min-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" |
|
|
|
class="min-tool-btn" |
|
|
|
> |
|
|
|
<span class="icon">⭕</span> |
|
|
|
<span class="text">{{ drawingMode === 'circle' ? '停止' : '圆形' }}</span> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="toolbar-group"> |
|
|
|
<div class="min-tool-separator"></div> |
|
|
|
<button |
|
|
|
@click="clearAll" |
|
|
|
:disabled="!allEntities.length" |
|
|
|
title="清除所有" |
|
|
|
class="tool-btn danger" |
|
|
|
class="min-tool-btn danger" |
|
|
|
> |
|
|
|
<span class="icon">🗑️</span> |
|
|
|
<span class="text">清除</span> |
|
|
|
</button> |
|
|
|
|
|
|
|
<button |
|
|
|
@click="exportData" |
|
|
|
:disabled="!allEntities.length" |
|
|
|
title="导出数据" |
|
|
|
class="tool-btn success" |
|
|
|
class="min-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"> |
|
|
|
@ -196,6 +183,7 @@ export default { |
|
|
|
return { |
|
|
|
viewer: null, |
|
|
|
scaleBar: null, |
|
|
|
isToolbarCollapsed: false, |
|
|
|
|
|
|
|
// 绘制相关 |
|
|
|
drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle' |
|
|
|
@ -234,6 +222,10 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 切换工具栏展开/收起 |
|
|
|
toggleToolbar() { |
|
|
|
this.isToolbarCollapsed = !this.isToolbarCollapsed |
|
|
|
}, |
|
|
|
checkCesiumLoaded() { |
|
|
|
if (typeof Cesium === 'undefined') { |
|
|
|
console.error('Cesium未加载，请检查CDN链接'); |
|
|
|
@ -1239,21 +1231,64 @@ export default { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主工具栏 */ |
|
|
|
/* 主工具栏 - 修改后 */ |
|
|
|
.main-toolbar { |
|
|
|
position: absolute; |
|
|
|
top: 100px; |
|
|
|
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); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.main-toolbar.collapsed { |
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
/* 工具栏内容 */ |
|
|
|
.toolbar-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 15px; |
|
|
|
padding: 15px; |
|
|
|
min-width: 180px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 收起按钮 */ |
|
|
|
.collapse-btn { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 10px; |
|
|
|
cursor: pointer; |
|
|
|
background: #f8f9fa; |
|
|
|
border-top-left-radius: 12px; |
|
|
|
border-bottom-left-radius: 12px; |
|
|
|
border-right: 1px solid #e9ecef; |
|
|
|
transition: all 0.3s ease; |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
.collapse-btn:hover { |
|
|
|
background: #e9ecef; |
|
|
|
} |
|
|
|
|
|
|
|
.collapse-icon { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
color: #495057; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.collapse-text { |
|
|
|
font-size: 12px; |
|
|
|
color: #6c757d; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
/* 工具栏组 */ |
|
|
|
.toolbar-group { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -1267,6 +1302,73 @@ export default { |
|
|
|
padding-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* 收起时的最小化工具栏 */ |
|
|
|
.toolbar-minimized { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
padding: 10px 8px; |
|
|
|
gap: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn { |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
border: 2px solid #e9ecef; |
|
|
|
border-radius: 8px; |
|
|
|
background: white; |
|
|
|
cursor: pointer; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 16px; |
|
|
|
color: #495057; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn:hover { |
|
|
|
background: #f8f9fa; |
|
|
|
border-color: #4dabf7; |
|
|
|
transform: translateY(-2px); |
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn.active { |
|
|
|
background: #4dabf7; |
|
|
|
color: white; |
|
|
|
border-color: #4dabf7; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn:disabled { |
|
|
|
opacity: 0.5; |
|
|
|
cursor: not-allowed; |
|
|
|
transform: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn.danger { |
|
|
|
color: #dc3545; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn.danger:hover { |
|
|
|
background: #f8d7da; |
|
|
|
border-color: #dc3545; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn.success { |
|
|
|
color: #28a745; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-btn.success:hover { |
|
|
|
background: #d4edda; |
|
|
|
border-color: #28a745; |
|
|
|
} |
|
|
|
|
|
|
|
.min-tool-separator { |
|
|
|
height: 1px; |
|
|
|
background: #e9ecef; |
|
|
|
margin: 5px 0; |
|
|
|
} |
|
|
|
|
|
|
|
/* 原来的工具按钮样式保持不变，但添加展开/收起状态的调整 */ |
|
|
|
.tool-btn { |
|
|
|
padding: 10px 15px; |
|
|
|
background: white; |
|
|
|
@ -1330,6 +1432,8 @@ export default { |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
/* 其他样式保持不变... */ |
|
|
|
|
|
|
|
/* 属性面板 */ |
|
|
|
.property-panel { |
|
|
|
position: absolute; |
|
|
|
@ -1344,235 +1448,6 @@ export default { |
|
|
|
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; |
|
|
|
@ -1586,34 +1461,6 @@ export default { |
|
|
|
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; |
|
|
|
@ -1632,4 +1479,21 @@ export default { |
|
|
|
:deep(.cesium-credit-textContainer) { |
|
|
|
display: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
/* 响应式调整 */ |
|
|
|
@media (max-width: 768px) { |
|
|
|
.main-toolbar { |
|
|
|
right: 10px; |
|
|
|
top: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
.toolbar-content { |
|
|
|
min-width: 150px; |
|
|
|
} |
|
|
|
|
|
|
|
.tool-btn { |
|
|
|
min-width: 100px; |
|
|
|
padding: 8px 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
