92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
|
<!--
|
|||
|
|
* @Author: lixin
|
|||
|
|
* @Date: 2023-5-27
|
|||
|
|
* @Description: 地图上半部分工具栏，包括: 图层、漫游、量测、在线标绘、卷帘、出图等
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<div class="tool-list">
|
|||
|
|
<div v-for="(item, index) in toolList" :key="index" class="tool-bar">
|
|||
|
|
<img :src="item.id === selectedTool ? getImgUrl(item.id + '_press') : getImgUrl(item.id)">
|
|||
|
|
<span class="tool-text" :class="item.id === selectedTool ? 'press': ''" @click="handleTool(item)">{{ item.label }}</span>
|
|||
|
|
<b v-if="index !==(toolList.length -1)" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { reactive, toRefs } from 'vue'
|
|||
|
|
export default {
|
|||
|
|
emits: ['tool'],
|
|||
|
|
setup(props, { emit }) {
|
|||
|
|
const data = reactive({
|
|||
|
|
toolList: [
|
|||
|
|
{ id: 'tuceng', label: '图层' },
|
|||
|
|
{ id: 'liangce', label: '量测' }
|
|||
|
|
],
|
|||
|
|
selectedTool: null
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getImgUrl = (src) => {
|
|||
|
|
return new URL(`../../../../assets/basemap/toolbar/${src}.png`, import.meta.url).href
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleTool = (info) => {
|
|||
|
|
if (info?.id !== data.selectedTool) {
|
|||
|
|
data.selectedTool = info?.id
|
|||
|
|
} else {
|
|||
|
|
data.selectedTool = null
|
|||
|
|
}
|
|||
|
|
emit('tool', data.selectedTool)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
...toRefs(data),
|
|||
|
|
getImgUrl,
|
|||
|
|
handleTool
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.tool-list{
|
|||
|
|
// width: 592px;
|
|||
|
|
height: 40px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 60px;
|
|||
|
|
right: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: url("../../../../assets/basemap/toolbar/caozuo_bg.png") no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.tool-bar{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 15px;
|
|||
|
|
|
|||
|
|
.tool-text{
|
|||
|
|
font-size:14px;
|
|||
|
|
font-family:Microsoft YaHei;
|
|||
|
|
font-weight:400;
|
|||
|
|
/*color:rgba(78,253,255,1);*/
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin: 0 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tool-text.press{
|
|||
|
|
color: rgb(98,223,255);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
b {
|
|||
|
|
height: 20px;
|
|||
|
|
display: inline-block;
|
|||
|
|
border-right: 2px solid rgb(98,223,255);
|
|||
|
|
// border-right: 1px solid #eee;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|