<!--
|
* @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>
|
<div class="container-box">
|
<div v-for="(item, index) in buttonList" :key="index" class="item" @click="item.click">
|
<img class="icon_img" src="../../../../../assets/images/add.png" alt="" srcset="">
|
<div class="text">{{ item.label }}</div>
|
</div>
|
</div>
|
|
<div class="button-clear">
|
<button @click="deactivate">清空测量数据</button>
|
</div>
|
</div>
|
|
|
|
</template>
|
</public-box>
|
</template>
|
|
<script setup>
|
const longitude = ref(0)
|
const latitude = ref(0)
|
const height = ref(0)
|
let measure = reactive({})
|
onMounted(() => {
|
measure = new DC.Measure(window.$viewer)
|
})
|
|
onUnmounted(() => {
|
deactivate()
|
})
|
// 空间距离
|
function calcDistance() {
|
measure.distance()
|
}
|
// 地面距离
|
function distanceSurface() {
|
measure.distanceSurface()
|
}
|
// 平面面积
|
function calcArea(item) {
|
console.log('calcArea********************************', item)
|
measure.area()
|
}
|
// 地面面积
|
function areaSurface() {
|
measure.areaSurface()
|
}
|
// 角度
|
function calcAngle() {
|
measure.angle()
|
}
|
// 模型角度
|
function calcModelAngle() {
|
measure.angle({
|
clampToModel: true
|
})
|
}
|
// 高度
|
function calcHeight() {
|
measure.height()
|
}
|
// 模型高度
|
function calcModelHeight() {
|
measure.height({
|
clampToModel: true
|
})
|
}
|
// 航向
|
function calcHeading() {
|
measure.heading()
|
}
|
// 模型航向
|
function areaHeight() {
|
measure.areaHeight()
|
}
|
// 三角测量
|
|
function calcTriangleHeight() {
|
measure.triangleHeight()
|
}
|
// 模型三角测量
|
function calcModelTriangleHeight() {
|
measure.triangleHeight({
|
clampToModel: true
|
})
|
}
|
|
// 清空
|
function deactivate() {
|
console.log('deactivate********************************')
|
measure.deactivate()
|
}
|
|
const buttonList = [
|
{
|
label: '空间距离',
|
value: 'space',
|
imges: '../../../../../assets/images/add.png',
|
click: calcDistance
|
},
|
{
|
label: '贴地距离',
|
value: 'area',
|
imges: '../../../../../assets/images/add.png',
|
click: distanceSurface
|
},
|
{
|
label: '剖面',
|
value: 'volume',
|
imges: '../../../../../assets/images/add.png'
|
},
|
{
|
label: '水平面积',
|
value: 'volume',
|
imges: '../../../../../assets/images/add.png',
|
click: calcArea
|
},
|
{
|
label: '贴地面积', value: 'volume',
|
imges: '../../../../../assets/images/add.png',
|
click: areaSurface
|
|
},
|
{
|
label: '角度',
|
value: 'volume',
|
imges: '../../../../../assets/images/add.png',
|
click: calcAngle
|
},
|
{
|
label: '高度差',
|
value: 'volume',
|
imges: '../../../../../assets/images/add.png',
|
click: calcAngle
|
},
|
{
|
label: '三角测量',
|
value: 'volume',
|
imges: '../../../../../assets/images/add.png',
|
click: calcModelTriangleHeight
|
},
|
{
|
label: '坐标测量',
|
value: 'volume',
|
imges: '../../../../../assets/images/add.png'
|
},
|
]
|
|
const flyTo = () => {
|
// window.$viewer.flyToPosition(new DC.Position(longitude.value, latitude.value, height.value, 0, -90, 0), () => { }, 3)
|
}
|
</script>
|
|
<style lang="scss" >
|
.container-box {
|
width: 230px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
font-size: 12px;
|
/* 水平居中 */
|
}
|
|
.icon_img {
|
width: 40px;
|
height: 40px;
|
}
|
|
.item {
|
flex: 1 0 33.33%;
|
/* 每个项占 1/3 的宽度 */
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
/* 水平居中 */
|
justify-content: center;
|
/* 垂直居中 */
|
box-sizing: border-box;
|
/* 确保 padding 和 border 不影响宽度 */
|
padding: 10px;
|
/* 可选：增加内边距 */
|
}
|
|
.button-clear {
|
display: flex;
|
justify-content: center;
|
margin: 10px 0;
|
}
|
|
.button-clear button {
|
background-color: rgb(25, 0, 255);
|
padding: 10px;
|
border: none;
|
color: #fff;
|
}
|
|
.container-box .text:hover {
|
color: blue;
|
}
|
|
.text {
|
color: pink;
|
}
|
</style>
|
