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 lcz = 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 key in lcz) {
        lczDatas.push([lcz[key].lng, lcz[key].lat]);
      }

      //低缩放级别显示的道路
      let jhgsPl1 = drawingLine(this.AMap, lczDatas, 3, 0);
      this.aMapIns.add(jhgsPl1);

      //高缩放级别显示的车道
      let jhgsPl2 = drawJHPath(this.AMap, lczDatas, 1, 60);

      //地图缩放事件,缩放到一定级别显示道路
      this.aMapIns.on('zoomend', () => {
        this.aMapIns.getZoom() > 19.5 ? this.aMapIns.add(jhgsPl2) : this.aMapIns.remove(jhgsPl2);
      });
      this.aMapIns.on('zoomstart', () => {
        this.aMapIns.remove(jhgsPl2);
      });

    });

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

    //画车道
    // let jhPolyline;
    function drawJHPath(AMap, lczPointList,borderWeight = 1,strokeWeight = 60) {
      return new AMap.Polyline({
        path: lczPointList,            // 设置线覆盖物路径
        showDir: true,
        dirImg: createCanvas(),
        isOutline: true,
        outlineColor: '#C4C6C7',
        borderWeight: 2,//轮廓线宽度
        strokeWeight: strokeWeight, // 线宽
        strokeOpacity: 1,         // 线透明度
        draggable: false, //是否可移动
        strokeStyle: "solid",
        // strokeDasharray: [10, 2, 10],
        strokeColor: '#394851',   // 线颜色
      });

    }

    //画车道线
    function createCanvas() {
        let canvasDir = document.createElement('canvas')
        let width = 150;
        let height = 150;

        canvasDir.width = width;
        canvasDir.height = height;
        var context = canvasDir.getContext('2d');
        context.strokeStyle = '#C4C6C7';
        context.lineJoin = 'round';
        context.lineWidth = 5;

        //左边实线
        // context.moveTo(5, 0);
        // context.lineTo(5, height);
        //左边虚线
        context.moveTo(35, 0);
        context.lineTo(35, 50);
        context.moveTo(35, 100);
        context.lineTo(35, 150);
        //中间虚线
        context.moveTo(75, 20);
        context.lineTo(75, 70);
        context.moveTo(75, 120);
        context.lineTo(75, 170);
        //右边虚线
        context.moveTo(115, 0);
        context.lineTo(115, 50);
        context.moveTo(115, 100);
        context.lineTo(115, 150);
        //最右侧实线
        // context.moveTo(width - 5, 0);
        // context.lineTo(width - 5, height);
        
        context.stroke();

        // 绘制一个填充矩形
        // context.fillStyle = "red";
        // context.fillRect(0, 0, width, height);

        return canvasDir;
      }

    // 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>