- <template>
- <!-- 水务资产 右侧 -->
- <div class="centerbottmBox">
- <div class="TOP_Title shuziluansheng">
- <div class="flex_sbc p56 pbottom">
- <div class="top-title">数字孪生</div>
- <div class="tabData flex">
- <div
- class="eachClick"
- :class="active == item.value ? 'active' : ''"
- v-for="item in rightTabArr"
- :key="item.value"
- @click="tabClick(item)"
- >
- {{ item.label }}
- </div>
- </div>
- </div>
- </div>
- <div class="luanshengBottom">
- <div
- class="bottomitem"
- :class="bottomactive == item.value ? 'active' : ''"
- @click="bottomClick(item)"
- v-for="item in bottomshowArr"
- :key="item"
- >
- {{ item.label }}
- </div>
- </div>
- </div>
- </template>
- <script setup name="shuziluanshengBox">
- import bus from '@/bus';
- import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
- const { proxy } = getCurrentInstance();
- import { getImageUrl } from '@/utils/ruoyi';
- const rightTabArr = ref([
- {
- label: '三维社区',
- value: '1',
- },
- {
- label: '三维泵站',
- value: '2',
- },
- {
- label: '三维管线',
- value: '3',
- },
- {
- label: '三维场景',
- value: '4',
- },
- ]);
-
- const bottomshowArr = ref();
-
- const shequArr = ref([
- {
- label: '水蓝郡',
- value: '1',
- easeTo: { center: [114.37237559831908, 30.465690931728275],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '锦绣良缘',
- value: '2',
- easeTo: { center: [114.36116641690938, 30.465031212461284],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '赵家池明渠',
- value: '3',
- easeTo: { center: [114.37933973676917, 30.448914882223832], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '三维雨水管道',
- value: '4',
- },
- {
- label: '三维污水管道',
- value: '5',
- },
- ]);
- const bengzhanArr = ref([
- {
- label: '五家湖排江泵站',
- value: '1',
- values: 'rain_water_pump_station_info',
- easeTo: { center: [114.60260472329406, 30.55206252978222],bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '光谷转盘鲁磨路泵站',
- value: '2',
- values: 'rain_water_pump_station_info',
- easeTo: { center: [114.39394626017497, 30.508365555418536], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '谷转盘珞喻路泵站',
- value: '3',
- values: 'rain_water_pump_station_info',
- easeTo: { center: [114.40368321715408, 30.507588862101528], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '光谷一路泵站',
- value: '4',
- values: 'rain_water_pump_station_info',
- easeTo: { center: [114.43310730417937, 30.49480696122025], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- }
- ]);
- const guanxianArr = ref([
- {
- label: '南湖片区三维雨水',
- value: '1',
- values: '南湖汇水区',
- easeTo: { center: [114.39293842299662, 30.482790194236813], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '南湖片区三维污水',
- value: '2',
- values: '龙王嘴污水系',
- easeTo: { center: [114.39293842299662, 30.482790194236813], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17},
- },
- {
- label: '豹澥片区三维雨水',
- value: '3',
- values: '豹澥湖汇水区',
- easeTo: { center: [114.45895478865708, 30.459740968619386], bearing:-23.200000000001182,pitch:58.49999999999992,zoom:17 },
- },
- {
- label: '豹澥片区三维污水',
- value: '4',
- values: '豹澥污水系统',
- easeTo: { center: [114.45895478865708, 30.459740968619386], zoom: 13.25419672401314, pitch: 45.95516160507156 },
- },
- ]);
- const changjingArr = ref([
- /* {
- label: '江南泵站',
- value: 'q1',
- values: '江南泵站',
- url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v1.json',
- easeTo: { center: [114.26285547941757, 30.49905022989863], zoom: 17.5, pitch: 60.137987545556804, bearing: 108.7 },
- },
- {
- label: '汤逊湖泵站',
- value: 'q2',
- values: '汤逊湖泵站',
- url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v2.json',
- easeTo: { center: [114.22880212973843, 30.45179545680257], zoom: 17.5, pitch: 64.69055791957466, bearing: 108.7 },
- },
- {
- label: '白沙洲长江大桥',
- value: 'q3',
- values: '白沙洲长江大桥',
- url: 'https://zhzz.hongshan.gov.cn:8865/VideoProxy/qingxiesheying/v1/tileset_v3.json',
- easeTo: { center: [114.25047535415115, 30.48219212521819], zoom: 17.5, pitch: 76.24070062592385, bearing: 108.7 },
- },
- {
- label: '管网',
- value: '管网',
- values: '管网',
- url: 'http://localhost:9992/WSL12191440/3dtiles/tileset.json',
- easeTo: {"zoom": 16.59407171571377, "center": [114.390913858453,30.4432351724798], "pitch": 64.9999999999998, "bearing": 0},
- },*/
- {
- label: '龙王嘴污水处理厂',
- value: '龙王嘴污水处理厂',
- values: '龙王嘴污水处理厂',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/1fenqu/tileset.json',
- easeTo: {"zoom": 16.59407171571377, "center": [114.3705429075477, 30.492439863093296], "pitch": 64.9999999999998, "bearing": 0},
- },
- {
- label: '洪山高级中学',
- value: '洪山高级中学',
- values: '洪山高级中学',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/2fenqu/tileset.json',
- easeTo: {"zoom": 17.81287927129665, "center": [114.38089058306196, 30.49322975938621], "pitch": 73.1403666953906, "bearing": 29.79517258244755},
- },
- {
- label: '中南民族大学',
- value: '中南民族大学',
- values: '中南民族大学',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/3fenqu/tileset.json',
- easeTo: {"zoom": 17.233580151793813, "center": [114.38786465157301, 30.49109786555684], "pitch": 64.99999999999974, "bearing": -14.399999999999864},
- },
- {
- label: '武汉纺织大学南湖校区',
- value: '武汉纺织大学南湖校区',
- values: '武汉纺织大学南湖校区',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/4fenqu/tileset.json',
- easeTo: {"zoom": 18.116267047007025, "center": [114.3927768535928, 30.48824237671211], "pitch": 71.44305293120455, "bearing": 37.51014089090722},
- },
- {
- label: '中建大公馆',
- value: '中建大公馆',
- values: '中建大公馆',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/5fenqu/tileset.json',
- // url: 'http://localhost:9992/1214/3dtile-x/5fenqu/tileset.json',
- easeTo: {"zoom": 17.251138347641298, "center": [114.4020023147911, 30.484443483567972], "pitch": 66.99999999999989, "bearing": -25.600000000000136},
- },
- {
- label: '保利国际中心',
- value: '保利国际中心',
- values: '保利国际中心',
- // url: 'http://localhost:9992/1214/3dtile-x/6fenqu/tileset.json',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/6fenqu/tileset.json',
- easeTo: {"zoom": 17.687188362054506, "center": [114.40307345195083, 30.493463072026188], "pitch": 71.99999999999976, "bearing": -38.39999999999998},
- },
- {
- label: '北辰光谷里',
- value: '北辰光谷里',
- values: '北辰光谷里',
- // url: 'http://localhost:9992/1214/3dtile-x/7fenqu/tileset.json',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/7fenqu/tileset.json',
- easeTo: {"zoom": 17.06523812182194, "center": [114.41040402249132, 30.484048091956765], "pitch": 59.4999999999999, "bearing": -37.36697917780225},
- },
- {
- label: 'K11Select',
- value: 'K11Select',
- values: 'K11Select',
- // url: 'http://localhost:9992/1214/3dtile-x/8fenqu/tileset.json',
- url: 'https://supermap10.wh-nf.cn:8090/resource/3dtiles/gxq/batch_1/8fenqu/tileset.json',
- easeTo: {"zoom": 16.779971941533105, "center": [114.40929977258014, 30.492555333756428], "pitch": 65.17673025474492, "bearing": 50.399999999999864},
- }
- ]);
- const active = ref(1);
- const bottomactive = ref(1);
-
- const tabClick = item => {
- active.value = item.value;
- switch (item.value) {
- case '1':
- bottomshowArr.value = shequArr.value;
- bottomactive.value = '1';
- break;
- case '2':
- bottomshowArr.value = bengzhanArr.value;
- bottomactive.value = '1';
- break;
- case '3':
- bottomshowArr.value = guanxianArr.value;
- bottomactive.value = '1';
- case '4':
- bottomshowArr.value = changjingArr.value;
- bottomactive.value = '1';
- break;
- }
- };
- const bottomClick = item => {
- bottomactive.value = item.value;
- if (active.value == '4') return operationScene(item);
- [...bengzhanArr.value, ...guanxianArr.value]
- .map(i => (i.values || '').split(','))
- .flat()
- .forEach(key => operationLayer(key, false));
- (item.values || '').split(',').forEach(key => operationLayer(key, true));
- item.easeTo && newfiberMap.map.easeTo(item.easeTo);
- };
-
- const operationScene = item => {
- bus.emit('load3DTiles', { id: item.label, url: item.url });
- item.easeTo && newfiberMap.map.easeTo(item.easeTo);
- };
-
- const events_params = {
- setHighlight: { key: 'setHighlight' },
- setLayerVisible: { key: 'setLayerVisible' },
- };
- const operationLayer = (name, visible) => {
- const { setLayerVisible, setHighlight } = events_params;
- bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
- };
-
- function change3Dtiles(e) {
- // bus.emit('change3Dtiles');
- }
-
- onMounted(() => {
- bottomshowArr.value = shequArr.value;
-
- bus.on('changeThreedimensional', e => {
- console.log('收到来自语音调度的修改', e);
- change3Dtiles(e);
- });
- });
-
- onBeforeUnmount(() => {
- bus.off('changeThreedimensional');
-
- [...bengzhanArr.value, ...guanxianArr.value]
- .map(i => (i.values || '').split(','))
- .flat()
- .forEach(key => operationLayer(key, false));
-
- bus.emit('remove3Dtiles');
- });
- </script>
- <style lang="scss" scoped>
- @import '@/assets/styles/WaterAssets.scss';
-
- .luanshengBottom {
- width: 100%;
- display: -webkit-box;
- overflow: hidden;
- overflow-x: auto;
- padding-top: 15px;
- padding-left: 15px;
-
- .bottomitem {
- cursor: pointer;
- width: 136px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- margin-left: 10px;
- background: linear-gradient(180deg, #0c2156 0%, #2291e1 100%);
- border-radius: 15px;
- border: 1px solid #2291e1;
- // border-image: linear-gradient(0deg, #308fee, #2abffa, #308fee) 10 10;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #e0e5fa;
-
- &.active {
- background: linear-gradient(0deg, #0c3f57 0%, #1dd0c7 100%);
- border-radius: 15px;
- border: 1px solid #27f1c6;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ffffff;
- }
- }
- }
- </style>