<!--
|
* @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-content">
|
<div>
|
<span>经度:</span>
|
<el-input v-model="longitude" size="small" placeholder="请输入经度" />
|
</div>
|
<div>
|
<span>纬度:</span>
|
<el-input v-model="latitude" size="small" placeholder="请输入纬度" />
|
</div>
|
<div>
|
<span>高度:</span>
|
<el-input v-model="height" size="small" placeholder="请输入高度" />
|
</div>
|
</div>
|
|
<div class="cur-btn">
|
<el-button color="rgba(13,100,167,.8)" @click="flyTo" type="primary" size="small">坐标定位</el-button>
|
</div>
|
</template>
|
</public-box>
|
</template>
|
|
<script setup>
|
const longitude = ref(0)
|
const latitude = ref(0)
|
const height = ref(0)
|
|
const flyTo = () => {
|
window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.cur-content {
|
&>div {
|
margin-top: 10px;
|
padding: 0 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
width: 54px;
|
}
|
|
::v-deep(.el-input) {
|
border: none !important;
|
|
.el-input__wrapper {
|
background: rgba(63, 72, 84, .7) !important;
|
border: none !important;
|
box-shadow: none;
|
|
input {
|
color: #fff;
|
}
|
}
|
}
|
}
|
}
|
|
.cur-btn {
|
margin: 10px 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
