From e5e65bb50cbfb973f98191993ab559767eff7a53 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 30 七月 2024 17:06:34 +0800
Subject: [PATCH] 页面添加（知识图谱，数据统计，数据分析，站点管理）
---
src/views/visual/mapView/layerManager.vue | 105 ++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 101 insertions(+), 4 deletions(-)
diff --git a/src/views/visual/mapView/layerManager.vue b/src/views/visual/mapView/layerManager.vue
index 2da6706..5ce9395 100644
--- a/src/views/visual/mapView/layerManager.vue
+++ b/src/views/visual/mapView/layerManager.vue
@@ -1,23 +1,42 @@
<template>
- <Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="300px" @cancel="close(false)">
- <el-tree></el-tree>
+ <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) {
- // removeLayer && this.removeImageLayer();
// 閲嶇疆data鍊�
Object.assign(this.$data, this.$options.data());
!isCloseBtn && this.$refs.pop.close();
@@ -26,9 +45,87 @@
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></style>
+<style lang="scss" scoped>
+.layerBox {
+ height: 680px;
+
+ ::v-deep.el-tree {
+ background: transparent !important;
+
+ .el-tree-node__content:hover {
+ color: #409EFF;
+ }
+ }
+
+}
+</style>
--
Gitblit v1.9.3