echarts 飞线、轨迹图与地方地图联动

最新推荐文章于 2026-04-13 11:08:55 发布

原创最新推荐文章于 2026-04-13 11:08:55 发布 · 2.8k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

阿嘉Jared

关注

标签

#echarts #javascript #ecmascript

分类前端开发

webgl 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用ECharts库通过geoIndex将地图系列（map）和飞线系列（lines）的坐标系统绑定，以实现实时联动效果。重点在于配置项中geo和visualMap的设置，适用于深圳地图的实例配置，并提到了所需依赖的npm包版本。

首先展示一下需要实现的效果，利用两个坐标点数据，实现飞线，与地图的坐标进行联动。
在这里插入图片描述

在实现这块功能时，两个坐标体系的联动是难点。

其中地图的series type是：map，
另一个飞线的 series 是：lines。

核心就是建立一个 geo，讲两套体系的坐标绑定在一个geo上面。下面是具体echarts options配置代码和解释。

// 处理出来多处使用的配置
const commonOps = {
  zoom: 1,
  roam: true,
  center: [114.0520278, 22.7415555],
  silent: true,
  label: {
    normal: {
      show: true,
      textStyle: {
        color: '#fff',
      },
    },
    emphasis: {
      textStyle: {
        color: '#fff',
      },
    },
  },
  itemStyle: {
    normal: {
      borderColor: 'rgb(147, 235, 248)',
      borderWidth: 1,
      areaColor: {
        type: 'radial',
        x: 0.5,
        y: 0.5,
        r: 0.8,
        colorStops: [
          {
            offset: 0,
            color: '#09132c',
          },
          {
            offset: 1,
            color: '#274d68',
          },
        ],
        globalCoord: true,
      },
    },
    emphasis: {
      disabled: true,
      areaColor: '#3982CB',
      borderWidth: 1,
      borderColor: '#FAD800',
    },
  },
  emphasis: {
    disabled: true,
    areaColor: '#3982CB',
    borderWidth: 1,
    borderColor: '#FAD800',
  },
};
const option = {
  title: {
    top: '5%',
    text: '深圳市',
    subtext: '',
    x: 'center',
    textStyle: {
      color: '#ccc',
    },
  },
  // 建立 lines需要的虚拟地图
  visualMap: {
    left: 'right',
    min: 10000,
    max: 1000000,
    show: true,
    inRange: {
      color: ['#1F5387', '#3982CB', '#44A2FF'],
    },
    text: ['High', 'Low'],
    calculable: true,
  },
  // 建立连接的核心，通过geoIndex 将两套 坐标系统一起来
  geo: {
    map: 'shenzhen',
    geoIndex: 0,
    region: [
      {
        name: 'shenzhen',
      },
    ],
    roam: true,
    ...commonOps,
  },
  series: [
    {
      type: 'map',
      geoIndex: 0,  // 指定geo 坐标系建立连接

      map: 'shenzhen', // 使用
      ...commonOps,
    },
    {
      type: 'lines',
      zlevel: 2,
      polyline: false,
      effect: {
        color: '#FFF',
        show: true,
        period: 6, // 箭头指向速度，值越小速度越快
        trailLength: 0.01, // 特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', // 箭头图标
        symbolSize: 2, // 图标大小
      },
      lineStyle: {
        color: '#FBD46B',
        normal: {
          color: '#FBD46B',
          width: 2, // 线条宽度
          opacity: 0.1, // 尾迹线条透明度
          curveness: 0.4, // 尾迹线条曲直度
        },
      },
      data: [],
    },
  ],
};

export default option;

以上完成了 echarts配置以后参考官方demo 将数据路径传入 data属性就搞定了。
https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect

以上需要依赖的npm有,请参考使用。

    "echarts": "^5.3.2",
    "echarts-gl": "^2.0.9",