现在应该如何使用LineLayer绘制若干个箭头？

[S-TE11A]

问题描述

希望使用LineLayer绘制出上述效果，尝试过以下方案：

1. 使用flowline，flowline是双向箭头 无法实现单向
2. 之前LineLayer.style 有arrow选项， 但是现在似乎已经废弃 请问应该如何实现上述效果？

重现链接

No response

重现步骤

No response

预期行为

No response

平台

No response

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions[bot]]

hi @SyraTi, welcome!

[github-actions[bot]]

Hi @SyraTi, Please star this repo if you find it useful! Thanks :star:! 你好 @SyraTi。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!

[lzxue]

flowline 单双方向都支持

[lzxue]

import { Scene, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    pitch: 60,
    style: 'dark',
    center: [ 104.34278, 41.12554 ],
    zoom: 2.94888,
    rotation: 42.3999
  })
});
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/e495c407-953b-44cc-8f77-87b9cf257578.json')
    .then(res => res.json())
    .then(data => {
      const layer = new LineLayer({})
        .source(data, {
          parser: {
            type: 'json',
            x: 'from_lon',
            y: 'from_lat',
            x1: 'to_lon',
            y1: 'to_lat'
          }
        })
        .size(5)
        .shape('flowline')
        .color('#FF7C6A')
        .style({
          opacity: 0.8,
          symbol:{
                target:'classic',
                source:'none',
              },
        });
      scene.addLayer(layer);
    });
});

测试了一下，效果再优化一下

[S-TE11A]

import { Scene, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    pitch: 60,
    style: 'dark',
    center: [ 104.34278, 41.12554 ],
    zoom: 2.94888,
    rotation: 42.3999
  })
});
scene.on('loaded', () => {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/e495c407-953b-44cc-8f77-87b9cf257578.json')
    .then(res => res.json())
    .then(data => {
      const layer = new LineLayer({})
        .source(data, {
          parser: {
            type: 'json',
            x: 'from_lon',
            y: 'from_lat',
            x1: 'to_lon',
            y1: 'to_lat'
          }
        })
        .size(5)
        .shape('flowline')
        .color('#FF7C6A')
        .style({
          opacity: 0.8,
          symbol:{
                target:'classic',
                source:'none',
              },
        });
      scene.addLayer(layer);
    });
});

测试了一下，效果再优化一下

好的，感谢，另外想问一下关于symbol的文档，似乎没有在官网看到？ 是flowline的文档还没有完善吗？

[S-TE11A]

另外想请问下symbol从哪个版本开始支持？

[S-TE11A]

这些箭头的效果似乎也有些问题, 有配置可以修正吗 @lzxue

[lzxue]

这些箭头的效果似乎也有些问题, 有配置可以修正吗 @lzxue

最新版本已经修复了，你看一下