弧线图

将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等

使用

数据

绘制弧线只需提供起始点坐标即可

  1. source(data, {
  2.   parser: {
  3.     type: 'csv',
  4.     x: 'lng1',
  5.     y: 'lat1',
  6.     x1: 'lng2',
  7.     y1: 'lat2',
  8.   },
  9. });

shape

弧线支持两种弧线算法

  • arc 绘制弧线 通过贝塞尔曲线算法技术弧线
  • greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
  • arc3d 3d 弧线地图 3D 视角

animate

开启关闭动画

  1. layer.animate(true);
  2. layer.animate(false);

设置动画参数

  • duration 动画时间 单位(s)秒
  • interval 轨迹间隔, 取值区间 0 - 1
  • trailLength 轨迹长度 取值区间 0 - 1
  1. layer.animate({
  2.   duration: 4,
  3.   interval: 0.2,
  4.   trailLength: 0.1,
  5. });

示例代码

  1. const layer = new LineLayer({})
  2.   .source(data, {
  3.     parser: {
  4.       type: 'csv',
  5.       x: 'lng1',
  6.       y: 'lat1',
  7.       x1: 'lng2',
  8.       y1: 'lat2',
  9.     },
  10.   })
  11.   .size(1)
  12.   .shape('arc')
  13.   .color('#8C1EB2')
  14.   .style({
  15.     opacity: 0.8,
  16.   });