|
|
|
@ -3,15 +3,15 @@ |
|
|
|
<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-text" v-if="!isToolbarCollapsed">收起</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- 工具栏内容 --> |
|
|
|
<div class="toolbar-content" v-show="!isToolbarCollapsed"> |
|
|
|
<div class="toolbar-content" v-show="!isToolbarCollapsed"> |
|
|
|
<div class="toolbar-group"> |
|
|
|
<button |
|
|
|
@click="toggleDrawing('point')" |
|
|
|
@ -178,7 +178,31 @@ |
|
|
|
// import 'cesium/Build/Cesium/Widgets/widgets.css' |
|
|
|
export default { |
|
|
|
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() { |
|
|
|
return { |
|
|
|
viewer: null, |
|
|
|
@ -213,6 +237,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
console.log(this.drawDomClick,999999) |
|
|
|
// this.initMap() |
|
|
|
this.checkCesiumLoaded() |
|
|
|
}, |
|
|
|
@ -1234,8 +1259,11 @@ export default { |
|
|
|
/* 主工具栏 - 修改后 */ |
|
|
|
.main-toolbar { |
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: 100px; |
|
|
|
/* left: 50px; */ |
|
|
|
right: 20px; |
|
|
|
|
|
|
|
z-index: 1000; |
|
|
|
display: flex; |
|
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
|
|