<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-10-29 15:48:36
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-10-29 19:53:49
|
* @FilePath: \bigScreen\src\views\layout\components\scomponents\tool\location.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<public-box style="z-index: 100;">
|
<template #name>
|
<div class="name"><i class="fa fa-map-pin"></i> 卷帘对比 </div>
|
</template>
|
|
<template #close>
|
<div class="close cursor-p" @click="$emit('closeChild')"><i class="fa fa-close"></i></div>
|
</template>
|
|
<template #content>
|
<div class="cur-btn">
|
<div class="m-4">
|
<p>左侧图层</p>
|
<el-select class="transparent-bg" v-model="value1" placeholder="天地图">
|
<el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</div>
|
<div class="m-4">
|
<p>右侧图层</p>
|
<el-select popper-class="transparent-bg" v-model="value2" collapse-tags placeholder="天地图">
|
<el-option v-for="item in components" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
</template>
|
|
<script setup>
|
const value1 = ref([])
|
const value2 = ref([])
|
|
|
|
onMounted(() => {
|
window.$viewer.sceneSplit.enable = true
|
})
|
|
const flyTo = () => {
|
// window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
|
}
|
|
onUnmounted(() => {
|
window.$viewer.sceneSplit.enable = false
|
})
|
|
const components = [
|
{ label: '天地图', value: '1' },
|
{ label: '谷歌影像', value: '2' },
|
{ label: '谷歌矢量', value: '3' },
|
{ label: '高德影像', value: '4' },
|
]
|
</script>
|
|
<style lang="scss" scoped >
|
.cur-btn {
|
margin: 10px 0;
|
display: flex;
|
|
// justify-content: center;
|
// align-items: center;
|
|
// &.el-select {
|
// width: 50px;
|
// }
|
}
|
|
.m-4 {
|
text-align: center;
|
width: 200px;
|
}
|
|
.transparent-bg {
|
background: transparent;
|
|
}
|
|
// 重新el——select样式
|
::v-deep .el-select__wrapper {
|
background: transparent;
|
|
}
|
|
::v-deep .el-select-dropdown {
|
// background: transparent;
|
background-color: aqua;
|
}
|
|
::v-deep .el-select .el-select__placeholder {
|
color: #fff;
|
}
|
</style>
|
