From ac6fc681b0a383d1f899faa8c39863e6bf2fad43 Mon Sep 17 00:00:00 2001 From: shihui Date: Wed, 5 Jan 2022 19:36:38 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=AE=8C=E5=96=84=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/api/line_layer/arc.en.md | 2 +- docs/api/line_layer/arc.zh.md | 2 +- docs/api/line_layer/arc3d.en.md | 6 + docs/api/line_layer/arc3d.zh.md | 164 ++++++++++++++++++++++++++++ docs/api/line_layer/greatLIne.en.md | 6 + docs/api/line_layer/greatLine.zh.md | 164 ++++++++++++++++++++++++++++ docs/api/line_layer/height.en.md | 6 + docs/api/line_layer/height.zh.md | 164 ++++++++++++++++++++++++++++ docs/api/line_layer/linelayer.zh.md | 5 +- docs/api/line_layer/texture.en.md | 6 + docs/api/line_layer/texture.zh.md | 164 ++++++++++++++++++++++++++++ docs/api/line_layer/wall.en.md | 6 + docs/api/line_layer/wall.zh.md | 164 ++++++++++++++++++++++++++++ docs/api/wind.zh.md | 1 + 14 files changed, 856 insertions(+), 4 deletions(-) create mode 100644 docs/api/line_layer/arc3d.en.md create mode 100644 docs/api/line_layer/arc3d.zh.md create mode 100644 docs/api/line_layer/greatLIne.en.md create mode 100644 docs/api/line_layer/greatLine.zh.md create mode 100644 docs/api/line_layer/height.en.md create mode 100644 docs/api/line_layer/height.zh.md create mode 100644 docs/api/line_layer/texture.en.md create mode 100644 docs/api/line_layer/texture.zh.md create mode 100644 docs/api/line_layer/wall.en.md create mode 100644 docs/api/line_layer/wall.zh.md diff --git a/docs/api/line_layer/arc.en.md b/docs/api/line_layer/arc.en.md index 3303cbdf76..05028ff59c 100644 --- a/docs/api/line_layer/arc.en.md +++ b/docs/api/line_layer/arc.en.md @@ -1,6 +1,6 @@ --- title: ArcLayer -order: 1 +order: 2 --- `markdown:docs/api/line_layer/arc.zh.md` diff --git a/docs/api/line_layer/arc.zh.md b/docs/api/line_layer/arc.zh.md index ff2ac6d494..dfae7d63c3 100644 --- a/docs/api/line_layer/arc.zh.md +++ b/docs/api/line_layer/arc.zh.md @@ -1,6 +1,6 @@ --- title: 弧线图 -order: 1 +order: 2 --- `markdown:docs/common/style.md` diff --git a/docs/api/line_layer/arc3d.en.md b/docs/api/line_layer/arc3d.en.md new file mode 100644 index 0000000000..043558a887 --- /dev/null +++ b/docs/api/line_layer/arc3d.en.md @@ -0,0 +1,6 @@ +--- +title: Arc 3D Layer +order: 3 +--- + +`markdown:docs/api/line_layer/arc3d.zh.md` diff --git a/docs/api/line_layer/arc3d.zh.md b/docs/api/line_layer/arc3d.zh.md new file mode 100644 index 0000000000..c1e668be2b --- /dev/null +++ b/docs/api/line_layer/arc3d.zh.md @@ -0,0 +1,164 @@ +--- +title: 3D弧线图 +order: 3 +--- + +`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/greatLIne.en.md b/docs/api/line_layer/greatLIne.en.md new file mode 100644 index 0000000000..7fd8b1165b --- /dev/null +++ b/docs/api/line_layer/greatLIne.en.md @@ -0,0 +1,6 @@ +--- +title: Great Arc Layer +order: 5 +--- + +`markdown:docs/api/line_layer/greatLine.zh.md` diff --git a/docs/api/line_layer/greatLine.zh.md b/docs/api/line_layer/greatLine.zh.md new file mode 100644 index 0000000000..f927af15b7 --- /dev/null +++ b/docs/api/line_layer/greatLine.zh.md @@ -0,0 +1,164 @@ +--- +title: 大圆弧线图 +order: 5 +--- + +`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/height.en.md b/docs/api/line_layer/height.en.md new file mode 100644 index 0000000000..b9fa66f7bd --- /dev/null +++ b/docs/api/line_layer/height.en.md @@ -0,0 +1,6 @@ +--- +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 new file mode 100644 index 0000000000..bc98122c85 --- /dev/null +++ b/docs/api/line_layer/height.zh.md @@ -0,0 +1,164 @@ +--- +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 dec526ac3c..022b9dec9f 100644 --- a/docs/api/line_layer/linelayer.zh.md +++ b/docs/api/line_layer/linelayer.zh.md @@ -1,11 +1,12 @@ --- title: LineLayer -order: 2 +order: 0 --- `markdown:docs/common/style.md` -## 线图层 +## 简介 +L7 支持各种类型的线图层，包括平面路径、平面弧线、平面虚线、平面动画、3D弧线等等。用户通过切换 shape 的参数，以及配置对应 shape 的线图层支持的 style 样式，可以得到各种类型的线。 ### shape diff --git a/docs/api/line_layer/texture.en.md b/docs/api/line_layer/texture.en.md new file mode 100644 index 0000000000..51b152a91d --- /dev/null +++ b/docs/api/line_layer/texture.en.md @@ -0,0 +1,6 @@ +--- +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 new file mode 100644 index 0000000000..64ae275755 --- /dev/null +++ b/docs/api/line_layer/texture.zh.md @@ -0,0 +1,164 @@ +--- +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` diff --git a/docs/api/line_layer/wall.en.md b/docs/api/line_layer/wall.en.md new file mode 100644 index 0000000000..893f7b4433 --- /dev/null +++ b/docs/api/line_layer/wall.en.md @@ -0,0 +1,6 @@ +--- +title: Wall +order: 4 +--- + +`markdown:docs/api/line_layer/wall.zh.md` diff --git a/docs/api/line_layer/wall.zh.md b/docs/api/line_layer/wall.zh.md new file mode 100644 index 0000000000..e9cc8b1879 --- /dev/null +++ b/docs/api/line_layer/wall.zh.md @@ -0,0 +1,164 @@ +--- +title: 地理围墙 +order: 4 +--- + +`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/wind.zh.md b/docs/api/wind.zh.md index 4b313251b0..f2cd75c78e 100644 --- a/docs/api/wind.zh.md +++ b/docs/api/wind.zh.md @@ -4,6 +4,7 @@ order: 3 --- WindLayer 用于将存储风场信息的图片，设置其风速线采样相关参数，将采样后的风场线的走向、强度通过可视化的方式在地图上呈现出来。 + ## 使用 ```jsx