mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善官网文档
This commit is contained in:
shihui
parent
ea05b0ba9c
commit
2a9f824007
|
|
@ -9,6 +9,7 @@ order: 2
|
|||
|
||||
## 使用
|
||||
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
|
@ -17,6 +18,10 @@ import { LineLayer } from '@antv/l7';
|
|||
|
||||
[在线案例](../../../examples/line/animate#wind)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 arc 即可
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
|
@ -41,4 +46,6 @@ source(data, {
|
|||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -33,6 +33,10 @@ const layer = new LineLayer({})
|
|||
|
||||
[在线案例](../../../examples/gallery/basic#arcCircle)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 arc3d 即可
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
|
@ -53,4 +57,6 @@ source(data, {
|
|||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
### 线纹理
|
||||
|
||||
线图层支持纹理贴图，同时支持用户选择多种纹理表现形式
|
||||
|
||||
线纹理使用通过 scene.addImage 方法添加到全局的纹理资源，同时使用 texture 方法指定贴图
|
||||
|
||||
```javascript
|
||||
scene.addImage('02', 'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg');
|
||||
fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
const layer = new LineLayer()
|
||||
.source(data)
|
||||
.size(4)
|
||||
.shape('line')
|
||||
.texture('02')
|
||||
.color('#25d8b7')
|
||||
.animate({
|
||||
interval: 1, // 间隔
|
||||
duration: 1, // 持续时间，延时
|
||||
trailLength: 2 // 流线长度
|
||||
})
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 20 // 设置贴图纹理的间距
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
```
|
||||
|
||||
- lineTexture 指定是否开启纹理贴图能力
|
||||
- iconStep 指定贴图在线图层上面排布的间隔
|
||||
|
||||
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i2fJSJHpVGcAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/gallery/animate#animate_path_texture)
|
||||
|
||||
#### 高级用法
|
||||
|
||||
✨ animate
|
||||
当线图层 (shape 为 arc/arc3d) 开启动画模式的时候，纹理在线图层上的分布还会和 animate 的参数相关
|
||||
|
||||
线图层上排列的纹理的数量大致为 duration/interval
|
||||
|
||||
```javascript
|
||||
.animate({
|
||||
duration: 1,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1
|
||||
});
|
||||
|
||||
// 此时 纹理贴图数量为 duration / interval = 5
|
||||
```
|
||||
|
||||
✨ textureBlend 参数
|
||||
通过控制 style 方法中的 textureBlend 参数，我们可以控制纹理图层和线图层的混合情况
|
||||
|
||||
- normal
|
||||
- replace
|
||||
|
||||
```javascript
|
||||
.style({
|
||||
lineTexture: true, // 开启线的贴图功能
|
||||
iconStep: 30, // 设置贴图纹理的间距
|
||||
textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
[在线案例](../../../examples/gallery/animate#route_line)
|
||||
|
||||
|
|
@ -22,4 +22,4 @@ const layer = new LineLayer({})
|
|||
```
|
||||
<img width="450px" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i6d6SqQgjAwAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
[在线案例1](../../../examples/gallery/animate#route_line)
|
||||
[在线案例](../../../examples/gallery/animate#route_line)
|
||||
|
|
|
|||
|
|
@ -15,6 +15,12 @@ import { LineLayer } from '@antv/l7';
|
|||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/line/arc#arcCircle)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 greatcircle 即可
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
|
@ -31,10 +37,10 @@ source(data, {
|
|||
});
|
||||
```
|
||||
|
||||
`markdown:docs/api/lilne_layer/features/linear.zh.md`
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
[在线案例](../../../examples/gallery/basic#arcCircle)
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Line Height
|
||||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/arc.zh.md`
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
---
|
||||
title: 线高度
|
||||
order: 7
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
弧线支持三种弧线算法
|
||||
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
||||
- duration 动画时间 单位(s)秒
|
||||
- interval 轨迹间隔, 取值区间 0 - 1
|
||||
- trailLength 轨迹长度 取值区间 0 - 1
|
||||
|
||||
```javascript
|
||||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
||||
### arc style 额外参数控制
|
||||
|
||||
在 arc 弧线的 style 方法中支持有额外的参数，可以对弧线样式进行更细微的调整。
|
||||
|
||||
#### segmentNumber 弧线分段数
|
||||
|
||||
arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
segmentNumber: 15,
|
||||
});
|
||||
```
|
||||
|
||||
#### thetaOffset 弧度参数
|
||||
|
||||
thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
thetaOffset: 0.35,
|
||||
});
|
||||
```
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
### 设置渐变色
|
||||
|
||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高。
|
||||
|
||||
```javascript
|
||||
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', // 终点颜色
|
||||
});
|
||||
```
|
||||
|
||||
### demo 示例
|
||||
|
||||
[弧线 demo](../../../examples/gallery/basic#arcCircle)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
@ -82,6 +82,8 @@ lineLayer.size([1, 2]); // 宽度为1，高度2
|
|||
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
[在线案例](../../../examples/line/isoline#height)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ order: 1
|
|||
|
||||
## 使用
|
||||
|
||||
```javascript
|
||||
import { LineLayer } from '@antv/l7';
|
||||
```
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VJX5Qo7ufaAAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
[在线案例](../../../examples/gallery/animate#animate_path)
|
||||
|
||||
### shape
|
||||
|
||||
shape 设置成 line 即可绘制路线图
|
||||
|
|
@ -27,57 +35,16 @@ layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
|
|||
layer.size('height', []);
|
||||
```
|
||||
|
||||
### 设置渐变色
|
||||
✨ 当用户在传入数据的第三个值可以用于表示当前点的高度
|
||||
|
||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
|
||||
`markdown:docs/api/line_layer/features/vertexHeight.zh.md`
|
||||
|
||||
```javascript
|
||||
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', // 终点颜色
|
||||
});
|
||||
```
|
||||
[在线案例](../../../examples/line/isoline#height)
|
||||
|
||||
### animate
|
||||
`markdown:docs/api/line_layer/features/linear.zh.md`
|
||||
|
||||
#### 开启关闭动画
|
||||
`markdown:docs/api/line_layer/features/animate.zh.md`
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
`markdown:docs/api/line_layer/features/texture.zh.md`
|
||||
|
||||
#### 设置动画参数
|
||||
|
||||
- duration 动画时间 单位(s)秒
|
||||
- interval 轨迹间隔, 取值区间 0 - 1
|
||||
- trailLength 轨迹长度 取值区间 0 - 1
|
||||
|
||||
```javascript
|
||||
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 +0,0 @@
|
|||
---
|
||||
title: Texture Line Layer
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/texture.zh.md`
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
---
|
||||
title: 线纹理贴图
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
## 使用
|
||||
|
||||
### 数据
|
||||
|
||||
绘制弧线只需提供起止点坐标即可（起止点调换位置，弧线的形状会对称相反，飞线动画的方向也会相反）
|
||||
|
||||
```javascript
|
||||
source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### shape
|
||||
|
||||
弧线支持三种弧线算法
|
||||
|
||||
- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
|
||||
- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
|
||||
- arc3d 3d 弧线地图 3D 视角
|
||||
|
||||
### animate
|
||||
|
||||
#### 开启关闭动画
|
||||
|
||||
```javascript
|
||||
layer.animate(true);
|
||||
layer.animate(false);
|
||||
```
|
||||
|
||||
#### 设置动画参数
|
||||
|
||||
- duration 动画时间 单位(s)秒
|
||||
- interval 轨迹间隔, 取值区间 0 - 1
|
||||
- trailLength 轨迹长度 取值区间 0 - 1
|
||||
|
||||
```javascript
|
||||
layer.animate({
|
||||
duration: 4,
|
||||
interval: 0.2,
|
||||
trailLength: 0.1,
|
||||
});
|
||||
```
|
||||
|
||||
##### 参数动画介绍
|
||||
|
||||
L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
||||
|
||||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
||||
### arc style 额外参数控制
|
||||
|
||||
在 arc 弧线的 style 方法中支持有额外的参数，可以对弧线样式进行更细微的调整。
|
||||
|
||||
#### segmentNumber 弧线分段数
|
||||
|
||||
arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
segmentNumber: 15,
|
||||
});
|
||||
```
|
||||
|
||||
#### thetaOffset 弧度参数
|
||||
|
||||
thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
thetaOffset: 0.35,
|
||||
});
|
||||
```
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
### 设置渐变色
|
||||
|
||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高。
|
||||
|
||||
```javascript
|
||||
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', // 终点颜色
|
||||
});
|
||||
```
|
||||
|
||||
### demo 示例
|
||||
|
||||
[弧线 demo](../../../examples/gallery/basic#arcCircle)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
Loading…
Reference in New Issue