<template>
<!-- 海绵综合一张图图例 -->
<div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
<!-- 图例框 -->
<div class="publicLegendHM">
<div class="legendTitle">
<div class="legendName">
图层控制
<img src="@/assets/newImgs/HMScreen/closeIcon.png" alt="" @click="showLegend = false" />
</div>
</div>
<div class="legendContent">
<div v-for="item in legendList" :key="item.layername" style="width: 100%">
<div class="titleB" @click="changeAllLegend(item)">
{{ item.title }}
</div>
<div class="legendItemContent">
<div class="part" v-for="item2 in item.children">
<div class="partItem" v-for="item3 in item2" @click="changeLegend(item3)">
<div class="iconImg">
<el-icon v-if="item3.isCheck" size="15">
<Check />
</el-icon>
</div>
<img :src="getImageUrl(item3.url, 'cesiumMap/legendIcon')" class="img" />
<div class="title">{{ item3.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import axios from 'axios';
import { getImageUrl } from '@/utils/ruoyi';
import cesiumMapCommonLegend from './cesiumMapLegend.js';
import newfiberMapBoxVectorLayer from './mapboxVectorLayer.js';
import changeMapStyle from './changeMapStyle.js';
import topography from '@/assets/newImgs/topography.png';
import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
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';
import { rainRainlist } from '@/api/newPageline/riverCapacity.js';
const { proxy } = getCurrentInstance();
const legendList = ref([]);
const allMapList = ref([]);
const showLegend = ref(false);
const builtCityTimer = ref(null);
const cityAreaTimer = ref(null);
const centerCityTimer = ref(null);
const rainDataTimer = ref(null); //雨量站实时刷新
// 面板内容展开收起控制
const props = defineProps({
showLegend: {
type: Boolean,
},
});
watch(
() => props.showLegend,
() => {
// console.log('showLegend---', props.showLegend);
showLegend.value = props.showLegend;
},
{ immediate: true }
);
//图例一级标题点击
const changeAllLegend = item => {
// console.log('item---', item);
// item.isCheck = !item.isCheck;
};
//图例点击
const changeLegend = async item => {
item.isCheck = !item.isCheck;
// console.log('item--', item);
bus.emit('setLayerVisible', item);
// if (item.layername == 'weather_cloud') {
// return newfiberMap.setLayersVisible([item.layername], item.isCheck);
// }
if (item.layername == 'whiteMap') {
legendList.value[0]['children'][0][1].isCheck = false;
legendList.value[0]['children'][1][0].isCheck = false;
let { data } = await axios.get('/static/libs/mapbox/style/customs/whiteMapStyle.json');
let newMapStyle;
let oldMapStyle = newfiberMapbox.map.getStyle();
let oldIds = [];
oldMapStyle.layers.forEach(layer => {
oldIds.push(layer.id);
});
let newIds = data.layers.map(i => i.id);
oldIds.forEach(id => {
let layer = data.layers[newIds.indexOf(id)];
if (!layer) return;
Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
});
newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
}
if (item.layername == 'blackMap') {
legendList.value[0]['children'][0][0].isCheck = false;
legendList.value[0]['children'][1][0].isCheck = false;
let { data } = await axios.get('/static/libs/mapbox/style/customs/night-style.json');
let newMapStyle;
let oldMapStyle = newfiberMapbox.map.getStyle();
let oldIds = [];
oldMapStyle.layers.forEach(layer => {
oldIds.push(layer.id);
});
let newIds = data.layers.map(i => i.id);
oldIds.forEach(id => {
let layer = data.layers[newIds.indexOf(id)];
if (!layer) return;
Object.keys(layer.layout || {}).forEach(key => newfiberMapbox.map.setLayoutProperty(id, key, layer.layout[key]));
Object.keys(layer.paint || {}).forEach(key => newfiberMapbox.map.setPaintProperty(id, key, layer.paint[key]));
});
newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
}
if (item.layername == 'imageMap') {
legendList.value[0]['children'][0][0].isCheck = false;
legendList.value[0]['children'][0][1].isCheck = false;
newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
}
114.110631109158, 34.6762585421128, 114.550431262765, 34.9438974105791;
if (item.layername == 'topography') {
if (item.isCheck) {
newfiberMapBoxVectorLayer.addImageToMap(
item.layername,
[
[114.110631109158, 34.9438974105791],
[114.550431262765, 34.9438974105791],
[114.550431262765, 34.6762585421128],
[114.110631109158, 34.6762585421128],
],
topography
);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername]);
}
}
if (item.layername == 'builtCity') {
if (item.isCheck) {
newfiberMapBoxVectorLayer.addGeojsonLine(item.layername, item.data, 10, 0.4, 0.6);
newfiberMapBoxVectorLayer.addGeojsonLine(item.layername + '_dynamicLine', item.data, 1, 0.6);
let lineWidth = 1;
builtCityTimer.value = setInterval(() => {
lineWidth += 0.2;
if (lineWidth > 5) {
lineWidth = 1;
}
newfiberMapbox.map.setPaintProperty(item.layername + '_dynamicLine', 'line-width', lineWidth);
}, 200);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_dynamicLine']);
clearInterval(builtCityTimer.value);
}
}
if (item.layername == 'cityArea') {
if (item.isCheck) {
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel(item.layername, item.data);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_label']);
}
}
if (item.layername == 'centerCity') {
if (item.isCheck) {
newfiberMapBoxVectorLayer.addGeojsonLine(item.layername, item.data, 10, 0.1, 0.6);
newfiberMapBoxVectorLayer.addGeojsonLine(item.layername + '_dynamicLine', item.data, 1, 0.6);
let lineWidth = 1;
centerCityTimer.value = setInterval(() => {
lineWidth += 0.2;
if (lineWidth > 5) {
lineWidth = 1;
}
newfiberMapbox.map.setPaintProperty(item.layername + '_dynamicLine', 'line-width', lineWidth);
}, 200);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_dynamicLine']);
clearInterval(centerCityTimer.value);
}
}
if (item.layername == 'cesiumPaishuiArea1') {
if (item.isCheck) {
legendList.value[0]['children'][4][0].isCheck = false;
legendList.value[0]['children'][5][0].isCheck = false;
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel(item.layername, item.paishuiArea);
newfiberMapBoxVectorLayer.removeByIds([
'cesiumPaishuiArea2',
'cesiumPaishuiArea2_label',
'cesiumPaishuiArea3',
'cesiumPaishuiArea3_label',
]);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_label']);
}
}
if (item.layername == 'cesiumPaishuiArea2') {
if (item.isCheck) {
legendList.value[0]['children'][3][0].isCheck = false;
legendList.value[0]['children'][5][0].isCheck = false;
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel(item.layername, item.paishuiArea);
newfiberMapBoxVectorLayer.removeByIds([
'cesiumPaishuiArea1',
'cesiumPaishuiArea1_label',
'cesiumPaishuiArea3',
'cesiumPaishuiArea3_label',
]);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_label']);
}
}
if (item.layername == 'cesiumPaishuiArea3') {
if (item.isCheck) {
legendList.value[0]['children'][3][0].isCheck = false;
legendList.value[0]['children'][4][0].isCheck = false;
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel(item.layername, item.paishuiArea);
newfiberMapBoxVectorLayer.removeByIds([
'cesiumPaishuiArea1',
'cesiumPaishuiArea1_label',
'cesiumPaishuiArea2',
'cesiumPaishuiArea2_label',
]);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername, item.layername + '_label']);
}
}
// 雨量站实时数据，5分钟刷新一次
if (item.layername == 'rainStation') {
if (item.isCheck) {
if (localStorage.getItem('showHistoryMonitor') == '1') {
// 取历史降雨量数据
let res = await rainRainlist({
fromTime: localStorage.getItem('setRainDateKF'),
toTime: localStorage.getItem('setRainDateKF'),
timeType: 'month',
});
let datas = res.data || [];
datas.forEach(item => {
item.name = item.stCode + '/' + item.rainCumulative + 'mm';
});
// newfiberMapBoxVectorLayer.addGeojsonSymbol(item.layername, datas, rainStation_icon);
// res.data.forEach(feature => {
// // 实时降雨量范围不同颜色 小-中-大
// if (feature.properties.pn05 <= 0.3) {
// feature.properties.fillcolor = 'rgba(41, 184, 219,0.7)';
// } else if (feature.properties.pn05 > 0.3 && feature.properties.pn05 <= 0.8) {
// feature.properties.fillcolor = 'rgba(255, 237, 82,0.7)';
// } else if (feature.properties.pn05 > 0.8) {
// feature.properties.fillcolor = 'rgba(255, 69, 69,0.7)';
// }
// });
// newfiberMapBoxVectorLayer.addGeojsonPolygon(item.layername + '_area', item.dataArea);
console.log('雨量站历史数据---', res, localStorage.getItem('setRainDateKF'));
} else {
// 实时降雨数据
// 渲染文字和降雨量
item.rainData.features.forEach(feature => {
feature.properties.name = feature.properties.stName + '/' + feature.properties.pn05 + 'mm';
});
newfiberMapBoxVectorLayer.addGeojsonSymbol(item.layername, item.rainData, rainStation_icon);
item.dataArea.features.forEach(feature => {
// 实时降雨量范围不同颜色 小-中-大
if (feature.properties.pn05 <= 0.3) {
feature.properties.fillcolor = 'rgba(41, 184, 219,0.7)';
} else if (feature.properties.pn05 > 0.3 && feature.properties.pn05 <= 0.8) {
feature.properties.fillcolor = 'rgba(255, 237, 82,0.7)';
} else if (feature.properties.pn05 > 0.8) {
feature.properties.fillcolor = 'rgba(255, 69, 69,0.7)';
}
});
newfiberMapBoxVectorLayer.addGeojsonPolygon(item.layername + '_area', item.dataArea);
}
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);
}, 5 * 60 * 1000);
} else {
newfiberMapBoxVectorLayer.removeByIds([item.layername + '_area']);
clearInterval(rainDataTimer.value);
}
}
// if (item.layername == 'weather_cloud') {
// return newfiberMap.setLayersVisible([item.layername], item.isCheck);
// }
// if (item.layername == 'whiteMap') {
// legendList.value[0]['children'][0][1].isCheck = false;
// legendList.value[0]['children'][1][0].isCheck = false;
// changeMapStyle.mapSetWhiteStyle(newfiberMap);
// }
// if (item.layername == 'blackMap') {
// legendList.value[0]['children'][0][0].isCheck = false;
// legendList.value[0]['children'][1][0].isCheck = false;
// changeMapStyle.mapSetBlueStyle(newfiberMap);
// }
// if (item.layername == 'imageMap') {
// legendList.value[0]['children'][0][0].isCheck = false;
// legendList.value[0]['children'][0][1].isCheck = false;
// changeMapStyle.mapSetImageStyle(newfiberMap);
// }
// if (item.isCheck) {
// if (item.layername == 'topography') {
// newfiberMap.getMap().entities.add({
// id: 'topography',
// rectangle: {
// coordinates: Cesium.Rectangle.fromDegrees(114.110631109158, 34.6762585421128, 114.550431262765, 34.9438974105791),
// material: new Cesium.ImageMaterialProperty({
// // 纹理
// image: topography,
// // repeat: new Cesium.Cartesian2(4, 4),
// // color: Cesium.Color.BLUE,
// transparent: true,
// }),
// },
// });
// }
// if (item.layername == 'cesiumPaishuiArea1') {
// legendList.value[0]['children'][5][0].isCheck = false;
// legendList.value[0]['children'][6][0].isCheck = false;
// cesiumPaiShuiArea.addCesiumPaishuiArea1(newfiberMap);
// newfiberMap.removeByIds(['cesiumPaishuiArea2', 'cesiumPaishuiArea3']);
// }
// if (item.layername == 'cesiumPaishuiArea2') {
// legendList.value[0]['children'][4][0].isCheck = false;
// legendList.value[0]['children'][6][0].isCheck = false;
// cesiumPaiShuiArea.addCesiumPaishuiArea2(newfiberMap);
// newfiberMap.removeByIds(['cesiumPaishuiArea1', 'cesiumPaishuiArea3']);
// }
// if (item.layername == 'cesiumPaishuiArea3') {
// legendList.value[0]['children'][4][0].isCheck = false;
// legendList.value[0]['children'][5][0].isCheck = false;
// cesiumPaiShuiArea.addCesiumPaishuiArea3(newfiberMap);
// newfiberMap.removeByIds(['cesiumPaishuiArea1', 'cesiumPaishuiArea2']);
// }
// if (item.type == 'polygon') {
// newfiberVectorLayer.addGeojsonPolygon(newfiberMap, item.data, item.layername);
// }
// // if (item.type == 'point') {
// // newfiberVectorLayer.addGeojsonPoint(newfiberMap, item.data, item.url, item.layername);
// // }
// if (item.type == 'areaWall') {
// newfiberVectorLayer.addGeojsonWall(newfiberMap, item.data, item.layername);
// }
// if (item.layername == 'dynamicWater') {
// let dynamicWaterList = newfiberMap.getMap().scene.primitives._primitives.filter(i => i.key == 'dynamicWater');
// if (!dynamicWaterList.length) {
// newfiberVectorLayer.addDynamicWater(newfiberMap, item.data, item.layername);
// } else {
// newfiberVectorLayer.setDynamicWaterVisible(item.isCheck);
// }
// }
// if (item.type == '3dModel') {
// item.data.forEach((url, index) => {
// newfiberVectorLayer.add3DModelLayers(newfiberMap, url, item.layername + index);
// });
// }
// if (item.type == 'point') {
// newfiberVectorLayer.addGeojsonPoint(newfiberMap, item.data, getImageUrl(item.url, 'cesiumMap/legendIcon'), item.layername);
// if (item.dataArea) {
// newfiberVectorLayer.addGeojsonPolygon(newfiberMap, item.dataArea, item.layername);
// }
// if (item.layername == 'rainStation') {
// //雨量站特殊处理，5分钟刷新
// let rainValue = 0;
// rainDataTimer.value = setInterval(async () => {
// rainValue += 1;
// let res = await realtimeRainfallStatistics({ monitorTargetType: 'rainfall', orderBy: 'tt desc' });
// if (res && res.code == 200) {
// let rainDataList = res.data; //雨量站
// rainDataList.forEach(element => {
// element.stName = element.stName + '/' + element.pn05 + 'mm' + rainValue;
// });
// item.data = cesiumMapCommonLegend.getGeojsonData(rainDataList);
// newfiberMap.removeByIds([item.layername]);
// newfiberVectorLayer.addGeojsonPoint(newfiberMap, item.data, getImageUrl(item.url, 'cesiumMap/legendIcon'), item.layername);
// newfiberVectorLayer.addGeojsonPolygon(newfiberMap, item.dataArea, item.layername);
// }
// }, 300000);
// }
// }
// if (item.layername == 'pipeLineFlow') {
// newfiberVectorLayer.addDynamicLine(item.data, item.layername);
// }
// if (item.type == 'mapServer') {
// let removedLayers = newfiberMap
// .getMap()
// .imageryLayers._layers.filter(layer => layer.imageryProvider.layers && layer.imageryProvider.layers.includes(item.layername));
// if (!removedLayers.length) {
// newfiberMap.loadWmsLayer({
// url: '/geoserver/henan_kaifeng/wms',
// layers: 'henan_kaifeng:' + item.layername,
// visible: true,
// });
// } else {
// console.log(removedLayers);
// removedLayers[0].show = true;
// }
// }
// if (item.layername == 'roadLabel') {
// newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2]);
// }
// }
// if (!item.isCheck) {
// if (item.layername == 'topography') {
// newfiberMap.getMap().entities.removeById('topography');
// }
// if (item.layername == 'dynamicWater') {
// newfiberVectorLayer.setDynamicWaterVisible(item.isCheck);
// }
// if (item.type == '3dModel') {
// item.data.forEach((url, index) => {
// newfiberVectorLayer.set3DModelVisible(item.layername + index, item.isCheck);
// });
// }
// if (item.type == 'mapServer') {
// let removedLayers = newfiberMap
// .getMap()
// .imageryLayers._layers.filter(layer => layer.imageryProvider.layers && layer.imageryProvider.layers.includes(item.layername));
// removedLayers[0].show = false;
// }
// if (item.layername == 'roadLabel') {
// newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V1]);
// }
// newfiberMap.removeByIds([item.layername]);
// if (rainDataTimer.value) {
// clearInterval(rainDataTimer.value);
// }
// }
};
onMounted(() => {
cesiumMapCommonLegend.getStationData();
bus.on('cesiumLegendDataList', legendDataList => {
legendList.value = legendDataList;
legendList.value = legendDataList;
allMapList.value = legendList.value[1].children.concat(legendList.value[2].children).concat(legendList.value[0].children).flat();
bus.emit('setLegendData', allMapList.value);
});
nextTick(() => {
bus.on('setIniteLayer', data => {
// console.log('data---', data);
if (!data.length) {
let legendList_1 = legendList.value[1]['children'].concat(legendList.value[2]['children']).flat();
legendList_1.forEach(layer => {
layer.isCheck = true;
changeLegend(layer);
});
} else {
//if (legendList.value.length == 0) return;
let legendList_1 = legendList.value[0]['children']
.concat(legendList.value[1]['children'])
.concat(legendList.value[2]['children'])
.flat();
data.forEach(layer => {
let selectedLayer = legendList_1.filter(item => item.layername == layer.layername);
// console.log('selectedLayer--', selectedLayer);
selectedLayer.forEach(i => {
i.isCheck = layer.show;
changeLegend(i);
});
});
}
});
});
});
onBeforeUnmount(() => {
bus.off('cesiumLegendDataList');
if (rainDataTimer.value) {
clearInterval(rainDataTimer.value);
}
});
</script>
<style lang="scss">
.lengendPageHM {
position: absolute;
left: 480px;
bottom: 63px;
z-index: 205;
width: 347px;
height: 554px;
background: #004565;
.publicLegendHM {
opacity: 0.8;
.legendTitle {
width: 100%;
height: 46px;
position: absolute;
top: 1px;
background: url('@/assets/cesiumMap/legendIcon/legendTitle_img.png');
.legendName {
margin: 10px 0px 15px 9px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 22px;
color: #e4f5ff;
img {
width: 22px;
height: 22px;
float: right;
margin-right: 10px;
cursor: pointer;
}
}
}
.legendContent {
width: 100%;
position: absolute;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
top: 47px;
.titleB {
margin: 10px 0px 10px 20px;
display: flex;
height: 17px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #3afff8;
.iconImg {
margin-top: 3px;
margin-left: 21px;
margin-right: 10px;
width: 16px;
height: 16px;
border: 2px solid #41f4ee;
.el-icon {
font-weight: bold;
&.active {
color: #41f4ee;
}
}
}
}
.legendItemContent {
width: 100%;
.part {
width: 100%;
display: flex;
height: 30px;
align-items: center;
cursor: pointer;
.partItem {
margin-left: 20px;
display: flex;
width: 180px;
&:hover {
background: #08596a;
}
.img {
width: 16px;
height: 16px;
margin-left: 10px;
margin-right: 5px;
}
.title {
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #b8ecff;
}
.iconImg {
width: 16px;
height: 16px;
border: 1px solid #a6daf0;
.el-icon {
font-weight: bold;
&.active {
color: #00ee6f;
}
}
}
}
}
}
}
}
}
</style>
