TBA_GXPT/ruoyi-ui/src/views/map/index.vue

<template>
  <div class="map-container">
    <gw-map ref="mapRef" :config="mapConfig"></gw-map>
    <biz-data-card v-for="bizDataShowConfig in bizDataShowConfigList" :key="bizDataShowConfig.id"
                   :config="bizDataShowConfig"></biz-data-card>
  </div>
</template>
<script setup>
import {getBizDataShowConfigList} from "@/api/standardization/bizDataShowConfig.js";
import BizDataCard from "@/views/map/components/bizDataCard.vue";
import GwMap from "./components/map.vue"

const mapRef = ref(null);
const mapConfig = ref({
  zoom: 9,
  center: [116.397428, 39.90923],
  layers: [
    {
      id: 'weather-stations',
      type: 'vector', // 指定为矢量图层
      name: '行政区划面图层',
      source: {
        type: 'api', // 数据源类型为API
        url: 'http://localhost:8082/SCSSFM/getCalResultsByStation',
        method: 'POST',
        body: [
          {key: 'projectId', value: '230103', type: 'string'},
          {key: 'forecastSchemeId', value: '2301031', type: 'string'},
          {key: 'calSchemeIds', value: ["20421b55-5383-4ef0-a"], type: 'array'},
        ],
        headers: [
          {
            key: 'authorization',
            value: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBhOTE3ZDdhLTUwODktNDg1MC05YTUyLTk1NzRjZWUzYWU5ZSJ9.QuFdSq-_mLFwOlM249-ledRlM4U2_qIRVfdOzGIOnf38XY-QXyaP0k-me2gT1wf5LCjOW0z-zJnO-SnNo78eOg',
            type: 'string'
          },
        ],
        responseResolution: "$.data",
        // 定义数据映射规则
        mapping: {
          // 指定哪些字段包含几何信息（经度、纬度）
          geometry: {
            type: 'Point', // 几何类型
            coordinates: {
              longitude: 'lgtd', // 接口中的经度字段名
              latitude: 'lttd'   // 接口中的纬度字段名
            }
          },
          textField: 'stationName',
          // 定义要保留的属性字段
          properties: {
            '测站编码': 'stationCode',     // 目标属性名: 源数据字段名
            '测站名称': 'stationName',
            '预报最大水位': 'calSchemeInfos[0].results[0].maxData.value',
            '预报最大水位时间': 'calSchemeInfos[0].results[0].maxData.tm',
            '预报最小水位': 'calSchemeInfos[0].results[0].minData.value',
            '预报最小水位时间': 'calSchemeInfos[0].results[0].minData.tm',
            '预报平均水位': 'calSchemeInfos[0].results[0].average',
            '警戒水位': 'alarmValue',
            '预报潮位': 'calSchemeInfos[0].results[0].datas',
          }
        },
        // 轮询更新（可选）
        refreshInterval: 30000 // 30秒刷新一次
      },
      visible: true,
      zIndex: 1000,
      style: {
        // 点要素样式
        point: {
          image: {
            type: 'icon',           // circle|icon
            // type: 'circle',           // circle|icon
            name: 'red_trangle',
            radius: 8,
            fill: {color: '#FF5722'},
            stroke: {color: '#fff', width: 2}
          },
          text: {
            field: 'stationName',
            font: '12px Arial',
            fill: {color: '#000000'},
            stroke: {color: '#ffffff', width: 2},
            offsetY: -20
          }
        },
        // 线要素样式
        line: {
          stroke: {
            color: '#0066ff',
            width: 3,
            lineDash: [5, 5]
          }
        },
        // 面要素样式
        polygon: {
          fill: {color: 'rgba(0, 102, 255, 0.2)'},
          stroke: {color: '#0066ff', width: 2}
        }
      },
      events: {
        click: {
          action: 'popup',           // 点击触发弹窗
          popupConfig: {
            // 弹窗模板ID
            template: 'SCSSFM_POPUP',
            offset: [0, -20]
          }
        },
        // hover: {
        //   action: 'highlight'       // 悬停高亮
        // }
      }
    },
  ]
});
const bizDataShowConfigList = ref([]);

function getBizDataConfigList() {
  getBizDataShowConfigList().then(res => {
    bizDataShowConfigList.value = res.data;
  })
}

onMounted(() => {
  getBizDataConfigList();
});
</script>
<style scoped lang="scss">
.map-container {
  height: 100%;
  width: 100%;
  position: relative;

  .biz-data-config-container {

    & + .biz-data-config-container {
      margin-top: 10px;
    }

  }

}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  background-color: rgba(20, 19, 19, 0);
}

/*关键设置 tbody出现滚动条*/
::-webkit-scrollbar-thumb {
  background-color: rgba(58, 100, 179, 0.5);
  border-radius: 8px 10px;
}

::v-deep(.el-scrollbar) {
  --el-scrollbar-bg-color: rgba(58, 100, 179);
  --el-scrollbar-hover-bg-color: rgba(58, 100, 179);
}
</style>