yiliangyiyun-pc/src/components/mapdrag/indexMap.vue

<style lang='scss' scoped>
  .mapContent {
    position: relative;
    margin-top: 10px;

    .center-add {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 999;
      width: 30px;
      height: 30px;
    }
  }

  #mapContainer {
    width: 100%;
    height: 506px;
  }

  #tip {
    position: absolute;
    top: -45px;
    display: flex;
  }

  #tip .el-input {
    // width: 179px;
    margin-right: 0px;
  }

  #tip .el-select {
    margin-right: 10px;
  }

  #tip .el-select {
    width: 179px;
  }

  #tip .el-textarea {
    width: 179px;

    /deep/ .el-textarea__inner {
      height: 40px;
      resize: none;
    }
  }

  .el-button--primary {
    background-color: #5878e8;
    border-color: #5878e8;
  }

  .el-button--default {
    color: #5878e8;
    border-color: #5473e8;
  }

  .address {
    display: flex;
    align-items: center;
    margin-right: 20px;

    // position:absolute;
    // top: -35px;
    .address-input {
      display: inline-block;
      width: 480px;
    }
  }
</style>

<template>
  <div class="mapContent">
    <div id="mapContainer"></div>
  </div>
</template>

<script>
  import {
    regionData,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  import image from '../../../public/img/ic_locationmarker.jpg'
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    data() {
      return {
        map: null,
        provinces: [],
        province: '',
        districts: [],
        district: '',
        citys: [],
        city: '',
        polygons: [],
        selectedOptions1: [],
        areacode: '',
        address: '',
        objPoint: [],
        markers: [],
        zoomEnable: true,
        dragEnable: true,
        status: true,
        center: '',
      }
    },
    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type'],
    computed: {
      showFlag() {
        return this.flagVisible
      },
    },
    watch: {},
    async created() {
      // debugger
      // // 已载入高德地图API，则直接初始化地图
      // if (window.AMap && window.AMapUI && window.Loca) {
      //   this.loadmap()
      //   // 未载入高德地图API，则先载入API再初始化
      // } else {
      //   this.remoteLoad()
      //   //  await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar`)
      //   //     await remoteLoad('https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47')

      // }
    },
    mounted() {
      AMapLoader.reset();
      delete window.AMap;
      AMapLoader.load({
        "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar'],
        "Loca": { // 是否加载 Loca， 缺省不加载
          "version": '2.0.0' // Loca 版本，缺省 1.3.2
        },
      }).then((AMap) => {
  

        this.loadmap()
      }).catch(e => {
        console.log(e);
      })


    },
    methods: {
      loadmap(val) {
          var map = new AMap.Map('mapContainer', {
            zoom: 5.29,
            showLabel: false,
            viewMode: '3D',
            pitch: 48,
            center: [104.780269, 34.955403],
            mapStyle: 'amap://styles/dark',
          });

          var loca = new Loca.Container({
            map,
          });

          // 颜色配置
          var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
          var trailColors = [
            'rgba(255,178,6, 0.2)',
            'rgba(255,178,6, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
          ];

          // 进入北京方向的线
          var inLineSource = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-in.json',
          });

          var inLinelayer = new Loca.PulseLineLayer({
            // loca,
            zIndex: 11,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
          });

          inLinelayer.setStyle({
            altitude: 0,
            lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
            headColor: (_, feature) => headColors[feature.properties.type],
            trailColor: (_, feature) => trailColors[feature.properties.type],
            interval: 0.5,
            duration: 2000,
          });
          inLinelayer.setSource(inLineSource);
          loca.add(inLinelayer);

          // 出北京方向的线
          var outLineSource = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
          });

          var outLinelayer = new Loca.PulseLineLayer({
            // loca,
            zIndex: 11,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
          });

          outLinelayer.setStyle({
            altitude: 0,
            lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
            headColor: (_, feature) => headColors[feature.properties.type],
            trailColor: (_, feature) => trailColors[feature.properties.type],
            interval: 0.25,
            duration: 5000,
          });
          outLinelayer.setSource(outLineSource);
          loca.add(outLinelayer);

          // 下方呼吸点层
          var scatter = new Loca.ScatterLayer({
            loca,
            zIndex: 10,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
          });

          var scatterGeo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-scatter.json',
          });
          scatter.setSource(scatterGeo);
          scatter.setStyle({
            unit: 'px',
            size: (_, feature) => {
              var size = feature.properties.lineWidthRatio * 2 + 30;
              return [size, size];
            },
            borderWidth: 0,
            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
            duration: 2000,
            animate: true,
          });
          loca.add(scatter);

          loca.animate.start();
      }
    },
  }
</script>