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

<style lang='scss'>
  .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;

    .address-input {
      display: inline-block;
      width: 480px;
    }
  }

  .amap-marker {
    opacity: 0;
  }

  .amap-marker-label {
    background: #0000004f;
    z-index: 1158;
    border: 0px solid rgb(102, 102, 102);
    color: #eee;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
  }

  /*动画*/
  /*  .amap-marker-label {
    -webkit-animation: Tada 3s infinite;
    -moz-animation: Tada 3s infinite;
    -ms-animation: Tada 3s infinite;
    animation: Tada 3s infinite;
  }

  @keyframes Tada {
    0% {
      opacity: 0;


    }

    100% {
      opacity: 1;

    }
  } */
</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 {
        mapPointData: {},
        mapLineData: {},
        map: null,
        provinces: [],
        province: '',
        districts: [],
        district: '',
        citys: [],
        city: '',
        polygons: [],
        selectedOptions1: [],
        areacode: '',
        address: '',
        objPoint: [],
        zoomEnable: true,
        dragEnable: true,
        status: true,
        center: '',
        markerList: [],
        timer: ''
      }
    },
    props: ['listData'],
    computed: {
      showFlag() {
        return this.flagVisible
      },
    },
    watch: {
      listData: function(val1, val2) {
        this.listData = val1
        var that = this
        this.makeJsonData()
        AMapLoader.load({
          "key": "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key，首次调用 load 时必填
          "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          "plugins": ['plugin=AMap.Scale', 'AMap.ToolBar','AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.DistrictSearch','AMap.Geolocation', 'Geolocation'],
          "Loca": { // 是否加载 Loca， 缺省不加载
            "version": '2.0.0' // Loca 版本，缺省 1.3.2
          },
        }).then((AMap) => {
          this.loadmap()
        }).catch(e => {
          console.log(e);
        })
      }
    },
    async created() {},
    mounted() {},
    beforeDestroy() {
      clearInterval(this.timer);
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
      }
    },
    methods: {
      makeJsonData() {
        let _features1 = []
        let _features2 = []

        for (let i = 0; i < this.listData.biViewInfoList.length; i++) {
          let _data = this.listData.biViewInfoList[i]
          let _coordinates1 = []
          let _coordinates11 = []
          let _position1 = _data.endPlace ? _data.endPlace.split(',') : []
          _coordinates1.push(Number(_position1[1]))
          _coordinates1.push(Number(_position1[0]))
          let _obj1 = {
            "type": "Feature",
            "properties": {
              "type": i,
            },
            "geometry": {
              "type": "Point",
              "coordinates": _coordinates1
            }
          }
          let _position11 = _data.startPlace ? _data.startPlace.split(',') : []
          _coordinates11.push(Number(_position11[1]))
          _coordinates11.push(Number(_position11[0]))
          let _obj11 = {
            "type": "Feature",
            "properties": {
              "type": i,
            },
            "geometry": {
              "type": "Point",
              "coordinates": _coordinates11
            }
          }


          _features1.push(_obj1)
          _features1.push(_obj11)
          let _coordinates2 = []
          let _start = []
          let _end = []
          let _marker = {}
          let _positionStart = _data.startPlace ? _data.startPlace.split(',') : []
          _start.push(Number(_positionStart[1]))

          _start.push(Number(_positionStart[0]))
          let _positionEnd = _data.endPlace ? _data.endPlace.split(',') : []
          _end.push(Number(_positionEnd[1]))
          _end.push(Number(_positionEnd[0]))
          _coordinates2.push(_start)
          _coordinates2.push(_end)
          _marker.iconSrc = _start
          _marker.name = _data.name
          this.markerList.push(_marker)
          let _obj2 = {
            "type": "Feature",
            "properties": {

            },
            "geometry": {
              "type": "LineString",
              "coordinates": _coordinates2
            }
          }
          _features2.push(_obj2)
        }
        this.mapPointData = {
          "type": "FeatureCollection",
          "features": _features1
        }
        this.mapLineData = {
          "type": "FeatureCollection",
          "features": _features2
        }
        console.log("this.mapPointData", this.mapPointData)
        console.log("this.mapPointData", this.mapLineData)

      },
      loadmap(val) {
        var map = new AMap.Map('mapContainer', {
          zoom: 4.89,
          showLabel: true,
          viewMode: '3D',
          pitch: 0, //地圖仰角
          center: [122.122, 40.227],
          mapStyle: 'amap://styles/c0ed286f357b7f4c7312476637a7ab04',
          buildingAnimation: false,
          showIndoorMap: false,
        });

        var loca = new Loca.Container({
          map,
        });
        for (let i = 0; i < this.markerList.length; i++) {
          // 构造点标记
          if (this.markerList[i].iconSrc[0] && this.markerList[i].iconSrc[1]) {
            var marker = new AMap.Marker({
              position: this.markerList[i].iconSrc,
              anchor: 'bottom-center',
              icon: new AMap.Icon({
                image: 'data:image/png;base64,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',
                size: new AMap.Size(30, 30), //图标所处区域大小
                imageSize: new AMap.Size(30, 30) //图标大小
              }),
            });
            map.add(marker);
            marker.setLabel({
              offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
              content: "<div class = 'maker-item'>" + this.markerList[i].name + "</div>", //设置文本标注内容
              direction: 'right' //设置文本标注方位

            });
          }
        }
        // 定时刷新动画
        let _markerDom = document.getElementsByClassName('amap-marker')

        let _index = 0
        this.timer = setInterval(function() {
          _markerDom[_index].style.opacity = 1
          _markerDom[_index].style.transition = '2s'
          var elseLi = _markerDom;
          for (var i = 0; i < elseLi.length; i++) {
            if (elseLi[i] !== _markerDom[_index]) { //判断是否是ele节点，是否与触发事件的节点相同
              elseLi[i].style.opacity = 0
              _markerDom[_index].style.transition = '2s'
            }
          }
          _index++;
          if (_index == _markerDom.length) _index = 0
        }, 3000)


        // 呼吸点
        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',
          data: this.mapPointData
        });
        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',
          data: this.mapLineData
        });

        pulseLink.setSource(geo);
        pulseLink.setStyle({
          unit: 'meter',
          dash: [40000, 0, 40000, 0],
          lineWidth: function() {
            return [25000, 10000];
          },
          height: function(index, feat) {
            return feat.distance / 3 + 1000;
          },
          // altitude: 1000,
          smoothSteps: 50,
          speed: function(index, prop) {
            return 1000 + Math.random() * 300000;
          },
          flowLength: 200000,
          lineColors: function(index, feat) {
            return ['#ebf0f700'];
          },
          maxHeightScale: 0.3, // 弧顶位置比例
          headColor: 'rgb(36, 131, 255)',
          trailColor: 'rgba(255, 255,0,0)',
        });
        loca.add(pulseLink);
        loca.animate.start();
      }
    },
  }
</script>