<template>
|
<Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="300px"
|
@cancel="close(false)">
|
|
<div class="layerBox">
|
<el-tree show-checkbox :data="treeData" ref="tree" node-key="id" :default-checked-keys="defaultLayer"
|
@check-change="handleCheckChange" :props="defaultProps"></el-tree>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from '@/components/Tool/Popup.vue';
|
import store from "@/store";
|
import mapServer from '@/assets/js/mapSdk/mapServe';
|
|
export default {
|
name: 'layerManager',
|
components: { Popup },
|
computed: {
|
getlayerTree() {
|
return store.getters.getlayerTree
|
}
|
},
|
data() {
|
return {
|
title: '图层管理',
|
defaultProps: {
|
children: 'children',
|
label: 'cnName'
|
},
|
treeData: [],
|
defaultLayer: [],
|
ids: [],
|
};
|
},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
this.$nextTick(() => {
|
this.setLayerStart();
|
})
|
},
|
setLayerStart() {
|
if (store.getters && store.getters.layerTree) {
|
this.defaultLayer = store.getters.defaultLayer;
|
this.ids = this.defaultLayer;
|
this.treeData = store.getters.layerTree
|
}
|
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
const checkIds = this.$refs.tree.getCheckedKeys()
|
if (this.ids === checkIds) return
|
this.ids.map(o => {
|
if (checkIds.indexOf(o) < 0) {
|
const obj = this.$refs.tree.getNode(o);
|
console.log(obj.checked);
|
if (obj.checked) {
|
mapServer.addLayer(obj.data)
|
} else {
|
mapServer.removeLayer(obj.data)
|
}
|
}
|
})
|
|
checkIds.map(n => {
|
if (this.ids.indexOf(n) < 0) {
|
const obj = this.$refs.tree.getNode(n);
|
if (obj.checked) {
|
mapServer.addLayer(obj.data)
|
} else {
|
mapServer.removeLayer(obj.data)
|
}
|
}
|
})
|
|
|
|
this.$store.dispatch('mapLayers/changeLayerTree', this.treeData)
|
const ids = this.$refs.tree.getCheckedKeys()
|
this.ids = ids;
|
this.$store.dispatch('mapLayers/changeDefaultLayer', ids)
|
},
|
setServerLayerChange(data, checked) {
|
if (checked) {
|
mapServer.addLayer(data)
|
} else {
|
mapServer.removeLayer(data)
|
}
|
|
},
|
getNodeList(list, checked) {
|
list.map(item => {
|
if (item.type == 1) {
|
if (item.children && item.children.length > 0) {
|
this.getNodeList(item.children)
|
}
|
} else {
|
this.setServerLayerChange(item, checked)
|
}
|
})
|
},
|
},
|
|
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.layerBox {
|
height: 680px;
|
|
::v-deep.el-tree {
|
background: transparent !important;
|
|
.el-tree-node__content:hover {
|
color: #409EFF;
|
}
|
}
|
|
}
|
</style>
|
