vue+echarts實現地圖及飛線圖

參考：

1.Echarts畫區域飛線地圖 https://blog.csdn.net/Daylighte/article/details/122502754?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-122502754-blog-122918939.235^v43^control&spm=1001.2101.3001.4242.2&utm_relevant_index=4

2.高德地圖和Echarts共同實現飛線圖 https://blog.csdn.net/m0_58293192/article/details/128723528

效果：

map.vue

<template>
  <div class="mapFlyLine" ref="mapFlyLine"></div>
</template>

<script>
const echarts = require('echarts');
const chinaData = require('./china.json');

export default {
  data() {
    return {
      chart: null,
      centerCitys: [], // 總公司
      aroundCitys: [], // 子公司
      linesArr: [], // 飛線
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      this.centerCitys = [];
      this.aroundCitys = [];
      this.linesArr = [];
      // 中心點顏色，長度要與返回資料的總公司數一致
      const colorArr = ['#9BE6FF', '#F87B8F', '#7D82FD'];
      // 模擬資料
      const mockData = [
        {
          companyName: '公司A',
          provinceName: '內蒙古自治區',
          child: [
            {
              name: '子公司A1',
              coordiante: [113.625351, 34.746303],
            },
            {
              name: '子公司A2',
              coordiante: [103.834228, 36.060798],
            },
          ],
          coordiante: [113.186291, 42.646075],
        },
        {
          companyName: '公司B',
          provinceName: '新疆維吾爾自治區',
          child: [
            {
              name: '子公司B1',
              coordiante: [102.771252, 30.159369],
            },
          ],
          coordiante: [87.628579, 43.793301],
        },
        {
          companyName: '公司C',
          provinceName: '雲南省',
          child: [
            {
              name: '子公司C1',
              coordiante: [93.762463, 30.102358],
            },
            {
              name: '子公司C2',
              coordiante: [109.494885, 24.081566],
            },
          ],

          coordiante: [101.716564, 24.761788],
        },
      ];

      mockData.forEach((center, index) => {
        this.centerCitys.push({
          name: center.companyName,
          value: center.coordiante,
          provinceName: center.provinceName,
          itemStyle: {
            color: colorArr[index],
            border: '2px solid #FFFFFF',
          },
          label: {
            show: true,
            formatter: center.companyName,
            position: 'top',
            padding: [0, 10],
            height: 30,
            lineHeight: 30,
            borderRadius: 5,
            textStyle: {
              fontSize: 14,
              fontWeight: 600,
              color: '#05092C',
            },
            backgroundColor: colorArr[index],
          },
        });
        center.child.forEach(child => {
          this.aroundCitys.push({
            name: child.name,
            value: child.coordiante,
            itemStyle: {
              color: colorArr[index],
            },
          });

          this.linesArr.push({
            name: `${child.name}-${center.companyName}`,
            coords: [center.coordiante, child.coordiante],
            // 線特效的配置
            effect: {
              color: colorArr[index],
            },
            lineStyle: {
              normal: {
                width: 1.2,
                curveness: 0.3,
                color: colorArr[index],
              },
              opacity: 0.3,
            },
          });
        });
      });
      this.chart = echarts.init(this.$refs.mapFlyLine);
      echarts.registerMap('china', chinaData);
      this.chart.setOption(this.getOption());
    },
    getOption() {
      const regions = chinaData.features.map(item => {
        const { name } = item.properties;
        let areaColor = '#1C1E57';
        // 中心點所在省份設定特殊背景色
        const centerCityNameArr = this.centerCitys.map(item => {
          return item.provinceName;
        });
        if (centerCityNameArr.includes(name)) {
          areaColor = '#242874';
        }
        return {
          name: name,
          itemStyle: {
            normal: {
              areaColor: areaColor,
              borderColor: '#0E1037',
            },
          },
        };
      });
      const option = {
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          top: '0',
          containLabel: true,
        },
        // 地理座標系元件
        geo: {
          map: 'china',
          zlevel: 13,
          show: true,
          layoutCenter: ['50%', '50%'],
          roam: true, // 是否開啟滑鼠縮放和平移漫遊，只開啟單個時，設定'scale' 或者 'move'
          layoutSize: '90%',
          zoom: 1.4, // 當前視角的縮放比例
          // 在地圖中對特定的區域配置樣式
          regions: regions,
          itemStyle: {
            normal: {
              color: 'rgba(28, 30, 87, 1)',
              borderWidth: 2,
              borderColor: 'rgba(125, 130, 253, 1)',
            },
          },
          emphasis: {
            disabled: true,
          },
        },
        series: [
          // 總公司
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 15,
            symbolSize: 16,
            // 漣漪特效相關配置
            rippleEffect: {
              period: 6, // 動畫的週期，秒數
              num: 3, // 波紋的數量
              brushType: 'fill', // 波紋的繪製方式，可選 'stroke' 和 'fill'
              scale: 3, // 動畫中波紋的最大縮放比例
            },
            data: this.centerCitys,
          },
          // 子公司
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 15,
            symbolSize: 4,
            label: {
              show: true,
              formatter: params => params.name,
              position: 'bottom',
              textStyle: {
                fontSize: 12,
                color: '#43D0D6',
              },
            },
            data: this.aroundCitys,
          },
          // 飛線
          {
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 15,
            // 線特效的配置
            effect: {
              show: true,
              period: 2, // 控制流星的速度，數字越小越快
              trailLength: 0.2, // 控制流星尾巴的長度，範圍為0-1
              symbol: 'pin', // 尾巴形狀，也可以設定成其他符號
              symbolSize: 10, // 尾巴大小
            },
            data: this.linesArr,
          },
          {
            type: 'map',
            mapType: 'china',
            zlevel: 12,
            layoutCenter: ['50%', '50%'],
            roam: false, // 'scale' 或者 'move'
            layoutSize: '90%',
            zoom: 1.4,
            data: [], // 空資料，不顯示其他區域，只顯示中國輪廓
            itemStyle: {
              normal: {
                borderColor: 'rgba(125, 130, 253, 1)', // 高亮邊框顏色
                borderWidth: 5, // 高亮邊框寬度
              },
            },
          },
        ],
      };
      return option;
    },
  },
};
</script>
<style lang="less" scoped>
.mapFlyLine {
  height: 584px;
}
</style>

china.json檔案，可以去datav官網下載：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json