地图飞线图 echart+高德地图实现

前提：其实这个东西已经做了很久了，但是因为昨天他突然不显示了，所以重新整了一下

实现效果：

 

一、引入echart的两个js和高德地图

<!-- 引入echarts -->
<script src="./static/js/echarts.min.js"></script>
<script src="./static/js/echarts-amap.min.js" charset="UTF-8"></script>
<!-- 高德地图 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ba9dba403f2bfb4acdb29180a3e75aaf&&plugin=AMap.ToolBar,AMap.Geocoder,AMap.CustomLayer,AMap.ControlBar"></script>

PS：之前我是不需要引入echarts-amap.min.js就可以显示地图的，后面需要引入echarts-amap.min.js

二、组件

<template>
  <div class="box-daping">
    <div
      ref="map"
      id="map"
      v-loading="loading"
      element-loading-text="正在加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
  </div>
</template>

<script>
import AMap from 'AMap'
import jwd from '@/utils/jwd'
import echarts from 'echarts'
export default {
  data() {
    return {
      finishFlyLine: [
      ],
      nowFlyLine: [],
      undoFlyLine: [],
      goals: [
      ],
      goalsName: [
      ],
      infoWindow: null
    }
  },
  mounted() {},
  methods: {
    getDapingRouterList() { // 获取后台坐标点
      const time = this.$refs.leftContent.dateRange
      const info = {
        rwwczt: this.rwwczt,
      }
      if (this.infoWindow) {
        this.infoWindow.close()
        this.infoWindow = null
      }
      getDapingRouterList(info).then(result => {
        this.finishFlyLine = [] // 已完成
        this.goals = []
        this.goalsName = []

        result.data.forEach(element => {
          if (element.mddjd) {
            const flyLine = {
              coords: [
                [element.jd, element.wd],
                [element.mddjd, element.mddwd]
              ],
              info: {
                id: element.id,
                xm: element.sjyyryxxList[0].xm,
                adminArea: element.adminArea,
                cph: element.sjclxxEntity.cph,
                cfddz: element.cfddz,
                mdddz: element.mdddz,
                startTime: element.RWKSSJ,
                rwwczt: element.rwwczt
              }
            }
            const rwwczt = element.rwwczt ? element.rwwczt : this.rwwczt
            switch (rwwczt) {
              case '1':
                this.finishFlyLine.push(flyLine)
                break
            }

            this.goals.push({
              ...flyLine,
              value: [element.mddjd, element.mddwd]
            })
            this.goalsName.push(element.adminArea)
          }
        })
        this.mapInit()
        this.loading = false
      })
    },
    mapInit() { // 绘制飞线图
      const _this = this
      const areaNum =
        this.$store.state.user.department.addressCode.substring(0, 2) + '0000'
      const option = {
        // 加载 amap 组件
        amap: {
          // 高德地图中心经纬度
          center: jwd[areaNum],
          viewMode: '3D', // 加这个才可以有点击事件 开启3D视图,默认为关闭
          // 高德地图缩放
          zoom: 7,
          // 启用resize
          resizeEnable: true,
          // 自定义地图样式主题
          mapStyle: 'amap://styles/darkblue' // 地图主题
          // expandZoomRange:true,
          // zooms:[3,20],
          // pitch: 40
        },
        tooltip: {
          trigger: 'item',
          show: false
        },
        animation: false,
        series: [
          // 流线
          {
            // 已完成
            coordinateSystem: 'amap', // 该系列使用的坐标系是高德地图的坐标系
            type: 'lines', // 该类型用于地图上路线的绘制
            zlevel: 1, // 相当于z-index
            lineStyle: {
              normal: {
                color: function(params) {
                  // var colorList = ['#62d61c', '#62d61c', '#d62321', '#f1e913', '#ccc']
                  return '#62d61c'
                },
                width: 2.5,
                curveness: 0.2
              }
            },
            data: _this.finishFlyLine
          },
          // 目标点
          {
            name: '目标点',
            type: 'effectScatter',
            zlevel: 2,
            // 使用高德地图坐标系
            coordinateSystem: 'amap',
            // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
            data: _this.goals,
            symbolSize: 12,
            symbol: 'circle',
            rippleEffect: {
              period: 100,
              brushType: 'stroke',
              scale: 2.5
            },
            encode: {
              value: 2
            },
            label: {
              normal: {
                formatter: function(value) {
                  if (_this.goalsName[value.dataIndex] === '广州') {
                    return ''
                  } else {
                    return _this.goalsName[value.dataIndex]
                  }
                },
                position: 'top',
                color: '#00f7fe',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#00f7fe'
              }
            }
          }
        ]
      }
      const chart = echarts.init(_this.$refs.map)
      chart.setOption(option)
      chart.on('click', function(params) { // echart点击事件
        var map = chart
          .getModel()
          .getComponent('amap')
          .getAMap()
        const data = params.data.info
        _this.infoWindow = new AMap.InfoWindow({
          content:
            `<div>人员：${data.xm}<div>` +
            `<div>所属单位：${data.xm}<div>` +
            `<div>车辆：${data.cph}<div>` +
            `<div>出发地：${data.cfddz}<div>` +
            `<div>目的地：${data.mdddz}<div>` +
            `<div>开始时间：${data.startTime}<div>` +
            `<div class="to-link" id="toLink" data-id="${data.id}" data-zt="${data.rwwczt}">查看详情 >><div>`
        })
        _this.infoWindow.open(map, params.data.coords[1])
        setTimeout(() => {
          document.getElementById('toLink').onclick = function(e) {
            const id = document.getElementById('toLink').getAttribute('data-id')
            const rwwczt = document
              .getElementById('toLink')
              .getAttribute('data-zt')
            _this.toLink(rwwczt, id)
          }
        }, 1000)
      })
    },
  }
}
</script>

PS：之前不加viewMode: '3D'这个属性是可以点击echarts，后面突然就不可以了，加上了才可以