| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-31 10:47:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-07 17:17:21 |
| | | * @LastEditTime: 2024-11-09 15:08:15 |
| | | * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue |
| | | * @Description: |
| | | * |
| | |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | |
| | | const treeRef = ref(null) |
| | | |
| | | const Cesium = DC.getLib('Cesium') |
| | | const treeProps = { |
| | | indent: 16, |
| | | showLabelLine: true, |
| | |
| | | const data = [ |
| | | { |
| | | id: '1', |
| | | label: '化工园区', |
| | | label: '园区倾斜摄影', |
| | | type: 'layer', |
| | | subType: '3Dtile', |
| | | url: VITE_APP_BASE + 'mx/tileset.json', |
| | |
| | | params: { |
| | | size: 1000 |
| | | }, |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/qy.png', |
| | | showPanel: false, |
| | | layerName: 'qyfb' |
| | | }, |
| | | |
| | |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png', |
| | | showPanel: false, |
| | | layerName: 'fxy' |
| | | }, |
| | | |
| | |
| | | if (item.subType == '3Dtile') { |
| | | if (!addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName] = new DC.Tileset( |
| | | item.url, |
| | | { |
| | | maximumMemoryUsage: 128, |
| | | progressiveResolutionHeightFraction: 0.5, |
| | | dynamicScreenSpaceErrorDensity: 0.1, |
| | | cullWithChildrenBounds: false, |
| | | maximumScreenSpaceError: 256, |
| | | skipLevelOfDetail: true, |
| | | preferLeaves: true |
| | | }) |
| | | item.url) |
| | | |
| | | tileLayers.addOverlay(addTileLayers[item.layerName]) |
| | | } else { |
| | |
| | | let data = res.data.data.records |
| | | |
| | | data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => { |
| | | let iconEl = '' |
| | | |
| | | if ('showPanel' in item && item.showPanel == false) { |
| | | if (item.backgroundIcon) { |
| | | iconEl = ` |
| | | <div class="map-name">${i[item.showParams] || i.name}</div> |
| | | <div class="map-icon"> |
| | | <img src="${item.backgroundIcon}"> |
| | | </div> |
| | | ` |
| | | } |
| | | } else { |
| | | iconEl = `<div class="marsBlueGradientPnl"> |
| | | <div>${i[item.showParams] || i.name}</div> |
| | | </div>` |
| | | } |
| | | |
| | | 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>` |
| | | ${iconEl} |
| | | </div>` |
| | | ) |
| | | |
| | | addTileLayers[item.layerName].addOverlay(divIcon) |
| | |
| | | |
| | | item.source.features.forEach(i => { |
| | | let wall = new DC.Wall( |
| | | i.geometry.coordinates[0].map(d => [...d, 200].join(',')).join(';') |
| | | i.geometry.coordinates[0].map(d => [...d, 125].join(',')).join(';') |
| | | ) |
| | | |
| | | wall.setStyle({ |
| | | material: new DC.WallTrailMaterialProperty({ |
| | | color: DC.Color.GREEN, |
| | | speed: 2 |
| | | color: Cesium.Color.fromBytes(0, 123, 255, 180), |
| | | speed: 10 |
| | | }) |
| | | }) |
| | | addTileLayers[item.layerName].addOverlay(wall) |
| | |
| | | addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName) |
| | | window.$viewer.addLayer(addTileLayers[item.layerName]) |
| | | |
| | | function computeCircle(radius) { |
| | | function computeCircle (radius) { |
| | | var positions = [] |
| | | for (var i = 0; i < 1080; i++) { |
| | | var radians = DC.Math.toRadians(i) |