120 lines
3.0 KiB
Vue
120 lines
3.0 KiB
Vue
<template>
|
|
<div class="leftSideSecond">
|
|
<div class="leftSideSecondBox">
|
|
<template v-if="obj">
|
|
<div class="menuItem" v-for="value in obj.children" :key="value.func" @click="handleClick(value)">
|
|
<img :src="`./assets/leftmenu/${value.func}.png`" style="color: rgb(255, 0, 0)" alt="" />
|
|
<!-- <span :style="{ color: !clickChange[value] ? 'var(--color-text)' : 'rgb(255,0,0)' }">{{ t(`${obj.key}.${value}`) }}</span>-->
|
|
<span>{{ value.name }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getCurrentInstance } from 'vue';
|
|
|
|
// 获取组件实例
|
|
const instance = getCurrentInstance();
|
|
const obj: any = ref(null);
|
|
const initList = (value) => {
|
|
obj.value = value;
|
|
console.log(value);
|
|
};
|
|
const methodMap = {
|
|
roam() {
|
|
instance.proxy['$sendChanel']('flyRoamDialog', '');
|
|
},
|
|
// 路径规划
|
|
routePlan() {
|
|
instance.proxy['$sendChanel']('routePlanningDialog', '');
|
|
},
|
|
//投影面积
|
|
projectionArea: () => {
|
|
new window['YJ'].Measure.MeasureTyArea(window['Earth1']).start();
|
|
},
|
|
//投影距离测量
|
|
projectionDistanceMeasure: () => {
|
|
new window['YJ'].Measure.MeasureProjectionDistance(window['Earth1']).start();
|
|
},
|
|
areaMeasure: () => {
|
|
new window['YJ'].Measure.MeasureTdArea(window['Earth1']).start();
|
|
},
|
|
//距离测量
|
|
distanceMeasure: () => {
|
|
new window['YJ'].Measure.MeasureDistance(window['Earth1']).start();
|
|
},
|
|
//高度测量
|
|
heightMeasure: () => {
|
|
new window['YJ'].Measure.MeasureHeight(window['Earth1']).start();
|
|
},
|
|
//三角测量
|
|
triangleMeasure: () => {
|
|
new window['YJ'].Measure.MeasureTriangle(window['Earth1']).start();
|
|
},
|
|
// 方位角
|
|
MeasureAzimuth() {
|
|
new window['YJ'].Measure.MeasureAzimuth(window['Earth1']).start();
|
|
},
|
|
//夹角测量
|
|
MeasureAngle() {
|
|
new window['YJ'].Measure.MeasureAngle(window['Earth1']).start();
|
|
},
|
|
// 坡度测量
|
|
lopeDistanceMeasures() {
|
|
new window['YJ'].Measure.MeasureSlopeDistance(window['Earth1']).start();
|
|
},
|
|
//坐标测量
|
|
coorMeasure() {
|
|
new window['YJ'].Measure.MeasureLocation(window['Earth1']).start();
|
|
},
|
|
//清除测量
|
|
clear() {
|
|
window['YJ'].Measure.Clear();
|
|
}
|
|
};
|
|
const handleClick = (value = 'projectionDistanceMeasure') => {
|
|
// console.log('点击了', value);
|
|
methodMap[value['func']]();
|
|
window['$']('.leftSideSecond ')[0].style.display = 'none';
|
|
};
|
|
defineExpose({
|
|
initList
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.leftSideSecond {
|
|
display: none;
|
|
height: 250px;
|
|
width: 230px;
|
|
background: url('@/assets/images/map/secondBj.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 9px 4px;
|
|
|
|
.leftSideSecondBox {
|
|
//border: 1px solid red;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
|
|
.menuItem {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 5px 0;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
span {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|