- <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 { getImageUrl } from '@/utils/ruoyi';
- import cesiumMapCommonLegend from './cesiumMapLegend.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';
-
- const { proxy } = getCurrentInstance();
- const legendList = ref([]);
- const showLegend = ref(false);
-
- // 面板内容展开收起控制
- 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 = item => {
- item.isCheck = !item.isCheck;
- console.log('item--', 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;
- 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 == 'pipeLineFlow') {
- newfiberVectorLayer.addDynamicLine(item.data, item.layername);
- }
- }
- 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);
- });
- }
- newfiberMap.removeByIds([item.layername]);
- }
- };
- onMounted(() => {
- cesiumMapCommonLegend.getStationData();
- nextTick(() => {
- bus.on('legendDataList', legendDataList => {
- legendList.value = legendDataList;
- });
- });
- 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 {
- 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.map(i => {
- i.isCheck = layer.show;
- changeLegend(i);
- });
- });
- }
- });
- });
- </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>