<template> <!-- 地图 --> <div class="position-r" id="map"> <newFiberMapBox :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`"></newFiberMapBox> <!-- 搜索框 --> <div class="searchBoxA"> <van-field placeholder="请选择站点名称" show-word-limit @click="AllData.showYearStation = true" v-model="AllData.userId" readonly class="searchInputA" is-link /> <!-- 请选择站点名称 --> <van-popup v-model:show="AllData.showYearStation" round position="bottom"> <van-picker :columns="stationList" @confirm="onConfirmTne" @cancel="AllData.showYearStation = false"> </van-picker> </van-popup> </div> </div> </template> <script setup name="informationManagement"> import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue'; import { getImgPatrol } from '@/utils/common.js'; import { artificialSiteSearch } from '@/api/informationManagement.js'; import { oneMapFacilityPumpList, haiMianfacilitySewagePage, waterloggingPointList, queryProjectStation, getStationList, realtimeRainfallStatistics, } from '@/api/informationManagement.js'; import bus from '@/utils/utils'; // import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png'; // import sewageBenZhan_icon from '@/assets/cesiumMap/legendIcon/sewageBenZhan_icon.png'; // import rainBengZhan_icon from '@/assets/cesiumMap/legendIcon/rainBengZhan_icon.png'; // import combineBengZhan_icon from '@/assets/cesiumMap/legendIcon/combineBengZhan_icon.png'; // import waterCourse_icon from '@/assets/cesiumMap/legendIcon/combineBengZhan_icon.png'; // import sewageFactory_icon from '@/assets/cesiumMap/legendIcon/sewageFactory_icon.png'; // import pipeMonitor_icon from '@/assets/cesiumMap/legendIcon/pipeMonitor_icon.png'; const AllData = reactive({ searchV: '', userId: '', showYearStation: false, formData: { stationCode: '', }, lengend: [ { isCheck: true, name: '雨水泵站', layername: 'YSBZ', data: {}, }, { isCheck: true, name: '污水泵站', //图层+json √ layername: 'WSBZ', data: {}, }, { isCheck: true, name: '合流泵站', //图层+json √ layername: 'combineBengZhan', data: {}, }, { isCheck: true, name: '污水处理厂', layername: 'sewageFactory', //图层+json √ data: {}, }, { isCheck: true, name: '内涝积水点', layername: 'waterLoging', //图层+json √ data: {}, }, { isCheck: true, name: '河道断面', layername: 'waterCourse', data: {}, }, { isCheck: true, name: '雨量站', layername: 'rainStation', data: {}, }, { isCheck: true, name: '源头地块', layername: 'origine', //图层+json √ data: {}, }, { isCheck: true, name: '海绵设施', layername: 'spongeFacility', data: {}, }, { isCheck: true, name: '管网监测', layername: 'pipeMonitor', data: {}, }, // { // isCheck: true, // name: '供水厂', // data: {}, // }, ], }); //获取各类型站点 const getStationData = async () => { let resRainwater = await oneMapFacilityPumpList(); if (resRainwater && resRainwater.code == 200) { let YSBZDataList = resRainwater.data.filter((data) => data.pumpType == 'rain_water'); //雨水泵站 let WSBZDataList = resRainwater.data.filter((data) => data.pumpType == 'sewage_water'); //污水泵站 let HLBZDataList = resRainwater.data.filter((data) => data.pumpType == 'confluence'); //合流泵站 AllData.lengend[0].data = getGeojsonData(YSBZDataList); AllData.lengend[1].data = getGeojsonData(WSBZDataList); AllData.lengend[2].data = getGeojsonData(HLBZDataList); } let resWSCLC = await haiMianfacilitySewagePage(); if (resWSCLC && resWSCLC.code == 200) { let WSCLCDataList = resWSCLC.data; AllData.lengend[3].data = getGeojsonData(WSCLCDataList); //污水处理厂 } let rainStation = await realtimeRainfallStatistics({ monitorTargetType: 'rainfall', orderBy: 'tt desc' }); if (rainStation && rainStation.code == 200) { let rainDataList = rainStation.data; //雨量站 AllData.lengend[6].data = getGeojsonData(rainDataList); } let stationDataList = await getStationList(); if (stationDataList && stationDataList.code == 200) { let riverDataList = stationDataList.data.filter((data) => data.siteType == 'water_level'); //河道监测 AllData.lengend[5].data = getGeojsonData(riverDataList); } //let waterFactoryDatalist = results[4]; //AllData.lengend[10].data = getGeojsonData(waterFactoryDatalist.data); //水厂 let waterLogingRes = await waterloggingPointList(); if (waterLogingRes && waterLogingRes.code == 200) { AllData.lengend[4].data = getGeojsonData(waterLogingRes.data); //内涝点 } let params = {}; let projectStationRes = await queryProjectStation(params); if (projectStationRes && projectStationRes.code == 200) { AllData.lengend[8].data = getGeojsonData(projectStationRes.data); //海绵设施 } // 管网监测点 测试用 AllData.lengend[9].data = getGeojsonData([ { projectNo: 'JZGW02', projectName: '汴京路管网监测点', stCode: '2109600028', stName: '汴京路管网监测点', lonlat: '114.3141225,34.79221', }, ]); console.log(AllData.lengend); bus.emit('setLegendData', AllData.lengend); AllData.lengend.forEach((item) => { bus.emit('setLayerVisible', item); }); }; //构建geojson格式 const getGeojsonData = (dataList) => { let features = []; let feature = {}; dataList.forEach((data) => { if (data.lonLat) { let lonlat = data.lonLat.split(','); feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [Number(lonlat[0]), Number(lonlat[1])], }, properties: data, }; } else if (data.lonlat) { let lonlat = data.lonlat.split(','); feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [Number(lonlat[0]), Number(lonlat[1])], }, properties: data, }; } else if (data.lon && data.lat) { feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [Number(data.lon), Number(data.lat)], }, properties: data, }; } else if (data.originalX && data.originalY) { feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [Number(data.originalX), Number(data.originalY)], }, properties: data, }; } else if (data.longitude && data.latitude) { feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [Number(data.longitude), Number(data.latitude)], }, properties: data, }; } features.push(feature); }); return { type: 'FeatureCollection', features: features, }; }; //获取所有站点 const stationList = ref([]); const getAllStationInfo = async () => { let res = await artificialSiteSearch(); if (res && res.code == 200) { res.data.map((v) => { stationList.value.push({ value: v.id, text: v.siteName, lonlat: v.lonlat, }); }); console.log(stationList.value, ' stationList.value'); } }; // 请选择站点名称 const onConfirmTne = ({ selectedOptions }) => { console.log('下拉框查询点击事件', selectedOptions); AllData.showYearStation = false; AllData.userId = selectedOptions[0].text; AllData.formData.stationCode = selectedOptions[0].value; if (selectedOptions[0].lonlat) { let lonlat = selectedOptions[0].lonlat.split(',').map(Number); newfiberMap.map.easeTo({ center: lonlat, zoom: 15, }); } }; onMounted(() => { getAllStationInfo(); let initeMapTimer = setInterval(() => { if (!newfiberMap) return; if (!newfiberMap.map.getLayer('point')) return; getStationData(); newfiberMap.map.on('click', 'point', (e) => { const feature = ( newfiberMap.map.queryRenderedFeatures([ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] ).filter((i) => i.layer.id)[0]; console.log('feature---', feature.properties); //少爷这里加弹窗 }); clearInterval(initeMapTimer); }, 100); }); </script> <style lang="less" scoped> .position-r { position: relative; width: 100%; height: 100%; // background: #c6c6c6; .searchBoxA { width: 100%; height: 80px; // background: red; position: absolute; z-index: 99; .searchInputA { width: 100%; box-sizing: border-box; padding: 13px 36px 0 20px; height: 73px; background: #f3f3f3b3; } .SearchIconA { width: 45px; height: 45px; position: absolute; right: 50px; top: 15px; } } } </style>