diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index be2dec3..c128da3 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -110,7 +110,7 @@ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] - ).filter(i => layerIds.includes(i.layer.id))[0]; + ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0]; if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties); setHighlight(feature); }); diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index be2dec3..c128da3 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -110,7 +110,7 @@ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] - ).filter(i => layerIds.includes(i.layer.id))[0]; + ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0]; if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties); setHighlight(feature); }); diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js index f3a1a6c..fe5e16b 100644 --- a/src/views/sponeScreen/gisMF/cesiumMapLegend.js +++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js @@ -45,9 +45,7 @@ let HLBZDataList = resRainwater.data.filter(data => data.pumpType == 'confluence'); //合流泵站 let rainDataList = rainStation.data; //雨量站 let riverDataList = stationDataList.data.filter(data => data.siteType == 'water_level'); //河道监测 - rainDataList.forEach(item => { - item.stName = item.stName + '/' + item.pn05 + 'mm'; - }); + YSBZ = this.getGeojsonData(YSBZDataList); WSBZ = this.getGeojsonData(WSBZDataList); HLBZ = this.getGeojsonData(HLBZDataList); @@ -425,8 +423,8 @@ layername: 'rainStation', url: 'rainStation_icon.png', //图层+json √ mapUrl: 'yuanTou.png', - type: 'point', - data: rainStationData, + type: 'rainStation', + rainData: rainStationData, dataArea: rainStationArea, }, { diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index be2dec3..c128da3 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -110,7 +110,7 @@ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] - ).filter(i => layerIds.includes(i.layer.id))[0]; + ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0]; if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties); setHighlight(feature); }); diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js index f3a1a6c..fe5e16b 100644 --- a/src/views/sponeScreen/gisMF/cesiumMapLegend.js +++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js @@ -45,9 +45,7 @@ let HLBZDataList = resRainwater.data.filter(data => data.pumpType == 'confluence'); //合流泵站 let rainDataList = rainStation.data; //雨量站 let riverDataList = stationDataList.data.filter(data => data.siteType == 'water_level'); //河道监测 - rainDataList.forEach(item => { - item.stName = item.stName + '/' + item.pn05 + 'mm'; - }); + YSBZ = this.getGeojsonData(YSBZDataList); WSBZ = this.getGeojsonData(WSBZDataList); HLBZ = this.getGeojsonData(HLBZDataList); @@ -425,8 +423,8 @@ layername: 'rainStation', url: 'rainStation_icon.png', //图层+json √ mapUrl: 'yuanTou.png', - type: 'point', - data: rainStationData, + type: 'rainStation', + rainData: rainStationData, dataArea: rainStationArea, }, { diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue index 270a334..43b9b7e 100644 --- a/src/views/sponeScreen/gisMF/cesiumPopup.vue +++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue @@ -334,7 +334,17 @@ console.log('popup接收地图标注点值---', params); allData.dataList = params.popupInfo; let pipePopupDiv = document.getElementById('cesiumPopupID'); - let popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates; + + let popupCenter, center, offsets; + if (allData.dataList.geometry) { + popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates; + center = [popupCenter[0], popupCenter[1] + 0.005]; + offsets = [-130, 200]; + } else { + popupCenter = allData.dataList.lonLat.split(',').map(Number); + center = [popupCenter[0] - 0.002, popupCenter[1] + 0.005]; + } + window.window.pipePopup = new mapboxL7.Popup({ html: pipePopupDiv, lngLat: { @@ -347,8 +357,8 @@ }); newfiberMapbox.addPopup(pipePopup); newfiberMapbox.map.easeTo({ - center: [popupCenter[0], popupCenter[1] + 0.005], - zoom: 16, + center: center, + zoom: 15, }); allData.popupShow = true; if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图 @@ -371,7 +381,6 @@ display: none; } .cesiumPopup { - position: absolute; padding: 10px; background: #003b6d; border: 1px solid #6acefe; diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index be2dec3..c128da3 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -110,7 +110,7 @@ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] - ).filter(i => layerIds.includes(i.layer.id))[0]; + ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0]; if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties); setHighlight(feature); }); diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js index f3a1a6c..fe5e16b 100644 --- a/src/views/sponeScreen/gisMF/cesiumMapLegend.js +++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js @@ -45,9 +45,7 @@ let HLBZDataList = resRainwater.data.filter(data => data.pumpType == 'confluence'); //合流泵站 let rainDataList = rainStation.data; //雨量站 let riverDataList = stationDataList.data.filter(data => data.siteType == 'water_level'); //河道监测 - rainDataList.forEach(item => { - item.stName = item.stName + '/' + item.pn05 + 'mm'; - }); + YSBZ = this.getGeojsonData(YSBZDataList); WSBZ = this.getGeojsonData(WSBZDataList); HLBZ = this.getGeojsonData(HLBZDataList); @@ -425,8 +423,8 @@ layername: 'rainStation', url: 'rainStation_icon.png', //图层+json √ mapUrl: 'yuanTou.png', - type: 'point', - data: rainStationData, + type: 'rainStation', + rainData: rainStationData, dataArea: rainStationArea, }, { diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue index 270a334..43b9b7e 100644 --- a/src/views/sponeScreen/gisMF/cesiumPopup.vue +++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue @@ -334,7 +334,17 @@ console.log('popup接收地图标注点值---', params); allData.dataList = params.popupInfo; let pipePopupDiv = document.getElementById('cesiumPopupID'); - let popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates; + + let popupCenter, center, offsets; + if (allData.dataList.geometry) { + popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates; + center = [popupCenter[0], popupCenter[1] + 0.005]; + offsets = [-130, 200]; + } else { + popupCenter = allData.dataList.lonLat.split(',').map(Number); + center = [popupCenter[0] - 0.002, popupCenter[1] + 0.005]; + } + window.window.pipePopup = new mapboxL7.Popup({ html: pipePopupDiv, lngLat: { @@ -347,8 +357,8 @@ }); newfiberMapbox.addPopup(pipePopup); newfiberMapbox.map.easeTo({ - center: [popupCenter[0], popupCenter[1] + 0.005], - zoom: 16, + center: center, + zoom: 15, }); allData.popupShow = true; if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图 @@ -371,7 +381,6 @@ display: none; } .cesiumPopup { - position: absolute; padding: 10px; background: #003b6d; border: 1px solid #6acefe; diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue index 6331afa..92764bb 100644 --- a/src/views/sponeScreen/gisMF/legendKF.vue +++ b/src/views/sponeScreen/gisMF/legendKF.vue @@ -44,6 +44,8 @@ import newfiberVectorLayer from './newfiberVectorLayer.js'; import bus from '@/bus/index'; import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js'; +import { nextTick } from 'vue'; +import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png'; const { proxy } = getCurrentInstance(); const legendList = ref([]); @@ -203,6 +205,28 @@ newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_label']); } } + if (item.layername == 'rainStation') { + if (item.isCheck) { + newfiberMapBoxVectorLayer.addGeojsonPolygon(item.layername + '_area', item.dataArea); + item.rainData.features.forEach(feature => { + feature.properties.name = feature.properties.stName + '/' + feature.properties.pn05 + 'mm'; + }); + newfiberMapBoxVectorLayer.addGeojsonSymbol(item.layername, item.rainData, rainStation_icon); + setTimeout(() => { + newfiberMapbox.map.moveLayer(item.layername + '_area', item.layername); + }, 1000); + + rainDataTimer.value = setInterval(() => { + item.rainData.features.forEach(feature => { + feature.properties.name = feature.properties.stName + '/' + feature.properties.pn05 + 'mm'; + }); + newfiberMapbox.map.getSource(item.layername).setData(item.rainData); + }, 300000); + } else { + newfiberMapBoxVectorLayer.removeByIds([item.layername + '_area']); + clearInterval(rainDataTimer.value); + } + } // if (item.layername == 'weather_cloud') { // return newfiberMap.setLayersVisible([item.layername], item.isCheck); diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index be2dec3..c128da3 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -110,7 +110,7 @@ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] - ).filter(i => layerIds.includes(i.layer.id))[0]; + ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0]; if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties); setHighlight(feature); }); diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js index f3a1a6c..fe5e16b 100644 --- a/src/views/sponeScreen/gisMF/cesiumMapLegend.js +++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js @@ -45,9 +45,7 @@ let HLBZDataList = resRainwater.data.filter(data => data.pumpType == 'confluence'); //合流泵站 let rainDataList = rainStation.data; //雨量站 let riverDataList = stationDataList.data.filter(data => data.siteType == 'water_level'); //河道监测 - rainDataList.forEach(item => { - item.stName = item.stName + '/' + item.pn05 + 'mm'; - }); + YSBZ = this.getGeojsonData(YSBZDataList); WSBZ = this.getGeojsonData(WSBZDataList); HLBZ = this.getGeojsonData(HLBZDataList); @@ -425,8 +423,8 @@ layername: 'rainStation', url: 'rainStation_icon.png', //图层+json √ mapUrl: 'yuanTou.png', - type: 'point', - data: rainStationData, + type: 'rainStation', + rainData: rainStationData, dataArea: rainStationArea, }, { diff --git a/src/views/sponeScreen/gisMF/cesiumPopup.vue b/src/views/sponeScreen/gisMF/cesiumPopup.vue index 270a334..43b9b7e 100644 --- a/src/views/sponeScreen/gisMF/cesiumPopup.vue +++ b/src/views/sponeScreen/gisMF/cesiumPopup.vue @@ -334,7 +334,17 @@ console.log('popup接收地图标注点值---', params); allData.dataList = params.popupInfo; let pipePopupDiv = document.getElementById('cesiumPopupID'); - let popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates; + + let popupCenter, center, offsets; + if (allData.dataList.geometry) { + popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates; + center = [popupCenter[0], popupCenter[1] + 0.005]; + offsets = [-130, 200]; + } else { + popupCenter = allData.dataList.lonLat.split(',').map(Number); + center = [popupCenter[0] - 0.002, popupCenter[1] + 0.005]; + } + window.window.pipePopup = new mapboxL7.Popup({ html: pipePopupDiv, lngLat: { @@ -347,8 +357,8 @@ }); newfiberMapbox.addPopup(pipePopup); newfiberMapbox.map.easeTo({ - center: [popupCenter[0], popupCenter[1] + 0.005], - zoom: 16, + center: center, + zoom: 15, }); allData.popupShow = true; if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图 @@ -371,7 +381,6 @@ display: none; } .cesiumPopup { - position: absolute; padding: 10px; background: #003b6d; border: 1px solid #6acefe; diff --git a/src/views/sponeScreen/gisMF/legendKF.vue b/src/views/sponeScreen/gisMF/legendKF.vue index 6331afa..92764bb 100644 --- a/src/views/sponeScreen/gisMF/legendKF.vue +++ b/src/views/sponeScreen/gisMF/legendKF.vue @@ -44,6 +44,8 @@ import newfiberVectorLayer from './newfiberVectorLayer.js'; import bus from '@/bus/index'; import { realtimeRainfallStatistics } from '@/api/floodSys/oneMap.js'; +import { nextTick } from 'vue'; +import rainStation_icon from '@/assets/cesiumMap/legendIcon/rainStation_icon.png'; const { proxy } = getCurrentInstance(); const legendList = ref([]); @@ -203,6 +205,28 @@ newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_label']); } } + if (item.layername == 'rainStation') { + if (item.isCheck) { + newfiberMapBoxVectorLayer.addGeojsonPolygon(item.layername + '_area', item.dataArea); + item.rainData.features.forEach(feature => { + feature.properties.name = feature.properties.stName + '/' + feature.properties.pn05 + 'mm'; + }); + newfiberMapBoxVectorLayer.addGeojsonSymbol(item.layername, item.rainData, rainStation_icon); + setTimeout(() => { + newfiberMapbox.map.moveLayer(item.layername + '_area', item.layername); + }, 1000); + + rainDataTimer.value = setInterval(() => { + item.rainData.features.forEach(feature => { + feature.properties.name = feature.properties.stName + '/' + feature.properties.pn05 + 'mm'; + }); + newfiberMapbox.map.getSource(item.layername).setData(item.rainData); + }, 300000); + } else { + newfiberMapBoxVectorLayer.removeByIds([item.layername + '_area']); + clearInterval(rainDataTimer.value); + } + } // if (item.layername == 'weather_cloud') { // return newfiberMap.setLayersVisible([item.layername], item.isCheck); diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js index 082a9ab..2ea860b 100644 --- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js +++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js @@ -1,4 +1,45 @@ export default class newfiberMapBoxVectorLayer { + //添加geojson Symbol + static addGeojsonSymbol(layerId, geojson, icon) { + if (!newfiberMapbox.map.getLayer(layerId)) { + newfiberMapbox.map.loadImage(icon, (error, image) => { + if (error) throw error; + + // Add the image to the map style. + newfiberMapbox.map.addImage(layerId, image); + + // Add a data source containing one point feature. + newfiberMapbox.map.addSource(layerId, { + type: 'geojson', + data: geojson, + }); + newfiberMapbox.map.addLayer({ + id: layerId, + type: 'symbol', + source: layerId, + paint: { + 'text-color': 'rgba(255, 255, 255, 1)', + 'text-halo-color': 'rgba(14, 139, 90, 1)', + 'text-halo-width': 2, + }, + layout: { + 'icon-image': layerId, + 'text-allow-overlap': true, + 'icon-allow-overlap': true, + 'icon-anchor': 'center', + 'icon-size': 0.8, + 'text-field': '{name}', + 'text-font': ['KlokanTech Noto Sans Regular'], + 'text-size': 16, + 'text-line-height': 3, + 'text-anchor': 'bottom', + 'text-max-width': 50, + 'text-offset': [0, 3], + }, + }); + }); + } + } //添加geojson线 static addGeojsonLine(layerId, geojson, lineWidth, lineOpacity, lineBlur) { if (!newfiberMapbox.map.getLayer(layerId)) { @@ -19,6 +60,24 @@ }); } } + //添加geojson面 + static addGeojsonPolygon(layerId, geojson) { + if (!newfiberMapbox.map.getLayer(layerId)) { + newfiberMapbox.map.addSource(layerId, { + type: 'geojson', + data: geojson, + }); + + newfiberMapbox.map.addLayer({ + id: layerId, + type: 'fill', + source: layerId, + paint: { + 'fill-color': ['get', 'fillcolor'] || 'rgba(154,104,171,0.8)', + }, + }); + } + } //添加有标注的geojson面 static addGeojsonPolygonWithLabel(layerId, geojson) { let labelGeojson = this.getGeojsonCenterPoint(geojson);