| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-31 10:47:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2025-01-04 20:17:26 |
| | | * @LastEditTime: 2025-02-19 11:42:40 |
| | | * @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue |
| | | * @Description: |
| | | * |
| | |
| | | // import rqgw from "@/assets/json/rqgw" |
| | | import wsgw from "@/assets/json/wsgw" |
| | | import ysgw from "@/assets/json/ysgw" |
| | | import track from "@/assets/json/track" |
| | | import { onUnmounted } from 'vue' |
| | | import EventBus from 'utils/bus' |
| | | import { usePointStore } from 'store/usepoint' |
| | |
| | | |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | // , '7', |
| | | let indexPoint = ref(['1', '5', '7']) |
| | | let indexPoint = ref(['1', '5', '7', '8']) |
| | | |
| | | const treeRef = ref(null) |
| | | |
| | |
| | | panoramaShow.value = false |
| | | } |
| | | |
| | | const baseRcImages = new window.$Cesium.WebMapTileServiceImageryProvider({ |
| | | url: '/arcgis117/rest/services/DTFW/rcgyyyx/MapServer/WMTS', |
| | | layer: 'DTFW_rcgyyyx', |
| | | style: 'default', |
| | | format: 'image/png', |
| | | tileMatrixSetID: 'default028mm', |
| | | tilingScheme: new window.$Cesium.GeographicTilingScheme(), |
| | | tileMatrixLabels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'] |
| | | }) |
| | | |
| | | const data = [ |
| | | { |
| | | id: '1', |
| | |
| | | type: 'layer', |
| | | subType: '3Dtile', |
| | | urlData: [ |
| | | // { |
| | | // url: '/3Dtile/lcmx/tile_01/tileset.json', |
| | | // label: 'tile_01' |
| | | // }, |
| | | // { |
| | | // url: '/3Dtile/lcmx/tile_02/tileset.json', |
| | | // label: 'tile_02' |
| | | // }, |
| | | { |
| | | url: '/3Dtile/rcmx_t/part1/tileset.json', |
| | | label: 'part1' |
| | | }, |
| | | { |
| | | url: '/3Dtile/rcmx_t/part2/tileset.json', |
| | | label: 'part2' |
| | | }, |
| | | |
| | | ], |
| | | layerName: 'hgyq' |
| | | }, |
| | |
| | | |
| | | { |
| | | parentId: '3', |
| | | id: '3-5', |
| | | label: '湿地', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getList, |
| | | params: { |
| | | type: 5, |
| | | size: 1000 |
| | | }, |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/sd.png', |
| | | className: 'xfs-box', |
| | | showPanel: false, |
| | | layerName: 'sd', |
| | | incident: (e) => { |
| | | const { attrParams } = e.overlay |
| | | // 删除 |
| | | destroyPop() |
| | | if (!attrParams.firmName) { |
| | | return |
| | | } |
| | | addPopLayers[attrParams.id] = new DC.HtmlLayer(attrParams.id) |
| | | window.$viewer.addLayer(addPopLayers[attrParams.id]) |
| | | let iconEl = `<div class="marsBlueGradientPnl"> |
| | | <div>企业名称:${attrParams.firmName}</div> |
| | | <div>作用:${attrParams.mainFuncName}</div> |
| | | </div>` |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64), |
| | | `<div class="public-map-popup-two"> |
| | | ${iconEl} |
| | | </div>` |
| | | ) |
| | | let incident = () => { |
| | | destroyPop() |
| | | } |
| | | divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | addPopLayers[attrParams.id].addOverlay(divIcon) |
| | | } |
| | | }, |
| | | |
| | | { |
| | | parentId: '3', |
| | | id: '3-6', |
| | | label: '坑塘', |
| | | type: 'layer', |
| | |
| | | |
| | | { |
| | | parentId: '3', |
| | | id: '3-7', |
| | | id: '3-8', |
| | | label: '桥梁', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | |
| | | layerName: 'ql' |
| | | }, |
| | | |
| | | /* { |
| | | { |
| | | parentId: '3', |
| | | id: '3-9', |
| | | label: '雨水管网', |
| | |
| | | layerName: 'ysgw', |
| | | source: ysgw, |
| | | color: DC.Color.CYAN.withAlpha(0.9), |
| | | height: 48, |
| | | }, */ |
| | | height: 30, |
| | | }, |
| | | |
| | | { |
| | | parentId: '3', |
| | | id: '3-10', |
| | | label: '排洪渠', |
| | | type: 'layer', |
| | | subType: 'geojsonPolygon', |
| | | layerName: 'track', |
| | | source: track, |
| | | color: DC.Color.BLUE.withAlpha(0.9), |
| | | height: 30, |
| | | }, |
| | | ] |
| | | }, |
| | | |
| | |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-yb.png', |
| | | showPanel: false, |
| | | layerName: 'fxyOrdinary', |
| | | customWx: true, |
| | | incident: (e) => { |
| | | const { attrParams } = e.overlay |
| | | // 删除 |
| | |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-larger', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-jd.png', |
| | | className: 'fxy-larger-b', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-zd-b.png', |
| | | showPanel: false, |
| | | layerName: 'fxyLarger', |
| | | customWx: true, |
| | | incident: (e) => { |
| | | const { attrParams } = e.overlay |
| | | // 删除 |
| | |
| | | addPopLayers[attrParams.name].addOverlay(divIcon) |
| | | } |
| | | }, |
| | | |
| | | { |
| | | parentId: '4', |
| | | id: '4-3', |
| | | label: '重大', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getRiskList, |
| | | params: { |
| | | riskLevel: 3, |
| | | size: 1000 |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-larger', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-jd.png', |
| | | showPanel: false, |
| | | layerName: 'fxyLargerB', |
| | | customWx: true, |
| | | incident: (e) => { |
| | | const { attrParams } = e.overlay |
| | | // 删除 |
| | | destroyPop() |
| | | addPopLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name) |
| | | window.$viewer.addLayer(addPopLayers[attrParams.name]) |
| | | let iconEl = `<div class="marsBlueGradientPnl"> |
| | | <li>企业名称:${attrParams.firmName || ''}</li> |
| | | <li>风险等级:${attrParams.riskLevelName || ''}</li> |
| | | <li>行业类别:${attrParams.name || ''}</li> |
| | | </div>` |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64), |
| | | `<div class="public-map-popup-three"> |
| | | ${iconEl} |
| | | </div>` |
| | | ) |
| | | let incident = () => { |
| | | destroyPop() |
| | | } |
| | | divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | addPopLayers[attrParams.name].addOverlay(divIcon) |
| | | } |
| | | }, |
| | | { |
| | | parentId: '4', |
| | | id: '4-9', |
| | |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-zd.png', |
| | | showPanel: false, |
| | | layerName: 'fxyZdLarger', |
| | | customWx: true, |
| | | incident: (e) => { |
| | | const { attrParams } = e.overlay |
| | | // 删除 |
| | |
| | | ] |
| | | }, |
| | | |
| | | // { |
| | | // id: '5', |
| | | // label: '园区范围', |
| | | // type: 'layer', |
| | | // subType: 'geojsonWall', |
| | | // layerName: 'yqfw', |
| | | // source: yqfw |
| | | // }, |
| | | { |
| | | id: '5', |
| | | label: '园区范围', |
| | | type: 'layer', |
| | | subType: 'geojsonWall', |
| | | layerName: 'yqfw', |
| | | source: yqfw |
| | | }, |
| | | |
| | | { |
| | | id: '7', |
| | |
| | | panoramaUrl.value = attrParams.url |
| | | panoramaShow.value = true |
| | | } |
| | | }, |
| | | |
| | | { |
| | | id: '8', |
| | | label: '瑞昌影像', |
| | | type: 'layer', |
| | | subType: 'baseMap', |
| | | layerName: 'baseMap', |
| | | source: baseRcImages, |
| | | }, |
| | | |
| | | /* { |
| | |
| | | // progressiveResolutionHeightFraction: 0.5, |
| | | // baseScreenSpaceError: 1024 |
| | | |
| | | |
| | | skipLevelOfDetail: true, |
| | | baseScreenSpaceError: 1024, |
| | | maximumScreenSpaceError: 16, // 数值加大,能让最终成像变模糊 |
| | |
| | | cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除 |
| | | preloadWhenHidden: true, |
| | | preferLeaves: true, |
| | | maximumMemoryUsage: 64, // 内存分配变小有利于倾斜摄影数据回收,提升性能体验 |
| | | progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊 |
| | | maximumMemoryUsage: 1024, // 内存分配变小有利于倾斜摄影数据回收,提升性能体验 |
| | | progressiveResolutionHeightFraction: 0.3, // 数值偏于0能够让初始加载变得模糊 |
| | | dynamicScreenSpaceErrorDensity: 0.5, // 数值加大,能让周边加载变快 |
| | | dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没,反正放着吧先 |
| | | dynamicScreenSpaceError: true, // 根据测试,有了这个后,会在真正的全屏加载完之后才清晰化房屋 |
| | |
| | | return |
| | | } |
| | | |
| | | if (mapStore.startCustomWx && item.customWx) { |
| | | EventBus.emit('wxEntityClick', e) |
| | | return |
| | | } |
| | | |
| | | incident(e) |
| | | }) |
| | | |
| | |
| | | addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName) |
| | | window.$viewer.addLayer(addTileLayers[item.layerName]) |
| | | |
| | | console.log(item.source.geometries, 906666) |
| | | |
| | | item.source.geometries.forEach(i => { |
| | | item.source.features.forEach(i => { |
| | | let wall = new DC.Wall( |
| | | i.coordinates[0].map(d => [d[0], d[1], 125].join(',')).join(';') |
| | | i.geometry.coordinates[0].map(d => [...d, 125].join(',')).join(';') |
| | | ) |
| | | |
| | | wall.setStyle({ |
| | |
| | | } |
| | | return positions |
| | | } |
| | | console.log(item.source.geometries, 465465) |
| | | item.source.geometries.forEach(i => { |
| | | |
| | | item.source.features.forEach(i => { |
| | | let polylineVolume = new DC.PolylineVolume( |
| | | i.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'), |
| | | i.geometry.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'), |
| | | computeCircle(1.6) |
| | | ) |
| | | |
| | | if ('properties' in i && i.properties?.RefName.indexOf('拟建') != -1) { |
| | | if ('RefName' in i.properties && i.properties.RefName.indexOf('拟建') != -1) { |
| | | polylineVolume.setStyle({ |
| | | material: DC.Color.fromBytes(255, 0, 0, 230) |
| | | }) |
| | |
| | | if (!addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName) |
| | | window.$viewer.addLayer(addTileLayers[item.layerName]) |
| | | item.method(item.params).then(res => { |
| | | let data = res.data.data.records |
| | | data.forEach(i => { |
| | | let stl = '' |
| | | try { |
| | | let geom = JSON.parse(i.geom) |
| | | if (geom && geom.coordinates && geom.coordinates[0]) { |
| | | stl = geom.coordinates[0][0].map(d => d[0] + ',' + d[1]).join(';') |
| | | } else { |
| | | console.error('Invalid geom structure') |
| | | } |
| | | } catch (error) { |
| | | console.error('Failed to parse geom:', error) |
| | | } |
| | | let polygon = new DC.Polygon(stl) |
| | | polygon.setStyle({ |
| | | width: 2, |
| | | material: DC.Color.BLUE, |
| | | clampToGround: true |
| | | }) |
| | | addTileLayers[item.layerName].addOverlay(polygon) |
| | | |
| | | item.source.features.forEach(i => { |
| | | let Polyline = new DC.Polyline(i.geometry.coordinates.map(d => [...d, item.height].join(',')).join(';')) |
| | | |
| | | Polyline.setStyle({ |
| | | width: 3, |
| | | material: DC.Color.BLUE, |
| | | clampToGround: true |
| | | }) |
| | | addTileLayers[item.layerName].addOverlay(Polyline) |
| | | }) |
| | | } else { |
| | | addTileLayers[item.layerName].show = true |
| | | } |
| | | } else if (item.subType == 'baseMap') { |
| | | if (addTileLayers[item.layerName]) { |
| | | addTileLayers[item.layerName].show = true |
| | | return |
| | | } |
| | | |
| | | addTileLayers[item.layerName] = window.$viewer?.imageryLayers.addImageryProvider(item.source) |
| | | } |
| | | } else { |
| | | if (addTileLayers[item.layerName]) { |
| | | if (item.subType == '3Dtile') { |
| | | addTileLayers[item.layerName].forEach(m => m.show = false) |
| | | } else if (item.subType == 'baseMap') { |
| | | addTileLayers[item.layerName].show = false |
| | | } else { |
| | | addTileLayers[item.layerName].clear() |
| | | window.$viewer && window.$viewer.removeLayer(addTileLayers[item.layerName]) |
| | |
| | | // 飞到园区范围 |
| | | const flyToyqfw = () => { |
| | | window.$viewer.zoomToPosition(new DC.Position( |
| | | 116.2819, |
| | | 27.9400, |
| | | 8000, |
| | | 115.6080, |
| | | 29.7880, |
| | | 3000, |
| | | 0, |
| | | -45, |
| | | 0 |
| | |
| | | |
| | | EventBus.emit('restHandleDelChange', `4-1`) |
| | | EventBus.emit('restHandleDelChange', `4-2`) |
| | | EventBus.emit('restHandleDelChange', `4-3`) |
| | | EventBus.emit('restHandleDelChange', `4-9`) |
| | | |
| | | EventBus.emit('restHandleDelChange', `8`) |
| | | destroyPop() |
| | | } |
| | | |
| | |
| | | onUnmounted(() => { |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | if (i == 'hgyq') { |
| | | if (i == 'hgyq' || i == 'hgyqT') { |
| | | addTileLayers[i].forEach(t => { |
| | | tileLayers.removeOverlay(t) |
| | | t = null |
| | | }) |
| | | } else if (i == 'baseMap') { |
| | | window.$viewer?.imageryLayers.remove(addTileLayers[i]) |
| | | } else { |
| | | addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i]) |
| | | } |