jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue

<template>
  <div class="AMapContainer" v-loading="loading" element-loading-text="地图加载中..." element-loading-spinner="el-icon-place"
    element-loading-background="rgba(0, 0, 0, 0.42)" ref="mapContainerRef"
    :style="{ ...this.size, ...getReverseStyle }" />
</template>

<script lang="ts">
import { onceObserver } from "@screen/utils/resizeObserver";
import { loadAMap } from "./loadAMap";

const acData = require("./data/ac.json");
const lczData = require("./data/lcz.json");

export default {
  name: "AMapContainer",
  inject: ["adpScale"],
  data() {
    return {
      size: null,
      loading: true,
    };
  },
  computed: {
    getReverseStyle() {
      return {
        transform: `scale(${1 / this.adpScale.scaleX}, ${1 / this.adpScale.scaleY
          })`,
      };
    },
  },
  async mounted() {
    // console.log(this.$refs.mapContainerRef);
    this.AMap = await loadAMap();

    if (!this.AMap) return;

    onceObserver.call(
      this,
      this.$refs.mapContainerRef.parentElement,
      ({ width, height }) =>
      (this.size = {
        width: `${width}px`,
        height: `${height + 24}px`,
      })
    );

    this.aMapIns = new this.AMap.Map(this.$refs.mapContainerRef, {
      resizeEnable: true, //是否监控地图容器尺寸变化
      mapStyle: "amap://styles/blue",
      zoom: 9,
      center: [116.629514, 35.794168],
    });

    this.aMapIns.on("complete", () => {
      this.loading = false;

      // var polyline1 = new this.AMap.Polyline({
      //   path: [],
      //   strokeColor: "#67EBF7",
      //   strokeWeight: 6,
      //   strokeOpacity: 0.9,
      //   zIndex: 50,
      //   bubble: true,
      // })
      // this.aMapIns.add([polyline1])

      // this.initPolygon(this.AMap);

      //各市边界线
      let acPolylines = [];
      for (let i = 0; i < acData.length; i++) {
        let datas = [];
        var poly = acData[i].polyline.split(";");
        for (let j = 0; j < poly.length; j++) {
          datas.push(poly[j].split(","));
        }

        let pl = drawingLine(this.AMap, datas);
        acPolylines.push(pl);

        // polyline.setMap(this.aMapIns)
      }
      this.aMapIns.add(acPolylines);

      //济菏高速
      let lczDatas = [];
      for (let i = 0; i < lczData.length; i++) {
        lczDatas.push([lczData[i].lng, lczData[i].lat]);
      }

      let jhgsPl = drawingLine(this.AMap, lczDatas, 3);
      this.aMapIns.add(jhgsPl);
    });

    //画线
    function drawingLine(AMap, datas, bWeight = 1, olColor = "#00B3CC") {
      return new AMap.Polyline({
        path: datas,
        isOutline: true,
        outlineColor: olColor,
        borderWeight: bWeight,
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 0,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50,
      });
    }

    // this.aMapIns.enableAutoResize();
  },
  methods: {
    getMapInstance() {
      return {
        AMap: this.AMap,
        mapIns: this.aMapIns,
      };
    },
  },
  unmounted() {
    if (!this.aMapIns) return;
    this.aMapIns.destroyed();
  },
};
</script>

<style lang='scss' scoped>
.AMapContainer {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  transform-origin: left top;
  background-color: #103253 !important;
  transition: all 0.15s linear;
  left: 0;
  top: 0;

  ::v-deep {
    .el-loading-mask {
      user-select: none;

      .el-loading-spinner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .el-loading-text,
        .el-icon-place {
          color: #59d1fe;
          font-size: 15px;
        }

        .el-icon-place {
          font-size: 18px;
          animation: 1.2s infinite jump;
        }
      }
    }
  }
}

@keyframes jump {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}
</style>