antv-l7/path.zh.md at cac3886d992b4b253d0efcf993234f8dfb7ebc51

1.6 KiB

Raw Blame History

title	order
路径图	1

markdown:docs/common/style.md 用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等

使用

shape

shape 设置成 line 即可绘制路线图

line

size

路径图线的 size 支持两个维度

width 宽度
height 高度

layer.size([2, 10]); // 绘制宽度为2，高度为10的路径

layer.size('height', []);

设置渐变色

线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高

const layer = new LineLayer({})
  .source(data, {
    parser: {
      type: 'csv',
      x: 'lng1',
      y: 'lat1',
      x1: 'lng2',
      y1: 'lat2',
    },
  })
  .size(1)
  .shape('arc')
  .color('#8C1EB2')
  .style({
    sourceColor: '#f00', // 起点颜色
    targetColor: '#0f0', // 终点颜色
  });

animate

开启关闭动画

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

设置动画参数

duration 动画时间单位(s)秒
interval 轨迹间隔, 取值区间 0 - 1
trailLength 轨迹长度取值区间 0 - 1

layer.animate({
  duration: 4,
  interval: 0.2,
  trailLength: 0.1,
});

参数动画介绍

L7 目前动画参数为相对单位，我们默认一条线段的长度为 1

如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。 markdown:docs/common/layer/base.md

1.6 KiB Raw Blame History Unescape Escape

使用