diff --git a/src/views/goverment/frontLargeScreen/index.vue b/src/views/goverment/frontLargeScreen/index.vue index ba496e8..400fd33 100644 --- a/src/views/goverment/frontLargeScreen/index.vue +++ b/src/views/goverment/frontLargeScreen/index.vue @@ -79,7 +79,7 @@
- 图层 + 图层1
@@ -90,7 +90,7 @@ :props="props" show-checkbox node-key="id" - @check-change="handleCheckChange" + @check="handleCheckChange" />
@@ -111,18 +111,18 @@
- 图层 + 图层2
@@ -325,8 +325,12 @@ const skyProperty = ref({ }); const checkedKeys = ref([]); const expandedKeys = ref([]); +const splitScreenCheckedKeys = ref([]); +const splitScreenExpandedKeys = ref([]); const layersObj: any = {}; +const splitScreenLayersObj: any = {}; const treeData = ref([]); +const splitScreenTreeData = ref([]); const props = { label: "title", children: "children" @@ -1033,88 +1037,122 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => { }); graphicLayer.addGraphic(graphicImg); }; -// const handleCheckChange = (e: any, isCheck: any) => { -// const layer = layersObj[e.key]; -// if (layer) { -// if (!layer.isAdded) { -// map.addLayer(layer); -// } -// // 处理子节点 -// if (e.children && e.children.length) { -// renderChildNode(isCheck, e.children); -// } - -// if (isCheck) { -// layer.show = true; -// layer.flyTo(); -// } else { -// layer.show = false; -// } -// } -// }; -const handleCheckChange = (e: any, isCheck: any, haveChildCheck: any) => { +const handleCheckChange = (e: any, obj: any) => { + console.log(e); const layer = layersObj[e.key]; - const isChildern = e.children; - console.log("node", e); - console.log(layer); - console.log(isCheck); - console.log(haveChildCheck); + const keys = obj.checkedKeys; + if (layer) { + if (!layer.isAdded) { + map.addLayer(layer); + } - if (layer && !isChildern && isCheck) { - setTimeout(function () { - // 修改白膜的偏移位置 - let findItem: any = albugineaList.value.find(item => item.id == e.key); - console.log(findItem); - let initCenter: any; - initCenter = { - lng: layer.orginCenterPoint.lng, - lat: layer.orginCenterPoint.lat, - alt: layer.orginCenterPoint.alt - }; - layer.position = { - lng: initCenter.lng + +findItem.lng, - lat: initCenter.lat + +findItem.lat, - alt: initCenter.alt + +findItem.alt - }; - console.log(layer.position); - }, 200); - layer.show = true; - layer.flyTo(); - } else { - layer.show = false; - } + // 处理子节点 + if (e.children && e.children.length) { + renderChildNode(keys, e.children); + } - // 增添模型 - if (isChildern && isChildern.length === 0 && !e.checked) { - map.addLayer(layer); - } - - // 处理子节点 - if (e.children && e.children.length) { - renderChildNode(isCheck, e.children, e.key); - } - - // 删除模型 - if (isChildern && isChildern.length === 0 && e.checked) { - layer.show = false; + if (keys.indexOf(e.key) !== -1) { + setTimeout(function () { + // 修改白膜的偏移位置 + let findItem: any = albugineaList.value.find(item => item.id == e.key); + console.log(findItem); + if (!findItem) return; + let initCenter: any; + initCenter = { + lng: layer.orginCenterPoint.lng, + lat: layer.orginCenterPoint.lat, + alt: layer.orginCenterPoint.alt + }; + layer.position = { + lng: initCenter.lng + +findItem.lng, + lat: initCenter.lat + +findItem.lat, + alt: initCenter.alt + +findItem.alt + }; + console.log(layer.position); + }, 200); + layer.show = true; + layer.flyTo(); + } else { + layer.show = false; + } } }; -const renderChildNode = (isCheck: any, children: any[], key: any) => { +const renderChildNode = (keys: string[], children: any[]) => { children.forEach(child => { const layer = layersObj[child.key]; if (layer) { if (!layer.isAdded) { map.addLayer(layer); } - if (child.key == key) { - if (isCheck && key == child.key) { - layer.show = true; - } else { - layer.show = false; - } - if (child.children) { - renderChildNode(isCheck, child.children, child.key); - } + + if (keys.indexOf(child.key) !== -1) { + layer.show = true; + } else { + layer.show = false; + } + if (child.children) { + renderChildNode(keys, child.children); + } + } + }); +}; +// 修改分屏地图 +const handleCheckChangeMapSplitScreen = (e: any, obj: any) => { + console.log(e); + const layer = layersObj[e.key]; + const keys = obj.checkedKeys; + if (layer) { + if (!layer.isAdded) { + mapScreenSplit.mapEx.addLayer(layer); + } + + // 处理子节点 + if (e.children && e.children.length) { + renderChildNodeMapSplitScreen(keys, e.children); + } + + if (keys.indexOf(e.key) !== -1) { + setTimeout(function () { + // 修改白膜的偏移位置 + let findItem: any = albugineaList.value.find(item => item.id == e.key); + console.log(findItem); + if (!findItem) return; + let initCenter: any; + initCenter = { + lng: layer.orginCenterPoint.lng, + lat: layer.orginCenterPoint.lat, + alt: layer.orginCenterPoint.alt + }; + layer.position = { + lng: initCenter.lng + +findItem.lng, + lat: initCenter.lat + +findItem.lat, + alt: initCenter.alt + +findItem.alt + }; + console.log(layer.position); + }, 200); + layer.show = true; + layer.flyTo(); + } else { + layer.show = false; + } + } +}; +// 处理分屏子节点 +const renderChildNodeMapSplitScreen = (keys: string[], children: any[]) => { + children.forEach(child => { + const layer = layersObj[child.key]; + if (layer) { + if (!layer.isAdded) { + mapScreenSplit.mapEx.addLayer(layer); + } + + if (keys.indexOf(child.key) !== -1) { + layer.show = true; + } else { + layer.show = false; + } + if (child.children) { + renderChildNodeMapSplitScreen(keys, child.children); } } }); @@ -1168,7 +1206,57 @@ const findChild = (parent: any, list: any[]) => { return node; }); }; +// 初始化分屏对比的树结构 +const initSplitScreenTree = () => { + const layers = map.getLayers({ + basemaps: false, // 是否取config.json中的basempas + layers: true // 是否取config.json中的layers + }); + console.log(layers); + // 遍历出config.json中所有的basempas和layers + for (let i = layers.length - 1; i >= 0; i--) { + const layer = layers[i]; + if (layer && layer.pid === -1) { + const node: any = { + title: layer.name, + key: layer.id, + id: layer.id, + pId: layer.pid, + group: layer.type === "group" + }; + node.children = splitScreenFindChild(node, layers); + splitScreenTreeData.value.push(node); + splitScreenLayersObj[layer.id] = layer; + splitScreenExpandedKeys.value.push(node.key); + } + } +}; +const splitScreenFindChild = (parent: any, list: any[]) => { + console.log(list, "11122233344455666"); + console.log(parent, "23121314488888772226699"); + return list + .filter((item: any) => item.pid === parent.id) + .map((item: any) => { + const node: any = { + title: item.name, + key: item.id, + id: item.id, + pId: item.pid, + group: item.type === "group" + }; + splitScreenLayersObj[item.id] = item; + splitScreenExpandedKeys.value.push(node.key); + + if (item.hasEmptyGroup || item.hasChildLayer) { + node.children = splitScreenFindChild(node, list); + } + if (item.isAdded && item.show) { + splitScreenCheckedKeys.value.push(node.key); + } + return node; + }); +}; // 雨天气操作 const yuOperate = (e: any, label: any) => { console.log(e, label); @@ -1883,8 +1971,13 @@ onUnmounted(() => { .cesium-cesiumInspector { background-color: rgba(23, 49, 71, 0.8); } - - /**覆盖mars3d内部控件的颜色等样式*/ + // 导航球 + .mars3d-compass { + bottom: calc(50% - 35px) !important; + left: 5px !important; + top: auto !important; + right: auto !important; + } .mars3d-compass .mars3d-compass-outer { fill: rgba(23, 49, 71, 0.8); } diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index e8fffc2..6b23311 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -79,7 +79,7 @@
- 图层 + 图层1
@@ -90,7 +90,7 @@ :props="props" show-checkbox node-key="id" - @check-change="handleCheckChange" + @check="handleCheckChange" />
@@ -111,18 +111,18 @@
- 图层 + 图层2
@@ -325,8 +325,12 @@ const skyProperty = ref({ }); const checkedKeys = ref([]); const expandedKeys = ref([]); +const splitScreenCheckedKeys = ref([]); +const splitScreenExpandedKeys = ref([]); const layersObj: any = {}; +const splitScreenLayersObj: any = {}; const treeData = ref([]); +const splitScreenTreeData = ref([]); const props = { label: "title", children: "children" @@ -633,6 +637,8 @@ const clickMenu = (name: any) => { screenComparisonShow.value = true; // 分屏对比 screenComparison(); + // 初始化树 + initSplitScreenTree(); } toolListShow.value = false; }; @@ -1035,88 +1041,122 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => { }); graphicLayer.addGraphic(graphicImg); }; -// const handleCheckChange = (e: any, isCheck: any) => { -// const layer = layersObj[e.key]; -// if (layer) { -// if (!layer.isAdded) { -// map.addLayer(layer); -// } -// // 处理子节点 -// if (e.children && e.children.length) { -// renderChildNode(isCheck, e.children); -// } - -// if (isCheck) { -// layer.show = true; -// layer.flyTo(); -// } else { -// layer.show = false; -// } -// } -// }; -const handleCheckChange = (e: any, isCheck: any, haveChildCheck: any) => { +// 修改分屏地图 +const handleCheckChangeMapSplitScreen = (e: any, obj: any) => { + console.log(e); const layer = layersObj[e.key]; - const isChildern = e.children; - console.log("node", e); - console.log(layer); - console.log(isCheck); - console.log(haveChildCheck); + const keys = obj.checkedKeys; + if (layer) { + if (!layer.isAdded) { + mapScreenSplit.mapEx.addLayer(layer); + } - if (layer && !isChildern && isCheck) { - setTimeout(function () { - // 修改白膜的偏移位置 - let findItem: any = albugineaList.value.find(item => item.id == e.key); - console.log(findItem); - let initCenter: any; - initCenter = { - lng: layer.orginCenterPoint.lng, - lat: layer.orginCenterPoint.lat, - alt: layer.orginCenterPoint.alt - }; - layer.position = { - lng: initCenter.lng + +findItem.lng, - lat: initCenter.lat + +findItem.lat, - alt: initCenter.alt + +findItem.alt - }; - console.log(layer.position); - }, 200); - layer.show = true; - layer.flyTo(); - } else { - layer.show = false; - } + // 处理子节点 + if (e.children && e.children.length) { + renderChildNodeMapSplitScreen(keys, e.children); + } - // 增添模型 - if (isChildern && isChildern.length === 0 && !e.checked) { - map.addLayer(layer); - } - - // 处理子节点 - if (e.children && e.children.length) { - renderChildNode(isCheck, e.children, e.key); - } - - // 删除模型 - if (isChildern && isChildern.length === 0 && e.checked) { - layer.show = false; + if (keys.indexOf(e.key) !== -1) { + setTimeout(function () { + // 修改白膜的偏移位置 + let findItem: any = albugineaList.value.find(item => item.id == e.key); + console.log(findItem); + if (!findItem) return; + let initCenter: any; + initCenter = { + lng: layer.orginCenterPoint.lng, + lat: layer.orginCenterPoint.lat, + alt: layer.orginCenterPoint.alt + }; + layer.position = { + lng: initCenter.lng + +findItem.lng, + lat: initCenter.lat + +findItem.lat, + alt: initCenter.alt + +findItem.alt + }; + console.log(layer.position); + }, 200); + layer.show = true; + layer.flyTo(); + } else { + layer.show = false; + } } }; -const renderChildNode = (isCheck: any, children: any[], key: any) => { +// 处理分屏子节点 +const renderChildNodeMapSplitScreen = (keys: string[], children: any[]) => { + children.forEach(child => { + const layer = layersObj[child.key]; + if (layer) { + if (!layer.isAdded) { + mapScreenSplit.mapEx.addLayer(layer); + } + + if (keys.indexOf(child.key) !== -1) { + layer.show = true; + } else { + layer.show = false; + } + if (child.children) { + renderChildNodeMapSplitScreen(keys, child.children); + } + } + }); +}; +const handleCheckChange = (e: any, obj: any) => { + console.log(e); + const layer = layersObj[e.key]; + const keys = obj.checkedKeys; + if (layer) { + if (!layer.isAdded) { + map.addLayer(layer); + } + + // 处理子节点 + if (e.children && e.children.length) { + renderChildNode(keys, e.children); + } + + if (keys.indexOf(e.key) !== -1) { + setTimeout(function () { + // 修改白膜的偏移位置 + let findItem: any = albugineaList.value.find(item => item.id == e.key); + console.log(findItem); + if (!findItem) return; + let initCenter: any; + initCenter = { + lng: layer.orginCenterPoint.lng, + lat: layer.orginCenterPoint.lat, + alt: layer.orginCenterPoint.alt + }; + layer.position = { + lng: initCenter.lng + +findItem.lng, + lat: initCenter.lat + +findItem.lat, + alt: initCenter.alt + +findItem.alt + }; + console.log(layer.position); + }, 200); + layer.show = true; + layer.flyTo(); + } else { + layer.show = false; + } + } +}; +const renderChildNode = (keys: string[], children: any[]) => { children.forEach(child => { const layer = layersObj[child.key]; if (layer) { if (!layer.isAdded) { map.addLayer(layer); } - if (child.key == key) { - if (isCheck && key == child.key) { - layer.show = true; - } else { - layer.show = false; - } - if (child.children) { - renderChildNode(isCheck, child.children, child.key); - } + + if (keys.indexOf(child.key) !== -1) { + layer.show = true; + } else { + layer.show = false; + } + if (child.children) { + renderChildNode(keys, child.children); } } }); @@ -1147,6 +1187,57 @@ const initTree = () => { } } }; +// 初始化分屏对比的树结构 +const initSplitScreenTree = () => { + const layers = map.getLayers({ + basemaps: false, // 是否取config.json中的basempas + layers: true // 是否取config.json中的layers + }); + console.log(layers); + // 遍历出config.json中所有的basempas和layers + for (let i = layers.length - 1; i >= 0; i--) { + const layer = layers[i]; + + if (layer && layer.pid === -1) { + const node: any = { + title: layer.name, + key: layer.id, + id: layer.id, + pId: layer.pid, + group: layer.type === "group" + }; + node.children = splitScreenFindChild(node, layers); + splitScreenTreeData.value.push(node); + splitScreenLayersObj[layer.id] = layer; + splitScreenExpandedKeys.value.push(node.key); + } + } +}; +const splitScreenFindChild = (parent: any, list: any[]) => { + console.log(list, "11122233344455666"); + console.log(parent, "23121314488888772226699"); + return list + .filter((item: any) => item.pid === parent.id) + .map((item: any) => { + const node: any = { + title: item.name, + key: item.id, + id: item.id, + pId: item.pid, + group: item.type === "group" + }; + splitScreenLayersObj[item.id] = item; + splitScreenExpandedKeys.value.push(node.key); + + if (item.hasEmptyGroup || item.hasChildLayer) { + node.children = splitScreenFindChild(node, list); + } + if (item.isAdded && item.show) { + splitScreenCheckedKeys.value.push(node.key); + } + return node; + }); +}; const findChild = (parent: any, list: any[]) => { return list .filter((item: any) => item.pid === parent.id) @@ -1886,7 +1977,13 @@ onUnmounted(() => { background-color: rgba(23, 49, 71, 0.8); } - /**覆盖mars3d内部控件的颜色等样式*/ + // 导航球 + .mars3d-compass { + bottom: calc(50% - 35px) !important; + left: 5px !important; + top: auto !important; + right: auto !important; + } .mars3d-compass .mars3d-compass-outer { fill: rgba(23, 49, 71, 0.8); }