diff --git a/docs/api/line_layer/arc.zh.md b/docs/api/line_layer/arc.zh.md index 556a7c04b6..a9e8dceb9a 100644 --- a/docs/api/line_layer/arc.zh.md +++ b/docs/api/line_layer/arc.zh.md @@ -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` diff --git a/docs/api/line_layer/arc3d.zh.md b/docs/api/line_layer/arc3d.zh.md index 19f6cbc8f1..d7d3251a18 100644 --- a/docs/api/line_layer/arc3d.zh.md +++ b/docs/api/line_layer/arc3d.zh.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` diff --git a/docs/api/line_layer/features/texture.zh.md b/docs/api/line_layer/features/texture.zh.md new file mode 100644 index 0000000000..8433a08c39 --- /dev/null +++ b/docs/api/line_layer/features/texture.zh.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 指定贴图在线图层上面排布的间隔 + +案例 + +[在线案例](../../../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) + diff --git a/docs/api/line_layer/features/thetaOffset.zh.md b/docs/api/line_layer/features/thetaOffset.zh.md index 28ba43a6c5..c42ce3b326 100644 --- a/docs/api/line_layer/features/thetaOffset.zh.md +++ b/docs/api/line_layer/features/thetaOffset.zh.md @@ -22,4 +22,4 @@ const layer = new LineLayer({}) ``` 案例 -[在线案例1](../../../examples/gallery/animate#route_line) +[在线案例](../../../examples/gallery/animate#route_line) diff --git a/docs/api/line_layer/greatLine.zh.md b/docs/api/line_layer/greatLine.zh.md index 0f16122db3..da021b33c0 100644 --- a/docs/api/line_layer/greatLine.zh.md +++ b/docs/api/line_layer/greatLine.zh.md @@ -15,6 +15,12 @@ import { LineLayer } from '@antv/l7'; 案例 +[在线案例](../../../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` diff --git a/docs/api/line_layer/height.en.md b/docs/api/line_layer/height.en.md deleted file mode 100644 index b9fa66f7bd..0000000000 --- a/docs/api/line_layer/height.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Line Height -order: 7 ---- - -`markdown:docs/api/line_layer/arc.zh.md` diff --git a/docs/api/line_layer/height.zh.md b/docs/api/line_layer/height.zh.md deleted file mode 100644 index bc98122c85..0000000000 --- a/docs/api/line_layer/height.zh.md +++ /dev/null @@ -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 -![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) - -如果 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` diff --git a/docs/api/line_layer/linelayer.zh.md b/docs/api/line_layer/linelayer.zh.md index af6a4d1756..a6a8fefcfc 100644 --- a/docs/api/line_layer/linelayer.zh.md +++ b/docs/api/line_layer/linelayer.zh.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` diff --git a/docs/api/line_layer/path.zh.md b/docs/api/line_layer/path.zh.md index 4d3a581f64..0099b6c086 100644 --- a/docs/api/line_layer/path.zh.md +++ b/docs/api/line_layer/path.zh.md @@ -8,6 +8,14 @@ order: 1 ## 使用 +```javascript +import { LineLayer } from '@antv/l7'; +``` + +案例 + +[在线案例](../../../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 -![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) - -如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。 `markdown:docs/common/layer/base.md` diff --git a/docs/api/line_layer/texture.en.md b/docs/api/line_layer/texture.en.md deleted file mode 100644 index 51b152a91d..0000000000 --- a/docs/api/line_layer/texture.en.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Texture Line Layer -order: 6 ---- - -`markdown:docs/api/line_layer/texture.zh.md` diff --git a/docs/api/line_layer/texture.zh.md b/docs/api/line_layer/texture.zh.md deleted file mode 100644 index 64ae275755..0000000000 --- a/docs/api/line_layer/texture.zh.md +++ /dev/null @@ -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 -![L7 动画参数](https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*IBBfSIkb51cAAAAAAAAAAABkARQnAQ) - -如果 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`