概述

ECharts是开源的可视化图表库，其中有丰富的图表。本文使用Mapbox结合ECharts插件实现了简单的迁徙地图。

预览效果

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>mapbox + echarts （简单迁徙图）</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script src="./EchartsLayer.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
</style>
</head>

<body>
  <div id="map"></div>
  <script>
    mapboxgl.accessToken = 'your accessToken';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v10',
      center: [119.2070396626, 26.0471838188],
      minZoom: 12,
      zoom: 14
    });

    var geoCoordMap = {
      "1": [119.2070396626, 26.0471838188],
      "2": [119.2147498638, 26.0481609598],
      "3": [119.209339, 26.038355],
      "4": [119.2163806469, 26.0442086921],
    };
    var oneData = [
      [{
        name: "1"
      },
      {
        name: "2",
        value: 20
      }
      ],
      [{
        name: "1"
      },
      {
        name: "3",
        value: 20
      }
      ],
      [{
        name: "1"
      },
      {
        name: "4",
        value: 20
      }
      ]
    ];

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[1].name];
        var toCoord = geoCoordMap[dataItem[0].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[1].name,
            toName: dataItem[0].name,
            coords: [fromCoord, toCoord]
          });
        }
      }
      return res;
    };

    var series = [];
    [
      ["1", oneData],
    ].forEach(function (
      item,
      i
) {
      series.push({
        name: 'geolines',
        type: "lines",
        coordinateSystem: "GLMap",
        zlevel: 1,
        effect: {
          show: true,
          period: 4,
          trailLength: 0.8,
          color: '#f00',
          symbolSize: 4
        },
        lineStyle: {
          normal: {
            color: 'rgba(34, 181, 230, 0.15)',
            width: 0.5,
            opacity: 0.4,
            curveness: 0.2
          }
        },
        data: convertData(item[1])
      });
    });

    var option = {
      GLMap: {
        roam: true
      },
      coordinateSystem: 'GLMap',
      //series是在地图上的线条等效果的配置文件，具体可以查阅文档。
      series: series
    };

    map.on('load', () => {
      var echartslayer = new EchartsLayer(map);
      echartslayer.chart.setOption(option);
    })
</script>

</body>

</html>

说明

代码中引入的EChartsLayer.js文件，源于超图的共享，稍后会把链接放在文末。
本文只是实现了简单的迁徙图，复杂的样式可以参考ECharts Gallery或者超图的Demo。

[JavaScript知识库]Mapbox + ECharts 实现简单迁徙图

文章目录

概述

预览效果

实现代码

说明

相关链接