| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-31 10:47:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-05 18:36:54 |
| | | * @LastEditTime: 2024-11-07 17:17:21 |
| | | * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue |
| | | * @Description: |
| | | * |
| | |
| | | import { getPage } from '@/api/indParkInfo' |
| | | import { getList } from "@/api/space/space" |
| | | import { getList as getRiskList } from "@/api/riskSource/riskSource" |
| | | import yqfw from "@/assets/json/yqfw" |
| | | import pipeLine from "@/assets/json/line" |
| | | import { onUnmounted } from 'vue' |
| | | |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | import { getViewer } from 'utils/getViewer' |
| | | const globalViewer = getViewer() |
| | | |
| | | const treeRef = ref(null) |
| | | |
| | |
| | | showParams: 'category', |
| | | layerName: 'fxy' |
| | | }, |
| | | |
| | | { |
| | | id: '5', |
| | | label: '园区范围', |
| | | type: 'layer', |
| | | subType: 'geojsonWall', |
| | | layerName: 'yqfw', |
| | | source: yqfw |
| | | }, |
| | | |
| | | { |
| | | id: '6', |
| | | label: '地下管网', |
| | | type: 'layer', |
| | | subType: 'geojsonPipe', |
| | | layerName: 'dxgw', |
| | | source: pipeLine |
| | | }, |
| | | ] |
| | | |
| | | const defaultProps = { |
| | |
| | | |
| | | let addTileLayers = {} |
| | | let tileLayers = new DC.TilesetLayer('tileLayers') |
| | | globalViewer.addLayer(tileLayers) |
| | | window.$viewer.addLayer(tileLayers) |
| | | |
| | | const handleCheckChange = (data, options) => { |
| | | collectedNodes.value = [] |
| | |
| | | addTileLayers[item.layerName] = new DC.Tileset( |
| | | item.url, |
| | | { |
| | | maximumMemoryUsage: 128, |
| | | progressiveResolutionHeightFraction: 0.5, |
| | | dynamicScreenSpaceErrorDensity: 0.1, |
| | | cullWithChildrenBounds: false, |
| | | maximumScreenSpaceError: 256, |
| | | maximumMemoryUsage: 1024, |
| | | skipLevelOfDetail: true, |
| | | preferLeaves: true |
| | | }) |
| | |
| | | addTileLayers[item.layerName].show = true |
| | | } |
| | | |
| | | console.log(addTileLayers[item.layerName], 11111111) |
| | | |
| | | globalViewer.flyTo(addTileLayers[item.layerName]) |
| | | window.$viewer.flyTo(addTileLayers[item.layerName]) |
| | | } else if (item.subType == 'labelPoint') { |
| | | if (!addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName]) |
| | | globalViewer.addLayer(addTileLayers[item.layerName]) |
| | | } |
| | | window.$viewer.addLayer(addTileLayers[item.layerName]) |
| | | |
| | | item.method(item.params).then(res => { |
| | | let data = res.data.data.records |
| | | item.method(item.params).then(res => { |
| | | let data = res.data.data.records |
| | | |
| | | data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => { |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(i.lng, i.lat, 0), |
| | | `<div class="public-map-popup"> |
| | | data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => { |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(i.lng, i.lat, 0), |
| | | `<div class="public-map-popup"> |
| | | <div class="marsBlueGradientPnl"> |
| | | <div>${i[item.showParams] || i.name}</div> |
| | | </div> |
| | | </div>` |
| | | ) |
| | | |
| | | addTileLayers[item.layerName].addOverlay(divIcon) |
| | | }) |
| | | }) |
| | | } else { |
| | | addTileLayers[item.layerName].show = true |
| | | } |
| | | } else if (item.subType == 'geojsonWall') { |
| | | if (!addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName) |
| | | window.$viewer.addLayer(addTileLayers[item.layerName]) |
| | | |
| | | item.source.features.forEach(i => { |
| | | let wall = new DC.Wall( |
| | | i.geometry.coordinates[0].map(d => [...d, 200].join(',')).join(';') |
| | | ) |
| | | |
| | | addTileLayers[item.layerName].addOverlay(divIcon) |
| | | wall.setStyle({ |
| | | material: new DC.WallTrailMaterialProperty({ |
| | | color: DC.Color.GREEN, |
| | | speed: 2 |
| | | }) |
| | | }) |
| | | addTileLayers[item.layerName].addOverlay(wall) |
| | | }) |
| | | }) |
| | | } else { |
| | | addTileLayers[item.layerName].show = true |
| | | } |
| | | } else if (item.subType == 'geojsonPipe') { |
| | | if (!addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName) |
| | | window.$viewer.addLayer(addTileLayers[item.layerName]) |
| | | |
| | | function computeCircle (radius) { |
| | | var positions = [] |
| | | for (var i = 0; i < 1080; i++) { |
| | | var radians = DC.Math.toRadians(i) |
| | | positions.push({ |
| | | x: radius * Math.cos(radians), |
| | | y: radius * Math.sin(radians), |
| | | }) |
| | | } |
| | | return positions |
| | | } |
| | | |
| | | item.source.features.forEach(i => { |
| | | let polylineVolume = new DC.PolylineVolume( |
| | | i.geometry.coordinates.map(d => [d[0], d[1], 0.0].join(',')).join(';'), |
| | | computeCircle(0.3) |
| | | ) |
| | | |
| | | polylineVolume.setStyle({ |
| | | material: DC.Color.RED |
| | | }) |
| | | addTileLayers[item.layerName].addOverlay(polylineVolume) |
| | | }) |
| | | } else { |
| | | addTileLayers[item.layerName].show = true |
| | | } |
| | | } |
| | | } else { |
| | | if (addTileLayers[item.layerName]) { |
| | | if (item.subType == '3Dtile') { |
| | | addTileLayers[item.layerName].show = false |
| | | } else if (item.subType == 'labelPoint') { |
| | | globalViewer.removeLayer(addTileLayers[item.layerName]) |
| | | addTileLayers[item.layerName].show = false |
| | | } else if (item.subType == 'geojsonWall') { |
| | | addTileLayers[item.layerName].show = false |
| | | } else if (item.subType == 'geojsonPipe') { |
| | | addTileLayers[item.layerName].show = false |
| | | } |
| | | |
| | | delete addTileLayers[item.layerName] |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | // handleCheckChange(data.filter(i => i.id == '1'), { |
| | | // checkedKeys: ['1'] |
| | | // }) |
| | | handleCheckChange(data.filter(i => i.id == '1'), { |
| | | checkedKeys: ['1'] |
| | | }) |
| | | }) |
| | | |
| | | onUnmounted(() => { |
| | | tileLayers && window.$viewer.removeLayer(tileLayers) |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) |
| | | }) |
| | | }) |
| | | </script> |
| | | |