<template>
|
<el-dropdown
|
class="fy-container dropdown-wrap"
|
trigger="click"
|
size="small"
|
@command="handleCommand"
|
>
|
<el-button type="primary" class="el-button-custom">
|
<el-icon class="el-icon--left"><TakeawayBox /></el-icon>
|
地图工具箱
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
</el-button>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item v-for="(item, index) in toolItem" :key="index" :command="index">
|
<el-button :type="item.value ? 'primary' : 'info'" plain size="default">
|
<font-awesome-icon :icon="item.icon" class="m-r-4" />
|
{{ item.label + ': ' + (item.value ? '开' : '关') }}
|
</el-button>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</template>
|
|
<script>
|
import toolbox from '@/utils/map/toolbox';
|
export default {
|
data() {
|
return {
|
toolItem: [
|
{
|
icon: 'fa fa-map-signs',
|
label: '地物标注',
|
value: false,
|
click: function () {
|
this.value = !this.value;
|
toolbox.toggleFeatures(this.value);
|
}
|
},
|
{
|
icon: 'fa fa-globe',
|
label: '卫星地图',
|
value: true,
|
click: function () {
|
this.value = !this.value;
|
toolbox.toggleSatellite(this.value);
|
}
|
},
|
{
|
icon: 'fa fa-compass',
|
label: '控制罗盘',
|
value: true,
|
click: function () {
|
this.value = !this.value;
|
toolbox.toggleControlbar(this.value);
|
}
|
},
|
{
|
icon: 'fa fa-compass',
|
label: '坐标拾取',
|
value: false,
|
click: function () {
|
this.value = !this.value;
|
toolbox.toggleCoorPicking(this.value);
|
}
|
},
|
{
|
icon: 'fa fa-compass',
|
label: '数据标记',
|
value: true,
|
click: function () {
|
this.value = !this.value;
|
// todo 数据标记
|
}
|
},
|
{
|
icon: 'fa fa-compass',
|
label: '数据弹框',
|
value: true,
|
click: function () {
|
this.value = !this.value;
|
// todo 数据弹框
|
}
|
}
|
]
|
};
|
},
|
methods: {
|
handleCommand(command) {
|
this.toolItem[command].click();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.dropdown-wrap {
|
position: absolute;
|
top: 10px;
|
left: 2px;
|
}
|
|
.el-button-custom {
|
--el-button-bg-color: var(--bg-color);
|
--el-button-hover-text-color: var(--select_color);
|
--el-button-hover-bg-color: var(--bg-color);
|
--el-button-border-color: var(--font-color);
|
--el-button-active-border-color: transparent;
|
}
|
|
.el-button-custom:focus-visible {
|
outline: 0px solid var(--el-button-outline-color);
|
}
|
|
.el-button {
|
margin: initial !important;
|
}
|
</style>
|
