<template>
|
<div class="toolBarRight animation-slide-top no-print-view">
|
<el-button v-for="item, index in btnGroup" :key="index" @click="btnClick(item)"
|
class="btn btn-link toolBarRight-btn">
|
<i :class="item.icon"></i>{{ item.name }}
|
</el-button>
|
</div>
|
|
<base-map v-show="showBaseMap" @close="closeBaseMap"></base-map>
|
|
<ul v-show="moreToolShow" class="dropdown-menu dropdown-menu-right toolBarRight-dropdown-menu" style="">
|
<li class="widget-btn" data-widget="widgets/measure/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-calculator"></i>图上量算</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/analysis/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-bar-chart"></i>空间分析</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/centerXY/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-map-pin"></i>坐标定位</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/navXZQH/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-paper-plane"></i>地区导航</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/addmarker/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-edit"></i>我的标记</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/bookmark/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-tags"></i>视角书签</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/print/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-print"></i>地图打印</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/plot/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-object-group"></i>图上标绘</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/roamLine/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-send-o"></i>飞行漫游</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/queryRoute/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-level-up"></i>路线导航</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/mapSplit/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-columns"></i>卷帘对比</a>
|
</li>
|
<li class="widget-btn" data-widget="widgets/mapCompare/widget.js">
|
<a href="javascript:void(0)"><i class="fa fa-window-restore"></i>分屏对比</a>
|
</li>
|
</ul>
|
</template>
|
|
<script setup>
|
import baseMap from './scomponents/baseMap.vue'
|
let moreToolShow = ref(false)
|
|
let showBaseMap = ref(false)
|
|
const btnGroup = [
|
{
|
name: '底图',
|
icon: 'fa fa-map',
|
key: 'map',
|
},
|
{
|
name: '图层',
|
icon: 'fa fa-tasks',
|
key: 'task'
|
},
|
{
|
name: '工具',
|
icon: 'fa fa-cubes',
|
key: 'tool'
|
},
|
]
|
|
const btnClick = (item) => {
|
|
if (item.key == 'map') {
|
showBaseMap.value = !showBaseMap.value
|
moreToolShow.value = false
|
}
|
}
|
|
const closeBaseMap = () => showBaseMap.value = false
|
</script>
|
|
<style lang="scss" scoped>
|
.toolBarRight {
|
display: flex;
|
flex-wrap: nowrap;
|
position: absolute;
|
right: 540px;
|
z-index: 99;
|
top: 110px;
|
|
border: 1px solid #4081CB;
|
border-radius: 4px;
|
background: rgba(135, 158, 199, 0.3);
|
box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
|
pointer-events: auto;
|
|
::v-deep(.el-button) {
|
margin-left: 0;
|
border: none;
|
border-radius: 0;
|
background: transparent;
|
|
&.btn {
|
padding: 4px 12px;
|
font-size: 14px;
|
line-height: 1.6;
|
-webkit-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
|
-o-transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
|
transition: border .2s linear, color .2s linear, width .2s linear, background-color .2s linear;
|
}
|
|
&.btn-link {
|
font-weight: 400;
|
color: #007bff;
|
text-decoration: none;
|
}
|
|
&.toolBarRight-btn {
|
list-style-type: none;
|
cursor: pointer;
|
border-right: solid 1px #2b2c2f;
|
color: #edffff;
|
}
|
|
&.toolBarRight-btn:last-child {
|
border-right: none;
|
}
|
|
i {
|
margin-right: 4px;
|
}
|
}
|
}
|
</style>
|
