yiliangyiyun-pc-jj/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() {
      // // 已载入高德地图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();
      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: true,
            viewMode: '3D',
            pitch: 0, //地圖仰角
            center: [104.780269, 34.955403],
            mapStyle: 'amap://styles/dark',
            buildingAnimation: false,
            showIndoorMap: false,
          });

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

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

        var pointGeo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
        });
        scatter.setSource(pointGeo);
        scatter.setStyle({
            unit: 'meter',
            size: [100000, 100000],
            borderWidth: 0,
            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
            duration: 2000,
            animate: true,
        });
        loca.add(scatter);

        // 弧线
        var pulseLink = new Loca.PulseLinkLayer({
            // loca,
            zIndex: 10,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
            depth: true,
        });

        var geo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
        });

        pulseLink.setSource(geo);
        pulseLink.setStyle({
            unit: 'meter',
            dash: [40000, 0, 40000, 0],
            lineWidth: function () {
                return [20000, 1000];
            },
            height: function (index, feat) {
                return feat.distance / 3 + 10;
            },
            // altitude: 1000,
            smoothSteps: 30,
            speed: function (index, prop) {
                return 1000 + Math.random() * 200000;
            },
            flowLength: 100000,
            lineColors: function (index, feat) {
                return ['#ebf0f700'];
            },
            maxHeightScale: 0.3, // 弧顶位置比例
            headColor: '#75d1f4',
            trailColor: 'rgba(255, 255,0,0)',
        });
        loca.add(pulseLink);
        loca.animate.start();


        // 点击事件处理
        var clickInfo = new AMap.Marker({
            anchor: 'bottom-center',
            position: [116.396923, 39.918203, 0],
        });
        clickInfo.setMap(map);
        clickInfo.hide();
        map.on("click", function (e) {
            var feat = pulseLink.queryFeature(e.pixel.toArray());

            if (feat) {
                clickInfo.show();
                var props = feat.properties;
                clickInfo.setPosition(feat.coordinates[1]);
                clickInfo.setContent(
                    '<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +
                    '速率: ' + feat.properties['ratio'] +
                    '</div>'
                );
            } else {
                clickInfo.hide();
            }
        });

      }
    },
  }
</script>