|
|
@ -3,12 +3,12 @@ |
|
|
<div id="cesiumViewer" ref="cesiumViewer"></div> |
|
|
<div id="cesiumViewer" ref="cesiumViewer"></div> |
|
|
|
|
|
|
|
|
<!-- 主工具栏 --> |
|
|
<!-- 主工具栏 --> |
|
|
<div class="main-toolbar" :class="{ collapsed: isToolbarCollapsed }"> |
|
|
<div class="main-toolbar" v-if="drawDomClick" :class="{ collapsed: isToolbarCollapsed }"> |
|
|
<!-- 展开/收起按钮 --> |
|
|
<!-- 展开/收起按钮 --> |
|
|
<div class="collapse-btn" @click="toggleToolbar"> |
|
|
<!-- <div class="collapse-btn" @click="toggleToolbar"> |
|
|
<span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span> |
|
|
<span class="collapse-icon">{{ isToolbarCollapsed ? '▶' : '◀' }}</span> |
|
|
<span class="collapse-text" v-if="!isToolbarCollapsed">收起</span> |
|
|
<span class="collapse-text" v-if="!isToolbarCollapsed">收起</span> |
|
|
</div> |
|
|
</div> --> |
|
|
|
|
|
|
|
|
<!-- 工具栏内容 --> |
|
|
<!-- 工具栏内容 --> |
|
|
<div class="toolbar-content" v-show="!isToolbarCollapsed"> |
|
|
<div class="toolbar-content" v-show="!isToolbarCollapsed"> |
|
|
@ -171,14 +171,38 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
// import * as Cesium from 'cesium' |
|
|
// import * as Cesium from 'cesium' |
|
|
// import 'cesium/Build/Cesium/Widgets/widgets.css' |
|
|
// import 'cesium/Build/Cesium/Widgets/widgets.css' |
|
|
export default { |
|
|
export default { |
|
|
name: 'CesiumMap', |
|
|
name: 'CesiumMap', |
|
|
|
|
|
props: { |
|
|
|
|
|
drawDomClick: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: false, |
|
|
|
|
|
// 增加 props 类型校验,方便调试 |
|
|
|
|
|
validator(val) { |
|
|
|
|
|
const isBoolean = typeof val === 'boolean' |
|
|
|
|
|
if (!isBoolean) { |
|
|
|
|
|
console.error('drawDomClick 必须是布尔值,当前值:', val, '类型:', typeof val) |
|
|
|
|
|
} |
|
|
|
|
|
return isBoolean |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
drawDomClick: { |
|
|
|
|
|
immediate: true, // 组件初始化时立即执行一次 |
|
|
|
|
|
handler(newVal, oldVal) { |
|
|
|
|
|
// 可选:如果需要在值变化时执行额外逻辑(比如初始化地图) |
|
|
|
|
|
if (newVal) { |
|
|
|
|
|
// this.initMap() |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
viewer: null, |
|
|
viewer: null, |
|
|
@ -213,6 +237,7 @@ |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
mounted() { |
|
|
mounted() { |
|
|
|
|
|
console.log(this.drawDomClick,999999) |
|
|
// this.initMap() |
|
|
// this.initMap() |
|
|
this.checkCesiumLoaded() |
|
|
this.checkCesiumLoaded() |
|
|
}, |
|
|
}, |
|
|
@ -1216,49 +1241,49 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.cesium-container { |
|
|
.cesium-container { |
|
|
width: 100vw; |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
height: 100vh; |
|
|
position: relative; |
|
|
position: relative; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#cesiumViewer { |
|
|
#cesiumViewer { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 主工具栏 - 修改后 */ |
|
|
/* 主工具栏 - 修改后 */ |
|
|
.main-toolbar { |
|
|
.main-toolbar { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 100px; |
|
|
top: 365px; /* 增大这个数值即可整体下移,比如从100px改成150px */ |
|
|
right: 20px; |
|
|
left: 62px; |
|
|
z-index: 1000; |
|
|
z-index: 1000; |
|
|
display: flex; |
|
|
display: flex; |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
border-radius: 12px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
transition: all 0.3s ease; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.main-toolbar.collapsed { |
|
|
.main-toolbar.collapsed { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 工具栏内容 */ |
|
|
/* 工具栏内容 - 无需修改 */ |
|
|
.toolbar-content { |
|
|
.toolbar-content { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
gap: 15px; |
|
|
gap: 15px; |
|
|
padding: 15px; |
|
|
padding: 15px; |
|
|
min-width: 180px; |
|
|
min-width: 180px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 收起按钮 */ |
|
|
/* 收起按钮 */ |
|
|
.collapse-btn { |
|
|
.collapse-btn { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|
@ -1269,48 +1294,48 @@ |
|
|
border-right: 1px solid #e9ecef; |
|
|
border-right: 1px solid #e9ecef; |
|
|
transition: all 0.3s ease; |
|
|
transition: all 0.3s ease; |
|
|
user-select: none; |
|
|
user-select: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.collapse-btn:hover { |
|
|
.collapse-btn:hover { |
|
|
background: #e9ecef; |
|
|
background: #e9ecef; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.collapse-icon { |
|
|
.collapse-icon { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
color: #495057; |
|
|
color: #495057; |
|
|
margin-right: 5px; |
|
|
margin-right: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.collapse-text { |
|
|
.collapse-text { |
|
|
font-size: 12px; |
|
|
font-size: 12px; |
|
|
color: #6c757d; |
|
|
color: #6c757d; |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 工具栏组 */ |
|
|
/* 工具栏组 */ |
|
|
.toolbar-group { |
|
|
.toolbar-group { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
gap: 8px; |
|
|
gap: 8px; |
|
|
padding-bottom: 10px; |
|
|
padding-bottom: 10px; |
|
|
border-bottom: 1px solid #e9ecef; |
|
|
border-bottom: 1px solid #e9ecef; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.toolbar-group:last-child { |
|
|
.toolbar-group:last-child { |
|
|
border-bottom: none; |
|
|
border-bottom: none; |
|
|
padding-bottom: 0; |
|
|
padding-bottom: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 收起时的最小化工具栏 */ |
|
|
/* 收起时的最小化工具栏 */ |
|
|
.toolbar-minimized { |
|
|
.toolbar-minimized { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
padding: 10px 8px; |
|
|
padding: 10px 8px; |
|
|
gap: 8px; |
|
|
gap: 8px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn { |
|
|
.min-tool-btn { |
|
|
width: 36px; |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
height: 36px; |
|
|
border: 2px solid #e9ecef; |
|
|
border: 2px solid #e9ecef; |
|
|
@ -1323,53 +1348,53 @@ |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #495057; |
|
|
color: #495057; |
|
|
transition: all 0.3s ease; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn:hover { |
|
|
.min-tool-btn:hover { |
|
|
background: #f8f9fa; |
|
|
background: #f8f9fa; |
|
|
border-color: #4dabf7; |
|
|
border-color: #4dabf7; |
|
|
transform: translateY(-2px); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn.active { |
|
|
.min-tool-btn.active { |
|
|
background: #4dabf7; |
|
|
background: #4dabf7; |
|
|
color: white; |
|
|
color: white; |
|
|
border-color: #4dabf7; |
|
|
border-color: #4dabf7; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn:disabled { |
|
|
.min-tool-btn:disabled { |
|
|
opacity: 0.5; |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
cursor: not-allowed; |
|
|
transform: none !important; |
|
|
transform: none !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn.danger { |
|
|
.min-tool-btn.danger { |
|
|
color: #dc3545; |
|
|
color: #dc3545; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn.danger:hover { |
|
|
.min-tool-btn.danger:hover { |
|
|
background: #f8d7da; |
|
|
background: #f8d7da; |
|
|
border-color: #dc3545; |
|
|
border-color: #dc3545; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn.success { |
|
|
.min-tool-btn.success { |
|
|
color: #28a745; |
|
|
color: #28a745; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-btn.success:hover { |
|
|
.min-tool-btn.success:hover { |
|
|
background: #d4edda; |
|
|
background: #d4edda; |
|
|
border-color: #28a745; |
|
|
border-color: #28a745; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.min-tool-separator { |
|
|
.min-tool-separator { |
|
|
height: 1px; |
|
|
height: 1px; |
|
|
background: #e9ecef; |
|
|
background: #e9ecef; |
|
|
margin: 5px 0; |
|
|
margin: 5px 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 原来的工具按钮样式保持不变,但添加展开/收起状态的调整 */ |
|
|
/* 原来的工具按钮样式保持不变,但添加展开/收起状态的调整 */ |
|
|
.tool-btn { |
|
|
.tool-btn { |
|
|
padding: 10px 15px; |
|
|
padding: 10px 15px; |
|
|
background: white; |
|
|
background: white; |
|
|
border: 2px solid #e9ecef; |
|
|
border: 2px solid #e9ecef; |
|
|
@ -1383,59 +1408,59 @@ |
|
|
color: #495057; |
|
|
color: #495057; |
|
|
transition: all 0.3s ease; |
|
|
transition: all 0.3s ease; |
|
|
min-width: 120px; |
|
|
min-width: 120px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn:hover { |
|
|
.tool-btn:hover { |
|
|
background: #f8f9fa; |
|
|
background: #f8f9fa; |
|
|
border-color: #4dabf7; |
|
|
border-color: #4dabf7; |
|
|
transform: translateY(-2px); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn.active { |
|
|
.tool-btn.active { |
|
|
background: #4dabf7; |
|
|
background: #4dabf7; |
|
|
color: white; |
|
|
color: white; |
|
|
border-color: #4dabf7; |
|
|
border-color: #4dabf7; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn:disabled { |
|
|
.tool-btn:disabled { |
|
|
opacity: 0.5; |
|
|
opacity: 0.5; |
|
|
cursor: not-allowed; |
|
|
cursor: not-allowed; |
|
|
transform: none !important; |
|
|
transform: none !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn.danger { |
|
|
.tool-btn.danger { |
|
|
color: #dc3545; |
|
|
color: #dc3545; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn.danger:hover { |
|
|
.tool-btn.danger:hover { |
|
|
background: #f8d7da; |
|
|
background: #f8d7da; |
|
|
border-color: #dc3545; |
|
|
border-color: #dc3545; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn.success { |
|
|
.tool-btn.success { |
|
|
color: #28a745; |
|
|
color: #28a745; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn.success:hover { |
|
|
.tool-btn.success:hover { |
|
|
background: #d4edda; |
|
|
background: #d4edda; |
|
|
border-color: #28a745; |
|
|
border-color: #28a745; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn .icon { |
|
|
.tool-btn .icon { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
width: 20px; |
|
|
width: 20px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tool-btn .text { |
|
|
.tool-btn .text { |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 其他样式保持不变... */ |
|
|
/* 其他样式保持不变... */ |
|
|
|
|
|
|
|
|
/* 属性面板 */ |
|
|
/* 属性面板 */ |
|
|
.property-panel { |
|
|
.property-panel { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 20px; |
|
|
top: 20px; |
|
|
left: 20px; |
|
|
left: 20px; |
|
|
@ -1446,10 +1471,10 @@ |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
min-width: 250px; |
|
|
min-width: 250px; |
|
|
max-width: 300px; |
|
|
max-width: 300px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 测量结果面板 */ |
|
|
/* 测量结果面板 */ |
|
|
.measurement-panel { |
|
|
.measurement-panel { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 80px; |
|
|
bottom: 80px; |
|
|
left: 20px; |
|
|
left: 20px; |
|
|
@ -1459,29 +1484,29 @@ |
|
|
padding: 15px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
|
min-width: 200px; |
|
|
min-width: 200px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 自定义比例尺样式 */ |
|
|
/* 自定义比例尺样式 */ |
|
|
:deep(.scale-bar-container) { |
|
|
:deep(.scale-bar-container) { |
|
|
user-select: none; |
|
|
user-select: none; |
|
|
pointer-events: none; |
|
|
pointer-events: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 隐藏Cesium的默认控件 */ |
|
|
/* 隐藏Cesium的默认控件 */ |
|
|
:deep(.cesium-viewer-bottom) { |
|
|
:deep(.cesium-viewer-bottom) { |
|
|
display: none !important; |
|
|
display: none !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep(.cesium-credit-logoContainer) { |
|
|
:deep(.cesium-credit-logoContainer) { |
|
|
display: none !important; |
|
|
display: none !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep(.cesium-credit-textContainer) { |
|
|
:deep(.cesium-credit-textContainer) { |
|
|
display: none !important; |
|
|
display: none !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* 响应式调整 */ |
|
|
/* 响应式调整 */ |
|
|
@media (max-width: 768px) { |
|
|
@media (max-width: 768px) { |
|
|
.main-toolbar { |
|
|
.main-toolbar { |
|
|
right: 10px; |
|
|
right: 10px; |
|
|
top: 80px; |
|
|
top: 80px; |
|
|
@ -1495,6 +1520,5 @@ |
|
|
min-width: 100px; |
|
|
min-width: 100px; |
|
|
padding: 8px 12px; |
|
|
padding: 8px 12px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
|