mirror of https://gitee.com/antv-l7/antv-l7
docs: 新增线图层的箭头文档
This commit is contained in:
parent
e387ffcd6e
commit
ade88c0960
|
@ -57,6 +57,35 @@ layer.size('height', []);
|
|||
|
||||
[在线案例](/zh/examples/line/isoline#ele)
|
||||
|
||||
#### arrow: IArrowOption
|
||||
|
||||
线图层支持配置箭头
|
||||
|
||||
```javascript
|
||||
// 配置箭头 IArrowOption
|
||||
layer.style({
|
||||
arrow: {
|
||||
enable: true, // 是否开启箭头、默认为 false
|
||||
arrowWidth: 2, // 箭头的宽度、默认值为 2、与线的 size 相关
|
||||
arrowHeight: 3, // 箭头的高度、默认值为 3、与线的 size 相关
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
[在线案例](/zh/examples/line/path#arrow)
|
||||
|
||||
<img width="40%" style="display: block;margin: 0 auto;" alt="参数" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bjjnQp7ZESoAAAAAAAAAAAAAARQnAQ'/>
|
||||
|
||||
|
||||
为了构造箭头,我们会在处理数据的时候插入多余的节点用于构造节点(为了不增加额外的消耗,普通线不会进行插入操作)。
|
||||
|
||||
<img width="40%" style="display: block;margin: 0 auto;" alt="原理" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FL4mT4RCfIgAAAAAAAAAAAAAARQnAQ'/>
|
||||
|
||||
如上图所示,对于配置箭头的线,我们插入额外的顶点用于构建箭头,同时我们会在顶点着色器中对新插入的顶点以及原有的顶点进行一定的偏移,让构建我们需要的箭头形状。
|
||||
|
||||
✨ 由于线图层在配置箭头/不配置箭头的这两种情况对顶点的处理不同,因此我们在切换这两种情况的时候需要重构线图层对象。
|
||||
|
||||
|
||||
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
|
Loading…
Reference in New Issue