performance-test/src/views/performance/components/map.vue

<template>
  <div class="map-ditu">
    <!-- 分析事件中 风场信息展示地图组件 -->
    <Tmap
      ref="map"
      :windEngineGroupByFieldCodeDetail="windEngineGroupByFieldCodeDetail"
    >
    </Tmap>
  </div>
</template>

<script>
import {
  getWindEngineGroupByFieldCode,
  getWindEngineGroupRatedListByFieldCodePage,
} from "@/api/ledger.js";
import Tmap from "@/components/map";

export default {
  name: "Index",
  components: {
    Tmap,
  },
  data() {
    return {
      fieldCode: "",
      batchCode: "",
      windEngineGroupByFieldCodeDetail: {},
    };
  },
  mounted() {
    this.fieldCode = this.$route.query.fieldEngineCode;
    this.batchCode = this.$route.query.batchCode;
    // this.addMarkersAndZoom();
  },
  watch: {
    fieldCode(newVal) {
      if (newVal) {
        this.GETfengji();
      }
    },
  },

  methods: {
    GETfengji() {
      let dataArr = {
        fieldCode: this.fieldCode,
        batchCode: this.batchCode,
      };
      getWindEngineGroupByFieldCode(dataArr).then((res) => {
        const result = res.data;
        this.windEngineGroupByFieldCodeDetail = result;
        if (result !== null && result.anemometerTowerList) {
          this.addMarkersAndZoom(result.anemometerTowerList, "5");
        }
        if (this.$route.query.fieldEngineCode) {
          getWindEngineGroupRatedListByFieldCodePage({
            fieldCode: this.$route.query.fieldEngineCode,
            pageSize: 9999999,
          }).then((windRes) => {
            if (windRes.data && windRes.data.list) {
              // 定义两个数组来存放不同errorState的元素
              const errorStateFalse = [];
              const errorStateTrue = [];
              // 遍历数组并根据errorState的值将元素放入不同的数组中

              windRes.data.list.forEach((item) => {
                errorStateFalse.push({
                  ...item,
                  longitudeAndLatitudeString: `${item.longitude}00,${item.latitude}00`,
                });
              });

              // 调用this.addMarkersAndZoom方法
              if (errorStateFalse.length > 0) {
                this.addMarkersAndZoom(errorStateFalse, "4");
              }

              if (errorStateTrue.length > 0) {
                this.addMarkersAndZoom(errorStateTrue, "6");
              }
            }
          });
        }
      });
    },
    parseCoordinates(input) {
      if (input && typeof input === "string") {
        return input.split(",").map(Number);
      }
      return [];
    },
    addMarkersAndZoom(data, type) {
      const dataMapList = data;
      dataMapList.forEach((element) => {
        if (
          this.parseCoordinates(element.longitudeAndLatitudeString).length > 0
        ) {
          this.$refs.map.addMarker({
            point: this.parseCoordinates(element.longitudeAndLatitudeString),
            val: type,
            ...element,
          });
          // this.$refs.map.moveAndZoom({
          //   point: this.parseCoordinates(element.longitudeAndLatitudeString),
          //   zoom: 15,
          // });
          return;
        }
        this.$refs.map.clearMarkers();
      });
      // const points = [
      //   { point: [120.2, 30.35], val: "4" },
      //   { point: [120.21, 30.35], val: "5" },
      // ];

      // // Add markers to the map
      // points.forEach((point) => {
      //   this.$refs.map.addMarker(point);
      // });

      // // Zoom to a specific point
      const zoomPoint = {
        point: this.parseCoordinates(
          this.windEngineGroupByFieldCodeDetail.windEngineGroupVoList[0]
            .longitudeAndLatitudeString
        ),
        zoom: 15,
      };
      this.$refs.map.moveAndZoom(zoomPoint);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-ditu {
  height: 93vh;
  position: relative;
}
</style>