From 28de79b44655118b1deffb5c9a8b06ec2904905b Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 13 六月 2024 17:38:24 +0800
Subject: [PATCH] 功能添加
---
src/components/map/layerManager.vue | 766 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 415 insertions(+), 351 deletions(-)
diff --git a/src/components/map/layerManager.vue b/src/components/map/layerManager.vue
index c5edaf1..5debd87 100644
--- a/src/components/map/layerManager.vue
+++ b/src/components/map/layerManager.vue
@@ -1,351 +1,415 @@
-<template>
- <div v-drag
- class="layerBox">
- <div class="layerTitle">
- <div class="tileLeft">
- <div @click="setCloseLayer"
- class="titleImg">
- <ArrowLeft />
- </div>
- <div class="titleLable">鍥惧眰绠＄悊</div>
- </div>
- <div class="titleImg set"
- @click="store.state.layerFlag = null"
- title="鍏抽棴">
- <CloseBold />
- </div>
- </div>
- <div class="layerContent">
- <el-tree node-key="id"
- :props="props"
- :highlight-current="false"
- :data="treeData"
- show-checkbox
- :expand-on-click-node="false"
- @check-change="handleCheckChange"
- ref="treeRef">
- <template #default="{ node, data }">
- <span class="custom-tree-node">
- <span class="label">{{ node.label }}</span>
-
- <span class="button"
- v-if="data.sourceType == 'demoAnimation'">
- <el-dropdown trigger="click">
- <span class="el-dropdown-link">
- <el-icon style="color: wheat"
- class="el-icon--right">
- <MoreFilled />
- </el-icon>
- </span>
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item @click="playNode(data)">鎾斁</el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </span>
- </span>
- </template>
- </el-tree>
- </div>
- </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, nextTick, watch } from "vue";
-import { ElTree } from "element-plus";
-interface Tree {
- id: number;
- label: string;
- children?: Tree[];
-}
-const treeRef = ref<InstanceType<typeof ElTree>>();
-import { MoreFilled, Setting, CloseBold } from "@element-plus/icons-vue";
-import palyTools from "@/assets/js/tool/palyTools";
-import configTool from "@/assets/js/tool/configTool";
-import layerManager from "@/assets/js/map/layerManage";
-import axios from "axios";
-import store from "@/store";
-const treeData = ref([]);
-const props = {
- label: "name",
- children: "children",
-};
-const handleCheckChange = (data, check, indeterminate) => {
- if (data.children) return;
- if (data._children) {
- for (var i in data._children) {
- var layer = data._children[i];
- if (check) {
- layerManager.setAddLayer(layer);
- } else {
- layerManager.setRemoveLayer(layer);
- }
- }
- } else {
- if (check) {
- layerManager.setAddLayer(data);
- } else {
- layerManager.setRemoveLayer(data);
- }
- }
-};
-const playNode = (res) => {
- palyTools.Init(res);
-};
-const setTreeDataStart = (res) => {
- treeData.value = res.children;
- var obj = configTool.getTreeDataCheck(res.children, []);
- nextTick(() => {
- treeRef.value!.setCheckedKeys(obj, false);
- setLayerStart();
- });
-};
-const setLayerStart = () => {
- var obj = treeRef.value!.getCheckedNodes(false, false);
- setAddLayer(obj);
-};
-const setAddLayer = (res) => {
- for (var i in res) {
- if (res[i]._children) {
- setAddLayer(res[i]._children);
- } else {
- layerManager.setAddLayer(res[i]);
- }
- }
-};
-
-const setTreeStart = () => {
- var url = config.jsonUrl + "SmartEarth.json";
- axios.get(url).then((res) => {
- setTreeDataStart(res.data);
- });
-};
-const setAnimation = (res) => {
- var info = res.info;
- for (var i in info) {
- var obj = treeRef.value!.getNode(info[i]);
- if (res.show) {
- layerManager.setAddLayer(obj.data);
- } else {
- layerManager.setRemoveLayer(obj.data);
- }
- }
- var valCheck = treeRef.value!.getCheckedKeys();
- for (var i in info) {
- if (res.show) {
- valCheck.push(info[i]);
- } else {
- if (valCheck.indexOf(info[i]) > -1) {
- valCheck.splice(valCheck.indexOf(info[i]), 1);
- }
- }
- }
-
- nextTick(() => {
- treeRef.value!.setCheckedKeys(valCheck, false);
- store.state.setAnimation = false;
- });
-};
-onMounted(() => {
- setTreeStart();
-});
-watch(
- () => store.state.setAnimation,
- (newVal, oldVal) => {
- if (newVal) {
- setAnimation(newVal);
- }
- },
- { immediate: true, deep: true }
-);
-</script>
-
-<style lang="less" scoped>
-.layerBox {
- width: 300px;
- height: 600px;
- background: rgba(7, 8, 14, 0.8);
- box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
-
- position: absolute;
- z-index: 41;
- top: 150px;
- right: 1%;
-
- .layerTitle {
- width: calc(100% - 27px);
- height: 42px;
- background: #30bcff;
- box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5);
- border-bottom: 1px solid #20bc74;
- display: flex;
- justify-content: space-between;
- padding-left: 7px;
- padding-right: 20px;
- color: white;
-
- .tileLeft {
- height: 100%;
- display: flex;
- align-items: center;
-
- .titleLable {
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- }
- }
-
- .titleImg {
- width: 20px;
- height: 100%;
- display: flex;
- align-items: center;
- color: #fff;
- }
-
- .set {
- cursor: pointer;
- }
- }
-
- .layerContent {
- height: 525px;
- padding: 0 8px;
- overflow: auto;
- overflow-y: auto;
- }
-
- .layerContent::-webkit-scrollbar {
- width: 8px;
- }
-
- .layerContent::-webkit-scrollbar-thumb {
- border-radius: 10px;
- background: rgba(35, 47, 42, 0.8);
- }
-
- .layerContent::-webkit-scrollbar-track {
- border-radius: 0;
- background: rgba(35, 47, 42, 0.8);
- }
-
- .el-tree {
- width: 100%;
- overflow-y: auto;
- }
-
- .layerContent .el-tree-node__content {
- overflow: hidden;
- }
-
- .layerContent .custom-tree-node {
- overflow: hidden;
- flex-shrink: 1;
- flex-grow: 1;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-size: 16px;
- padding-right: 8px;
- }
-
- .layerContent .custom-tree-node .label {
- flex-shrink: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .layerContent .custom-tree-node .button {
- flex-grow: 0;
- flex-shrink: 0;
- }
-}
-
-.dropdown_box {
- position: relative;
-}
-
-/deep/.el-select-dropdown__item {
- font-size: 12px !important;
-}
-
-.el-tree {
- background: transparent;
-}
-
-/deep/ .el-tree-node {
- background: #0d131d;
- color: #ffffff;
- font-size: 20px;
- font-weight: 300;
- margin-top: 3px;
- padding: 8px;
-}
-
-/deep/ .el-tree-node:focus > .el-tree-node__content {
- background: transparent;
-}
-
-/deep/ .el-tree-node__content:hover {
- background: #0d131d;
-}
-
-/deep/ .el-tree-node__children {
- background: #1e2a3d;
-
- .el-tree-node {
- background: #1e2a3d;
- margin-top: 0;
- padding: 4px;
- }
-}
-
-/deep/
- .el-tree--highlight-current
- .el-tree-node.is-current
- > .el-tree-node__content {
- background: rgba(104, 156, 255, 0.5) !important;
-}
-
-.highlight {
- background: rgba(104, 156, 255, 0.5) !important;
-}
-
-// .custom-tree-node {
-// flex: 1;
-// display: flex;
-// align-items: center;
-// justify-content: space-between;
-// font-size: 16px;
-// padding-right: 8px;
-// }
-
-.el-dropdown-menu {
- background: rgba(7, 8, 14, 0.8);
- box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
- color: #fff;
- border: 0;
-
- /deep/ .el-dropdown-menu__item {
- color: #fff;
- }
-}
-
-/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
- background-color: rgba(104, 156, 255, 0.5);
-
- color: #fff;
-}
-</style>
-<style>
-.el-popper.is-light {
- border: 1px solid rgba(7, 8, 14, 0.8) !important;
-}
-
-.el-scrollbar {
- border: 0 !important;
-}
-</style>
+<template>
+ <div v-drag class="layerBox">
+ <div class="layerTitle">
+ <div class="tileLeft">
+ <div @click="setCloseLayer" class="titleImg">
+ <ArrowLeft />
+ </div>
+ <div class="titleLable">鍥惧眰绠＄悊</div>
+ </div>
+ <div class="set">
+ <div
+ @click="setAddManagerFile()"
+ class="titleImg"
+ style="margin-right: 10px"
+ title="瀵煎叆"
+ >
+ <el-icon :size="20">
+ <FolderOpened />
+ </el-icon>
+ </div>
+ <div
+ @click="setoutManagerFile()"
+ class="titleImg"
+ style="margin-right: 10px"
+ title="瀵煎嚭"
+ >
+ <el-icon :size="20">
+ <Download />
+ </el-icon>
+ </div>
+ <div
+ @click="setAddManagerLayer"
+ class="titleImg"
+ style="margin-right: 10px"
+ title="娣诲姞"
+ >
+ <el-icon :size="20">
+ <Plus />
+ </el-icon>
+ </div>
+ <div
+ class="titleImg"
+ @click="store.state.layerFlag = null"
+ title="鍏抽棴"
+ >
+ <el-icon :size="20">
+ <Close />
+ </el-icon>
+ </div>
+ </div>
+ </div>
+ <div class="layerContent">
+ <el-tree
+ node-key="id"
+ :props="props"
+ :highlight-current="false"
+ :data="treeData"
+ show-checkbox
+ :expand-on-click-node="false"
+ @check-change="handleCheckChange"
+ ref="treeRef"
+ class="stafftree"
+ >
+ </el-tree>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, nextTick, watch } from "vue";
+import { ElTree } from "element-plus";
+interface Tree {
+ id: number;
+ label: string;
+ children?: Tree[];
+}
+const treeRef = ref<InstanceType<typeof ElTree>>();
+import {
+ MoreFilled,
+ Setting,
+ Close,
+ Plus,
+ defineProps,
+ FolderOpened,
+ Download
+} from "@element-plus/icons-vue";
+import palyTools from "@/assets/js/tool/palyTools";
+import configTool from "@/assets/js/tool/configTool";
+import layerManager from "@/assets/js/map/layerManage";
+import axios from "axios";
+import store from "@/store";
+const treeData = ref([]);
+
+const props = {
+ label: "name",
+ children: "children"
+};
+const setAddManagerLayer = () => {
+ store.state.setAddEntityList = {
+ flag: true,
+ title: "鍥惧眰娣诲姞",
+ type: 1
+ };
+};
+const setAddManagerFile = () => {
+ store.state.setAddEntityList = {
+ flag: true,
+ title: "鍥惧眰瀵煎叆",
+ type: 3
+ };
+};
+const setoutManagerFile = () => {
+ configTool.saveToJson(treeData.value, "鍥惧眰瀵煎嚭");
+};
+const handleCheckChange = (data, check, indeterminate) => {
+ if (data.children) return;
+ if (data._children) {
+ for (var i in data._children) {
+ var layer = data._children[i];
+ if (check) {
+ layerManager.setAddLayer(layer);
+ } else {
+ layerManager.setRemoveLayer(layer);
+ }
+ }
+ } else {
+ if (check) {
+ layerManager.setAddLayer(data);
+ } else {
+ layerManager.setRemoveLayer(data);
+ }
+ }
+};
+const playNode = (res) => {
+ palyTools.Init(res);
+};
+const setTreeDataStart = (res) => {
+ treeData.value = res.children;
+ var obj = configTool.getTreeDataCheck(res.children, []);
+ nextTick(() => {
+ treeRef.value!.setCheckedKeys(obj, false);
+ setLayerStart();
+ });
+};
+const setLayerStart = () => {
+ var obj = treeRef.value!.getCheckedNodes(false, false);
+ setAddLayer(obj);
+};
+const setAddLayer = (res) => {
+ for (var i in res) {
+ if (res[i]._children) {
+ setAddLayer(res[i]._children);
+ } else {
+ layerManager.setAddLayer(res[i]);
+ }
+ }
+};
+
+const setTreeStart = () => {
+ var url = config.jsonUrl + "SmartEarth.json";
+ axios.get(url).then((res) => {
+ setTreeDataStart(res.data);
+ });
+};
+const setAnimation = (res) => {
+ var info = res.info;
+ for (var i in info) {
+ var obj = treeRef.value!.getNode(info[i]);
+ if (res.show) {
+ layerManager.setAddLayer(obj.data);
+ } else {
+ layerManager.setRemoveLayer(obj.data);
+ }
+ }
+ var valCheck = treeRef.value!.getCheckedKeys();
+ for (var i in info) {
+ if (res.show) {
+ valCheck.push(info[i]);
+ } else {
+ if (valCheck.indexOf(info[i]) > -1) {
+ valCheck.splice(valCheck.indexOf(info[i]), 1);
+ }
+ }
+ }
+
+ nextTick(() => {
+ treeRef.value!.setCheckedKeys(valCheck, false);
+ store.state.setAnimation = false;
+ });
+};
+const addGeometry = (val) => {
+ if (val.flag) {
+ for (var i in val.value) {
+ treeData.value.push(val.value[i]);
+ }
+ } else {
+ val.id = configTool.getEndDateTime();
+ if (val.sourceType === "3DTiles") {
+ treeData.value[0].children.push(val);
+ } else if (val.sourceType === "WMS") {
+ treeData.value[1].children.push(val);
+ } else if (val.sourceType === "TMS") {
+ treeData.value[2].children.push(val);
+ }
+ }
+};
+onMounted(() => {
+ setTreeStart();
+});
+defineExpose({
+ addGeometry
+});
+watch(
+ () => store.state.setAnimation,
+ (newVal, oldVal) => {
+ if (newVal) {
+ setAnimation(newVal);
+ }
+ },
+ { immediate: true, deep: true }
+);
+</script>
+
+<style lang="less" scoped>
+.layerBox {
+ width: 300px;
+ height: 600px;
+ background: rgba(7, 8, 14, 0.8);
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+
+ position: absolute;
+ z-index: 41;
+ top: 150px;
+ right: 1%;
+
+ .layerTitle {
+ width: calc(100% - 27px);
+ height: 42px;
+ background: #30bcff;
+ box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5);
+ border-bottom: 1px solid #20bc74;
+ display: flex;
+ justify-content: space-between;
+ padding-left: 7px;
+ padding-right: 20px;
+ color: white;
+
+ .tileLeft {
+ height: 100%;
+ display: flex;
+ align-items: center;
+
+ .titleLable {
+ font-size: 18px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #ffffff;
+ }
+ }
+
+ .titleImg {
+ width: 20px;
+ height: 100%;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ }
+
+ .set {
+ cursor: pointer;
+ display: flex;
+ }
+ }
+
+ .layerContent {
+ height: 525px;
+ padding: 0 8px;
+ overflow: auto;
+ overflow-y: auto;
+ }
+
+ .layerContent::-webkit-scrollbar {
+ width: 8px;
+ }
+
+ .layerContent::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: rgba(35, 47, 42, 0.8);
+ }
+
+ .layerContent::-webkit-scrollbar-track {
+ border-radius: 0;
+ background: rgba(35, 47, 42, 0.8);
+ }
+
+ .el-tree {
+ width: 100%;
+ overflow-y: auto;
+ }
+
+ .layerContent .el-tree-node__content {
+ overflow: hidden;
+ }
+
+ .layerContent .custom-tree-node {
+ overflow: hidden;
+ flex-shrink: 1;
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 16px;
+ padding-right: 8px;
+ }
+
+ .layerContent .custom-tree-node .label {
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .layerContent .custom-tree-node .button {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+}
+
+.dropdown_box {
+ position: relative;
+}
+
+/deep/.el-select-dropdown__item {
+ font-size: 12px !important;
+}
+
+.el-tree {
+ background: transparent;
+}
+
+/deep/ .el-tree-node {
+ background: #0d131d;
+ color: #ffffff;
+ font-size: 14px;
+ font-weight: 300;
+ margin-top: 3px;
+ padding: 8px;
+}
+
+/deep/ .el-tree-node:focus > .el-tree-node__content {
+ background: transparent;
+}
+
+/deep/ .el-tree-node__content:hover {
+ background: #0d131d;
+}
+
+/deep/ .el-tree-node__children {
+ background: #1e2a3d;
+
+ .el-tree-node {
+ background: #1e2a3d;
+ margin-top: 0;
+ padding: 4px;
+ font-size: 12px;
+ }
+}
+/deep/ .stafftree > .el-tree-node > .el-tree-node__content .el-checkbox {
+ display: none;
+}
+/deep/
+ .el-tree--highlight-current
+ .el-tree-node.is-current
+ > .el-tree-node__content {
+ background: rgba(104, 156, 255, 0.5) !important;
+}
+
+.highlight {
+ background: rgba(104, 156, 255, 0.5) !important;
+}
+
+// .custom-tree-node {
+// flex: 1;
+// display: flex;
+// align-items: center;
+// justify-content: space-between;
+// font-size: 16px;
+// padding-right: 8px;
+// }
+
+.el-dropdown-menu {
+ background: rgba(7, 8, 14, 0.8);
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ color: #fff;
+ border: 0;
+
+ /deep/ .el-dropdown-menu__item {
+ color: #fff;
+ }
+}
+
+/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
+ background-color: rgba(104, 156, 255, 0.5);
+
+ color: #fff;
+}
+</style>
+<style>
+.el-popper.is-light {
+ border: 1px solid rgba(7, 8, 14, 0.8) !important;
+}
+
+.el-scrollbar {
+ border: 0 !important;
+}
+</style>
--
Gitblit v1.9.3