industry-database/src/views/c-cpns/figureLegend.vue

<template>
  <div id="figureLegend" v-if="legendImgUrl.length || legendColor.length">
    <div class="common-title">
      <span>图例</span>
    </div>
    <div class="legend-content scroll">
      <div class="legend-item" v-for="item in legendImgUrl" :key="item.label">
        <span><img :src="'data:image/png;base64,' + item.imageData" alt=""></span>
        <span>{{item.label}}</span>
      </div>
      <div class="legend-item" v-for="item in legendColor" :key="item.label">
        <span><div class="color-class" :style="{backgroundColor:item.color}"></div></span>
        <span>{{item.label}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {ref,onMounted,watch} from "vue";
import {useMapStore} from "@/store/mapStore.js";
import {getLegend} from "@/service/map.js";

export default {
  name: "figureLegend",
  setup(){
    const mapStore = useMapStore();
    let legendImgUrl = ref([]);
    let legendColor = ref([]);
    watch(() => mapStore.currentLayerList,(val) => {
      showLegend(val)
    },{
      immediate:true,
      deep:true
    })
    async function showLegend(val) {
      legendImgUrl.value = [];
      legendColor.value = [];
      for (let i = 0; i < val.length; i++) {
        await getSingleLegend(val[i]);
      }
    }
    async function getSingleLegend(params) {
      try{
        const res =  await getLegend("https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/" + params.TOKEN + '/0?f=json');
        if (res?.data?.drawingInfo?.renderer?.symbol) {//简单的单个样式
          let data = res?.data?.drawingInfo?.renderer?.symbol;
          if (data?.imageData) {
            legendImgUrl.value.push({
              imageData: data.imageData,
              label: res?.data?.drawingInfo?.renderer?.label || params.label
            })
          } else if (data?.color) {
            legendColor.value.push({
              color: "rgb(" + data.color.slice(0, 3).toString() + ")",
              label: res?.data?.drawingInfo?.renderer?.label || params.label
            })
          }
        } else if (res?.data?.drawingInfo?.renderer?.uniqueValueInfos) {
          let data = res?.data?.drawingInfo?.renderer?.uniqueValueInfos;
          data.forEach(item => {
            if (item.symbol?.imageData) {
              legendImgUrl.value.push({
                imageData: item.symbol.imageData,
                label: params.label + '-' + item?.label
              })
            } else if (item.symbol?.color) {
              legendColor.value.push({
                color: "rgb(" + item.symbol.color.slice(0, 3).toString() + ")",
                label: params.label + '-' + item?.label
              })
            }
          })
        }
      }catch (error){
        console.error('Error fetching legend:', error);
      }
    }
    return{
      legendImgUrl,
      legendColor
    }
  }
}
</script>

<style scoped lang="scss">
#figureLegend{
  background-color: rgba(0, 22, 52, 0.75);
  position: absolute;
  z-index: 2;
  left: 460px;
  bottom: 80px;
  width: 370px;
  height: 173px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .common-title{
    width: 100%;
    height: 37px;
    background: url("@/assets/imgs/tkxbt.png") no-repeat;
    background-size: 100% 100%;
    span {
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 20px;
      color: #BBCDE6;
      opacity: 1;
      padding-left: 60px;
      background: linear-gradient(0deg, #ACE5FF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .legend-content{
    width: 100%;
    height: 120px;
    .legend-item{
      color: #FFF;
      span{
        padding-left: 20px;
        font-size: 14px;
      }
    }
    .color-class{
      width: 26px;
      height: 10px;
      margin: 0 4px;
      display: inline-block;
    }
  }
}
</style>