echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行

先看看效果图, 如果是你的菜 请往下看.

html 代码

<template>
    <div id="chineView"></div>
</template>

js代码:
这边注意的话是 world.json文件需要自己在网上资料下载一下.

<script>
import * as echarts from 'echarts/core';
import {use} from 'echarts/core';
import { GeoComponent} from 'echarts/components';
import {CanvasRenderer} from 'echarts/renderers';
import { LinesChart, EffectScatterChart } from 'echarts/charts';
use([CanvasRenderer,GeoComponent,LinesChart,EffectScatterChart]);

import datajson from '../assets/world.json';

echarts.registerMap('world',datajson);
var trackData = [
  //这是两地的数据
  [
    {
      name: '北京',
    },
    {
      name: '莫斯科',
      icon: 'img_mosike.png',
    },
  ],
  [
    {
      name: '北京',
    },
    {
      name: '重庆',
      icon: '',
    },
  ],
  [
    {
      name: '北京',
    },
    {
      name: '香港',
      icon: '',
    },
  ],
  [
    {
      name: '北京',
    },
    {
      name: '上海',
      icon: '',
    },
  ],
];

var geoCoordMap = {
  //地理坐标
  北京: [116.4551, 40.2539],
  莫斯科: [37.623638, 55.752055],
  重庆: [106.644156, 29.72263],
  香港: [113.945136, 22.317638],
  上海: [121.813481, 31.156682],
};
export default {
    name:'',
    data(){
        return{
            planePath:
                'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
            chineView: {
                backgroundColor: 'transparent',
                geo: {
                map: 'world',
                zoom: 1.3,
                label: {
                    emphasis: {
                    show: false,
                    },
                },
                roam: true,
                itemStyle: {
                    areaColor: '#16213e',
                    borderColor: '#5b66a1',
                    emphasis: {
                    areaColor: '#2a333d',
                    },
                },
                regions: [
                    {
                    name: 'China',
                    itemStyle: {
                        opacity: 0.4, // 透明度
                        borderColor: '#ffd591', // 省份颜色
                        borderWidth: 3, // 省份的宽度
                        areaColor: '#485377', // 省份的颜色
                    },
                    },
                ],
                },
            },
        }
    },
    methods: {
        //坐标转换
        coordinateData(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                });
                }
            }
            return res;
        },
    },
    mounted() {
        var series = [
        {
            name: 'china',
            type: 'lines',
            zlevel: 1,
            effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3,
            },
            lineStyle: {
            color: '#a6c84c',
            width: 0,
            curveness: 0.2,
            },
            data: this.coordinateData(trackData),
        },
        {
            name: 'track',
            type: 'lines',
            zlevel: 2,
            effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: this.planePath,
            symbolSize: 15,
            },
            lineStyle: {
              color: '#a6c84c',
              width: 1,
              opacity: 0.4,
              curveness: 0.2,
            },
            data: this.coordinateData(trackData),
        },
        {
            name: 'track',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke',
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
            },
            symbol: function (val) {
              return 'image://./imgs/countryIcon/' + val[2];
            },
            symbolSize: 15,
            itemStyle: {
              color: '#a6c84c',
            },
            data: trackData.map(function (dataItem) {
              return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([dataItem[1].icon]),
              };
            }),
        },
    ];

    this.chineView.series = series;
    this.myChart = echarts.init(document.getElementById('chineView'));
    this.myChart.setOption(this.chineView);
  },
}
</script>

world.json文件内容 前面的内容我截图出来 大该也差不多是这样子了:

我也尝试过复制过来, 实在太长了 有18633代码.

具体的版本我也贴出来, 以便后续怕有些版本实现不出来 .

"echarts": "^5.3.3",

如果能帮助到你的, 麻烦点个赞 . 谢谢!

学到的就要教人，赚到的就要给人。