Echart基于百度地图实现地图飞线

忘是亡心i 2022-12-25 00:54 316阅读 0赞

echart社区例子都是基于geo底图实现的底图飞线，现实现基于在线地图实现地图飞线：

原例子[ECharts Gallery - 模拟迁徙+百度地图 (makeapie.com)][ECharts Gallery - _ _makeapie.com]

[利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。\_GiScript的博客-CSDN博客][ECharts3_ECharts2_GiScript_-CSDN]

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70][]

# 1.数据结构 #

data: [
           //多条飞线就多组数据
           {
            fromName: "北京",//飞线起点名字
            toName: "上海",//飞线终点名字
            coords:[
                    [116.4551, 40.2539],//飞线起点经纬度
                    [121.4648, 31.2891]//飞线终点经纬度
                    ]
            }
          ]

# 2.option配置 #

//地图中心点      
    var startPoint = {
            x: 104.114129,
            y: 37.550339
          };
    
    // 创建百度地图
    var bmap = {
      center: [startPoint.x, startPoint.y],
      zoom: 5,
      roam: true,
      mapStyleV2: {
      //设置地图自定义样式
         styleId: "1c9508432f1bd060b4485d79045d5bdd",
         },
      }
    
         //飞线图标
    var 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';
    
    var series = [
                    //飞线数据
                    {
                      name: 'wha Top2',
                      type: 'lines',
                      coordinateSystem: 'bmap',
                      zlevel: 2,
                      effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 15
                      },
                      lineStyle: {
                        normal: {
                          color: '#a6c84c',
                          width: 1,
                          opacity: 0.4,
                          curveness: 0.2
                        }
                      },
                      data: [{
                        fromName: "北京",
                        toName: "上海",
                        coords:[[116.4551, 40.2539],[121.4648, 31.2891]]
                      }]
                    }
                  ];
    option = {
            bmap: bmap,
            tooltip: {
              trigger: 'item'
            },
            series: series
          };
    myChart.setOption(option);

# 3.全部源码 #

申请key:[控制台 | 百度地图开放平台 (baidu.com)][_ _ _baidu.com]

<html xmlns="http://www.w3.org/1999/xhtml">
    
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>飞线</title>
        <style type="text/css">
          body {
            margin: 0;
            border: 0;
            overflow: hidden;
          }
          #map_canvas {
            width: 100%;
            height: 100%;
            position: absolute;
          }
        </style>
           
      </head>
    
      <body>
        <div id="container" style="height: 100%"></div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
        
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你申请的key"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
        <script>
          var dom = document.getElementById("container");
          var myChart = echarts.init(dom);
    
          var option=null;
    
          var startPoint = {
            x: 104.114129,
            y: 37.550339
          };
          // 地图
          var bmap = {
            center: [startPoint.x, startPoint.y],
            zoom: 5,
            roam: true,
            mapStyleV2: {
                //设置地图自定义样式
                styleId: "1c9508432f1bd060b4485d79045d5bdd",
              },
          }
    
         //飞线图标
          var 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';
    
          var series = [
                    //飞线数据
                    {
                      name: 'wha Top2',
                      type: 'lines',
                      coordinateSystem: 'bmap',
                      zlevel: 2,
                      effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 15
                      },
                      lineStyle: {
                        normal: {
                          color: '#a6c84c',
                          width: 1,
                          opacity: 0.4,
                          curveness: 0.2
                        }
                      },
                      data: [{
                        fromName: "北京",
                        toName: "上海",
                        coords:[[116.4551, 40.2539],[121.4648, 31.2891]]
                      }]
                    }
                  ];
          option = {
            bmap: bmap,
            tooltip: {
              trigger: 'item'
            },
            series: series
          };
          myChart.setOption(option);
    
    
        </script>
      </body>
    
    </html>

# 4.如果想改图标 #

可以去这里---->[ECharts Gallery - 150种legend-----图例 (makeapie.com)][ECharts Gallery - 150_legend-----_ _makeapie.com]

飞线样式也可以改

遇到什么问题，可留言，看到会尽快回复。

[ECharts Gallery - _ _makeapie.com]: https://www.makeapie.com/editor.html?c=xB1a5uJTR
[ECharts3_ECharts2_GiScript_-CSDN]: https://blog.csdn.net/giscript/article/details/52912739#
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70]: /images/20221120/a1c208ca5b254cdd848552ce3099f6f7.png
[_ _ _baidu.com]: http://lbsyun.baidu.com/apiconsole/key#/home
[ECharts Gallery - 150_legend-----_ _makeapie.com]: https://www.makeapie.com/editor.html?c=xH1x8o9Kfx