129 lines
2.3 KiB
Vue
129 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<a-tooltip placement="leftBottom" trigger="click" color="transparent" :overlayInnerStyle="{boxShadow: 'none'}">
|
||
|
|
<template #title>
|
||
|
|
<div class="layers-tree">
|
||
|
|
<div class="layers-tree-title">图层管理</div>
|
||
|
|
<div class="layers-tree-content">
|
||
|
|
<a-Tree
|
||
|
|
checkable
|
||
|
|
:onCheck="onCheck"
|
||
|
|
:checkedKeys="checkedKeys"
|
||
|
|
:treeData="layerConfigs"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div class="map-item">
|
||
|
|
<i class="icon iconfont icon-layer"></i>
|
||
|
|
</div>
|
||
|
|
</a-tooltip>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue";
|
||
|
|
const onCheck = () => {
|
||
|
|
console.log("点击了测量工具");
|
||
|
|
};
|
||
|
|
const checkedKeys = ref([]);
|
||
|
|
const layerConfigs = ref([
|
||
|
|
{
|
||
|
|
title: "图层1",
|
||
|
|
key: "layer1",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: "子图层1",
|
||
|
|
key: "sublayer1",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层2",
|
||
|
|
key: "layer2",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层3",
|
||
|
|
key: "layer3",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层4",
|
||
|
|
key: "layer4",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层5",
|
||
|
|
key: "layer5",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层6",
|
||
|
|
key: "layer6",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层7",
|
||
|
|
key: "layer7",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层8",
|
||
|
|
key: "layer8",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层9",
|
||
|
|
key: "layer9",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层10",
|
||
|
|
key: "layer10",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层11",
|
||
|
|
key: "layer11",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层12",
|
||
|
|
key: "layer12",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "图层13",
|
||
|
|
key: "layer13",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const onSelect = (selectedKeys: any) => {
|
||
|
|
console.log(selectedKeys);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.map-item {
|
||
|
|
height: 40px;
|
||
|
|
width: 40px;
|
||
|
|
color: #000;
|
||
|
|
line-height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
.iconfont {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background-color: #005292;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.layers-tree {
|
||
|
|
width: 230px;
|
||
|
|
box-shadow: 0 1px 2px #00000026;
|
||
|
|
background-color: #fff;
|
||
|
|
cursor: initial;
|
||
|
|
border: 1px solid #ccdae7;
|
||
|
|
.layers-tree-title {
|
||
|
|
color: rgba(0, 0, 0, 0.85);
|
||
|
|
text-align: left;
|
||
|
|
padding-left: 10px;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
font-size: 16px;
|
||
|
|
border-bottom: 1px dotted #ccc;
|
||
|
|
}
|
||
|
|
.layers-tree-content {
|
||
|
|
max-height: 300px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|