| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-10-31 10:47:29 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-12-02 19:46:13 |
| | | * @LastEditTime: 2024-12-02 22:04:17 |
| | | * @FilePath: \bigScreen\src\pages\map\components\scomponents\layersControl.vue |
| | | * @Description: |
| | | * |
| | |
| | | import EventBus from 'utils/bus' |
| | | import { usePointStore } from 'store/usepoint' |
| | | const pointStore = usePointStore() |
| | | import { useRouter } from 'vue-router' |
| | | const router = useRouter() |
| | | |
| | | const { VITE_APP_BASE } = import.meta.env |
| | | // , '7', |
| | |
| | | const { attrParams } = e.overlay |
| | | // 删除 |
| | | destroy() |
| | | if (!attrParams.imageUrl) { |
| | | return |
| | | } |
| | | // if (!attrParams.imageUrl) { |
| | | // return |
| | | // } |
| | | addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name) |
| | | window.$viewer.addLayer(addPupoLayers[attrParams.name]) |
| | | let iconEl = `<div class="marsBlueGradientPnl"> |
| | | <div>${attrParams.fullName}</div> |
| | | <img src="${attrParams.imageUrl}" /> |
| | | </div>` |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64), |
| | |
| | | children: [ |
| | | // 给水管网、污水管网、燃气管网、雨水管网 |
| | | { |
| | | id: '3-3-1', |
| | | label: '给水管网', |
| | | type: 'layer', |
| | | subType: 'geojsonPipe', |
| | | layerName: 'gsgw', |
| | | source: gsgw, |
| | | color: DC.Color.BLUE.withAlpha(0.9), |
| | | height: 65, |
| | | }, |
| | | { |
| | | id: '3-3-2', |
| | | label: '污水管网', |
| | | type: 'layer', |
| | |
| | | layerName: 'wsgw', |
| | | source: wsgw, |
| | | color: DC.Color.DARKBLUE.withAlpha(0.9), |
| | | height: 68, |
| | | }, |
| | | { |
| | | id: '3-3-3', |
| | | label: '燃气管网', |
| | | type: 'layer', |
| | | subType: 'geojsonPipe', |
| | | layerName: 'rqgw', |
| | | source: rqgw, |
| | | color: DC.Color.RED.withAlpha(0.9), |
| | | height: 71, |
| | | height: 60.2, |
| | | }, |
| | | { |
| | | id: '3-3-4', |
| | |
| | | layerName: 'ysgw', |
| | | source: ysgw, |
| | | color: DC.Color.CYAN.withAlpha(0.9), |
| | | height: 75, |
| | | height: 60, |
| | | }, |
| | | { |
| | | id: '3-3-1', |
| | | label: '给水管网', |
| | | type: 'layer', |
| | | subType: 'geojsonPipe', |
| | | layerName: 'gsgw', |
| | | source: gsgw, |
| | | color: DC.Color.BLUE.withAlpha(0.9), |
| | | height: 60.4, |
| | | }, |
| | | { |
| | | id: '3-3-3', |
| | | label: '燃气管网', |
| | | type: 'layer', |
| | | subType: 'geojsonPipe', |
| | | layerName: 'rqgw', |
| | | source: rqgw, |
| | | color: DC.Color.RED.withAlpha(0.9), |
| | | height: 60.6, |
| | | }, |
| | | ] |
| | | }, |
| | |
| | | showPanel: false, |
| | | layerName: 'gouqu' |
| | | }, |
| | | { |
| | | id: '3-9', |
| | | label: '废水处理站', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getList, |
| | | params: { |
| | | type: 9, |
| | | size: 1000 |
| | | // name: '吉水县绿源污水处理厂', |
| | | }, |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsclc.png', |
| | | className: 'xfs-box', |
| | | showPanel: false, |
| | | layerName: 'fsclz' |
| | | }, |
| | | // { |
| | | // id: '3-9', |
| | | // label: '废水处理站', |
| | | // type: 'layer', |
| | | // subType: 'labelPoint', |
| | | // method: getList, |
| | | // params: { |
| | | // type: 9, |
| | | // size: 1000 |
| | | // // name: '吉水县绿源污水处理厂', |
| | | // }, |
| | | // backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsclc.png', |
| | | // className: 'xfs-box', |
| | | // showPanel: false, |
| | | // layerName: 'fsclz' |
| | | // }, |
| | | { |
| | | id: '3-10', |
| | | label: '排水口', |
| | |
| | | showPanel: false, |
| | | layerName: 'psk' |
| | | }, |
| | | { |
| | | id: '3-11', |
| | | label: '污水池', |
| | | type: 'layer', |
| | | subType: 'labelPoint', |
| | | method: getList, |
| | | params: { |
| | | type: 11, |
| | | size: 1000 |
| | | }, |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsc.png', |
| | | className: 'xfs-box', |
| | | showPanel: false, |
| | | layerName: 'wsc' |
| | | } |
| | | // { |
| | | // id: '3-11', |
| | | // label: '污水池', |
| | | // type: 'layer', |
| | | // subType: 'labelPoint', |
| | | // method: getList, |
| | | // params: { |
| | | // type: 11, |
| | | // size: 1000 |
| | | // }, |
| | | // backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsc.png', |
| | | // className: 'xfs-box', |
| | | // showPanel: false, |
| | | // layerName: 'wsc' |
| | | // } |
| | | ] |
| | | }, |
| | | |
| | |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-ordinary', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-yb.png', |
| | | showPanel: false, |
| | | layerName: 'fxyOrdinary', |
| | | incident: (e) => { |
| | |
| | | }, |
| | | showParams: 'category', |
| | | className: 'fxy-larger', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy.png', |
| | | backgroundIcon: VITE_APP_BASE + 'img/mapicon/fxy-jd.png', |
| | | showPanel: false, |
| | | layerName: 'fxyLarger', |
| | | incident: (e) => { |
| | |
| | | // }) |
| | | addTileLayers[item.layerName] = [] |
| | | item.urlData.forEach((m, ind) => { |
| | | let tile = new DC.Tileset(m.url, { |
| | | addTileLayers[item.layerName][ind] = new DC.Tileset(m.url, { |
| | | maximumMemoryUsage: 1024, |
| | | maximumScreenSpaceError: 8, |
| | | skipLevels: 5, |
| | |
| | | progressiveResolutionHeightFraction: 0.5, |
| | | baseScreenSpaceError: 1024 |
| | | }) |
| | | tile.setSplitDirection(1) |
| | | addTileLayers[item.layerName][ind].setSplitDirection(1) |
| | | // tile.setHeight(-420) |
| | | // tile.setSplitDirection(-1) |
| | | window.$viewer.sceneSplit.addTileset(tile) |
| | | tileLayers.addOverlay(tile) |
| | | window.$viewer.sceneSplit.addTileset(addTileLayers[item.layerName][ind]) |
| | | tileLayers.addOverlay(addTileLayers[item.layerName][ind]) |
| | | window.$viewer.sceneSplit.enable = false |
| | | addTileLayers[item.layerName][ind] = tile |
| | | }) |
| | | } else { |
| | | addTileLayers[item.layerName].forEach(m => m.show = true) |
| | |
| | | item.source.features.forEach(i => { |
| | | let polylineVolume = new DC.PolylineVolume( |
| | | i.geometry.coordinates.map(d => [d[0], d[1], item.height].join(',')).join(';'), |
| | | computeCircle(2) |
| | | computeCircle(1.6) |
| | | ) |
| | | |
| | | polylineVolume.setStyle({ |
| | |
| | | // watch(sharedData, (newValue) => { |
| | | // }); |
| | | |
| | | // 关闭所有选中的,除了倾斜,园区分布,空中全景 |
| | | const closeAll = () => { |
| | | EventBus.emit('restHandleDelChange', `2`) |
| | | EventBus.emit('restHandleDelChange', `3`) |
| | | EventBus.emit('restHandleDelChange', `3-1`) |
| | | EventBus.emit('restHandleDelChange', `3-2`) |
| | | EventBus.emit('restHandleDelChange', `3-3`) |
| | | EventBus.emit('restHandleDelChange', `3-3-1`) |
| | | EventBus.emit('restHandleDelChange', `3-3-2`) |
| | | EventBus.emit('restHandleDelChange', `3-3-3`) |
| | | EventBus.emit('restHandleDelChange', `3-3-4`) |
| | | EventBus.emit('restHandleDelChange', `3-4`) |
| | | EventBus.emit('restHandleDelChange', `3-5`) |
| | | EventBus.emit('restHandleDelChange', `3-6`) |
| | | EventBus.emit('restHandleDelChange', `3-7`) |
| | | EventBus.emit('restHandleDelChange', `3-8`) |
| | | EventBus.emit('restHandleDelChange', `3-9`) |
| | | EventBus.emit('restHandleDelChange', `4`) |
| | | EventBus.emit('restHandleDelChange', `4-1`) |
| | | EventBus.emit('restHandleDelChange', `4-2`) |
| | | EventBus.emit('restHandleDelChange', `8`) |
| | | destroy() |
| | | } |
| | | |
| | | // const sharedData = computed(() => pointStore.sharedData); |
| | | // watch(sharedData, (newValue) => { |
| | | // }); |
| | | // 监听当前路由路径的变化 |
| | | watch(() => router.currentRoute.value.path, |
| | | (newPath, oldPath) => { |
| | | console.log(`Current path changed from ${oldPath} to ${newPath}`) |
| | | closeAll() |
| | | }, |
| | | { immediate: true } |
| | | ) |
| | | |
| | | // 销毁 |
| | | function destroy () { |
| | | let arr = Object.keys(addPupoLayers) |
| | |
| | | } |
| | | |
| | | onUnmounted(() => { |
| | | if (tileLayers) { |
| | | tileLayers.clear() |
| | | window.$viewer && window.$viewer.removeLayer(tileLayers) |
| | | tileLayers = null |
| | | } |
| | | |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | if (i == 'hgyq') { |
| | | tileLayers.removeOverlay(addTileLayers[i]) |
| | | addTileLayers[i] = null |
| | | delete addTileLayers[i] |
| | | } else { |
| | |
| | | } |
| | | }) |
| | | addTileLayers = null |
| | | |
| | | if (tileLayers) { |
| | | tileLayers.remove() |
| | | window.$viewer && window.$viewer.removeLayer(tileLayers) |
| | | tileLayers = null |
| | | } |
| | | // 弹窗销毁 |
| | | destroy() |
| | | addPupoLayers = null |