From 9fe73388fdea13fa87c0a4894019eb66887abaad Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 31 Oct 2024 18:32:35 +0800
Subject: [PATCH] Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen
---
src/views/layout/components/scomponents/layersControl.vue | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 174 insertions(+), 0 deletions(-)
diff --git a/src/views/layout/components/scomponents/layersControl.vue b/src/views/layout/components/scomponents/layersControl.vue
new file mode 100644
index 0000000..b3ca479
--- /dev/null
+++ b/src/views/layout/components/scomponents/layersControl.vue
@@ -0,0 +1,174 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-10-31 10:47:29
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-10-31 18:16:33
+ * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
+ * @Description:
+ *
+ * Copyright (c) 2024 by shuishen, All Rights Reserved.
+-->
+<template>
+ <public-box>
+ <template #name>
+ <div class="name"><i class="fa fa-tasks"></i> 图层</div>
+ </template>
+
+ <template #close>
+ <div class="close" @click="$emit('close', 'layers')"><i class="fa fa-close"></i></div>
+ </template>
+
+ <template #content>
+ <div class="tree-content">
+ <el-tree ref="tree" :data="data" draggable="" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
+ :default-checked-keys="[5]" :props="defaultProps" :indent="treeProps['indent']" @check="handleCheckChange">
+ <template v-slot:default="{ node }">
+ <element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
+ <!-- 自定义label的slot -->
+ <template v-slot:node-label>
+ <span style="font-size: 12px">
+ {{ node.label }}
+ <i class="el-icon-eleme"></i></span>
+ </template>
+ <!-- 在右边追加内容的slot -->
+ <!-- <template v-slot:after-node-label>
+ <span style="padding-right: 10px">
+ <el-button type="primary" size="mini" @click.stop="openDrawer(node)">新增子节点</el-button>
+ <el-button type="primary" size="mini" @click.stop="openDrawer(node)">修改</el-button>
+ <el-button type="danger" size="mini" @click.stop="openDialog">删除</el-button></span>
+ </template> -->
+ </element-tree-line>
+ </template>
+ </el-tree>
+ </div>
+ </template>
+ </public-box>
+</template>
+
+<script setup>
+const { VITE_APP_BASE } = import.meta.env
+import { getViewer } from 'utils/getViewer'
+const globalViewer = getViewer()
+
+const treeProps = {
+ indent: 16,
+ showLabelLine: true,
+}
+
+const data = [
+ {
+ id: 1,
+ label: '三维模型',
+ children: [
+ {
+ id: 4,
+ label: '倾斜摄影',
+ children: [
+ {
+ id: 9,
+ label: '化工园区',
+ type: 'layer',
+ subType: '3Dtile',
+ url: VITE_APP_BASE + 'mx/tileset.json'
+ },
+ ],
+ },
+ ],
+ },
+]
+
+const defaultProps = {
+ children: 'children',
+ label: 'label',
+}
+
+const checkType = (value) => {
+ if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+ return 'obj'
+ } else if (Array.isArray(value)) {
+ return 'arr'
+ }
+}
+// 用于存储收集到的节点的数组
+const collectedNodes = reactive([])
+
+// 递归函数，收集所有 flag 为 true 的子节点
+const collectNodesWithFlag = (nodes) => {
+ if (checkType(nodes) == 'obj') {
+ if (nodes.type == 'layer') {
+ collectedNodes.value.push(nodes)
+ }
+ if (nodes.children && nodes.children.length > 0) {
+ collectNodesWithFlag(nodes.children)
+ return
+ }
+ }
+
+ if (checkType(nodes) == 'arr') {
+ nodes.forEach(item => {
+ if (item.type == 'layer') {
+ collectedNodes.value.push(item)
+ }
+
+ if (item.children && item.children.length > 0) {
+ collectNodesWithFlag(item.children)
+ }
+ })
+ }
+}
+
+let addTileLayers = {}
+let tileLayers = new DC.TilesetLayer('tileLayers')
+globalViewer.addLayer(tileLayers)
+
+const handleCheckChange = (data, options) => {
+ collectedNodes.value = []
+ collectNodesWithFlag(data)
+
+ collectedNodes.value.forEach(item => {
+ if (options.checkedKeys.some(i => i == item.id)) {
+ if (item.subType == '3Dtile') {
+ addTileLayers[item.layerName] = new DC.Tileset(
+ item.url
+ )
+ tileLayers.addOverlay(addTileLayers[item.layerName])
+ globalViewer.flyTo(addTileLayers[item.layerName])
+ }
+ } else {
+ if (item.subType == '3Dtile') {
+ tileLayers.removeOverlay(addTileLayers[item.layerName])
+
+ delete addTileLayers[item.layerName]
+ }
+ }
+ })
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-content {
+ min-width: 200px;
+ padding: 10px;
+
+ ::v-deep(.el-tree) {
+ color: #fff;
+ background: transparent;
+
+ /* 鼠标浮动过的背景颜色 */
+ .el-tree-node__content:hover {
+ background: #0074b7;
+ }
+
+ /* 鼠标点击时节点的背景颜色 */
+ .el-tree-node:focus>.el-tree-node__content {
+ background-color: #0074b7 !important;
+ color: rgb(255, 255, 255);
+ }
+
+ /* 鼠标失去焦点时节点背景的颜色 */
+ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+ background: rgb(0, 129, 204);
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3