mirror of https://gitee.com/antv-l7/antv-l7
style: lint style
This commit is contained in:
shihui
parent
e8ab07778d
commit
36b3092aab
|
|
@ -2,6 +2,7 @@
|
|||
title: GridHeatMapLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
|
@ -10,8 +11,7 @@ order: 1
|
|||
|
||||
```javascript
|
||||
import { HeatmapLayer } from '@antv/l7';
|
||||
|
||||
````
|
||||
```
|
||||
|
||||
## source
|
||||
|
||||
|
|
@ -147,4 +147,5 @@ const layer = new HeatmapLayer({})
|
|||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 网格热力图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的正方形网格进行聚合，一个正方形网格代表网格内所有点的统计值。方格热力图特点以方格网布局。
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Hexagon HeatMap
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
|
@ -130,4 +131,5 @@ const layer = new HeatmapLayer({
|
|||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 蜂窝热力图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
将一组点数据按照等大小的六边形网格进行聚合，一个六边形网格代表网格内所有点的统计值。蜂窝热力图特点以六边形热力图网格布局
|
||||
|
|
@ -130,4 +131,5 @@ const layer = new HeatmapLayer({
|
|||
coverage: 0.8,
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -4,4 +4,3 @@ order: 1
|
|||
---
|
||||
|
||||
`markdown:docs/api/heatmap_layer/normal.zh.md`
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 经典热力图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
|
@ -64,4 +65,5 @@ heatmapLayer()
|
|||
},
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
title: ArcLayer
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/arc.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 弧线图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
|
||||
|
||||
|
|
@ -61,16 +62,16 @@ L7 目前动画参数为相对单位，我们默认一条线段的长度为 1
|
|||
|
||||
如果 interval = 0.2,则一条轨迹将会分成 5 段，如果 interval = 0.5 则为两段。
|
||||
|
||||
|
||||
### arc style 额外参数控制
|
||||
|
||||
在 arc 弧线的 style 方法中支持有额外的参数，可以对弧线样式进行更细微的调整。
|
||||
|
||||
#### segmentNumber 弧线分段数
|
||||
|
||||
arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需要这么多的分段数，适当降低分段数量可以在保证效果的情况下提高性能。
|
||||
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
|
@ -89,10 +90,11 @@ arc 图层的弧线默认分段数是 30，然而有有些时候用户并不需
|
|||
```
|
||||
|
||||
#### thetaOffset 弧度参数
|
||||
|
||||
thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
|
|
@ -106,9 +108,10 @@ thetaOffset 参数 表示 arc 弧线的弧度，默认值是 0.314
|
|||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
thetaOffset: 0.35
|
||||
thetaOffset: 0.35,
|
||||
});
|
||||
```
|
||||
|
||||
### 示例代码
|
||||
|
||||
```javascript
|
||||
|
|
@ -134,7 +137,6 @@ const layer = new LineLayer({})
|
|||
|
||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高。
|
||||
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
|
|
@ -150,13 +152,13 @@ const layer = new LineLayer({})
|
|||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
sourceColor: '#f00', // 起点颜色
|
||||
targetColor: '#0f0' // 终点颜色
|
||||
sourceColor: '#f00', // 起点颜色
|
||||
targetColor: '#0f0', // 终点颜色
|
||||
});
|
||||
```
|
||||
|
||||
### demo 示例
|
||||
|
||||
[弧线 demo]( ../../../examples/gallery/basic#arcCircle)
|
||||
[弧线 demo](../../../examples/gallery/basic#arcCircle)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
title: LineLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/linelayer.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
title: LineLayer
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 线图层
|
||||
|
||||
### shape
|
||||
|
|
@ -17,16 +19,15 @@ order: 2
|
|||
⚠️ 弧线只需要设置起止点坐标即可
|
||||
|
||||
```javascript
|
||||
new LineLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
new LineLayer().source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
x1: 'lng2',
|
||||
y1: 'lat2',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
如果 geojson 数据绘制弧线图 coordinates 第一对坐标为起点，第二对为终点
|
||||
|
|
@ -73,7 +74,6 @@ lineLayer.size([1, 2]); // 宽度为1，高度2
|
|||
|
||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
|
||||
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
|
|
@ -89,23 +89,24 @@ const layer = new LineLayer({})
|
|||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
sourceColor: '#f00', // 起点颜色
|
||||
targetColor: '#0f0' // 终点颜色
|
||||
sourceColor: '#f00', // 起点颜色
|
||||
targetColor: '#0f0', // 终点颜色
|
||||
});
|
||||
```
|
||||
|
||||
### 设置顶点高度
|
||||
|
||||
线图层支持给每个顶点赋予高度值，同时允许用户在 style 方法中通过 vertexHeightScale 属性设置高度比例。
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.style({
|
||||
vertexHeightScale: 30,
|
||||
})
|
||||
.color('#ccc');
|
||||
.source(data)
|
||||
.size(1)
|
||||
.shape('line')
|
||||
.style({
|
||||
vertexHeightScale: 30,
|
||||
})
|
||||
.color('#ccc');
|
||||
|
||||
scene.addLayer(layer);
|
||||
```
|
||||
|
|
@ -118,25 +119,26 @@ scene.addLayer(layer);
|
|||
"name": "tw",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { },
|
||||
"geometry": {
|
||||
"type": "LineString", "coordinates":
|
||||
{
|
||||
"type": "Feature",
|
||||
"properties": { },
|
||||
"geometry": {
|
||||
"type": "LineString", "coordinates":
|
||||
[
|
||||
[ 121.519153647, 25.288692533, 41.0 ],
|
||||
[ 121.529153646999987, 25.288692533, 35.0 ],
|
||||
[ 121.539153647, 25.288692533, 27.0 ],
|
||||
[ 121.549153647, 25.288692533, 66.0 ],
|
||||
[ 121.559153646999988, 25.288692533, 83.0 ],
|
||||
[ 121.569153647, 25.288692533, 88.0 ]
|
||||
]
|
||||
}
|
||||
[ 121.519153647, 25.288692533, 41.0 ],
|
||||
[ 121.529153646999987, 25.288692533, 35.0 ],
|
||||
[ 121.539153647, 25.288692533, 27.0 ],
|
||||
[ 121.549153647, 25.288692533, 66.0 ],
|
||||
[ 121.559153646999988, 25.288692533, 83.0 ],
|
||||
[ 121.569153647, 25.288692533, 88.0 ]
|
||||
]
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
[使用完整 demo](../../../examples/line/isoline#height)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
title: Path
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/line_layer/path.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 路径图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
用一组首尾不闭合的点坐标对来定位的线图层，通常用来表示轨迹，线路，道路等
|
||||
|
||||
|
|
@ -30,7 +31,6 @@ layer.size('height', []);
|
|||
|
||||
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
|
||||
|
||||
|
||||
```javascript
|
||||
const layer = new LineLayer({})
|
||||
.source(data, {
|
||||
|
|
@ -46,8 +46,8 @@ const layer = new LineLayer({})
|
|||
.shape('arc')
|
||||
.color('#8C1EB2')
|
||||
.style({
|
||||
sourceColor: '#f00', // 起点颜色
|
||||
targetColor: '#0f0' // 终点颜色
|
||||
sourceColor: '#f00', // 起点颜色
|
||||
targetColor: '#0f0', // 终点颜色
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
title: Bubble Map
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/bubble.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 气泡图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
气泡图地理区域上方会显示不同大小的圆点，圆形面积与其在数据集中的数值会成正比。
|
||||
|
||||
|
|
@ -58,4 +59,3 @@ layer.animate(false);
|
|||
style 方法如果没有设置 stroke, 默认于气泡的填充色相同
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 复合图表地图
|
||||
order: 6
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
使用二维统计图表代替点状符号的一种特殊复合形式，复合图表地图中常用扩展图形还有柱状图、曲线图、玫瑰图等
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Cluster Map
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/cluster.zh.md`
|
||||
|
||||
## 使用
|
||||
|
|
@ -70,4 +71,5 @@ const pointLayer = new PointLayer({})
|
|||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 聚合图
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 3D 柱图
|
||||
order: 5
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
3D 柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
||||
|
|
@ -58,11 +59,12 @@ const column = new PointLayer({})
|
|||
opacity: 1.0,
|
||||
});
|
||||
```
|
||||
|
||||
### animate
|
||||
3D 柱图支持生长动画
|
||||
|
||||
3D 柱图支持生长动画
|
||||
animate 方法支持的布尔值和对象参数
|
||||
|
||||
|
||||
```javascript
|
||||
animate(true)
|
||||
animate(false)
|
||||
|
|
@ -75,6 +77,7 @@ animateOptions: {
|
|||
repeat?: number = 1;
|
||||
}
|
||||
```
|
||||
|
||||
## 额外的 style 配置
|
||||
|
||||
- sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色）
|
||||
|
|
@ -87,9 +90,9 @@ animateOptions: {
|
|||
style({
|
||||
opacityLinear: {
|
||||
enable: true, // true - false
|
||||
dir: 'up' // up - down
|
||||
}
|
||||
})
|
||||
dir: 'up', // up - down
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
- lightEnable 是否开启光照
|
||||
|
|
@ -101,6 +104,7 @@ layer.style({
|
|||
targetColor: 'yellow',
|
||||
});
|
||||
```
|
||||
|
||||
[光标柱图](../../../../examples/point/column#column_light)
|
||||
[渐变柱图](../../../../examples/point/column#column_linear)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: PointLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
|
|
@ -85,4 +86,5 @@ const layer = new PointLayer({
|
|||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 散点图
|
||||
order: 2
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
在地理区域上放置相等大小的圆点，用来表示地域上的空间布局或数据分布。
|
||||
|
|
@ -43,4 +44,5 @@ const scatter = new PointLayer()
|
|||
strokeWidth: 1,
|
||||
});
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 符号图
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
在地理区域上放置不同图片作为符号，通常表示不同地理要素分布情况
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 文本标注
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
为图层添加文本标注
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
title: fill 3D
|
||||
order: 1
|
||||
---
|
||||
`markdown:docs/api/polygon_layer/extrude.zh.md`
|
||||
|
||||
`markdown:docs/api/polygon_layer/extrude.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 3D填充图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
|
@ -34,18 +35,18 @@ layer.size('floor', (floor) => {
|
|||
});
|
||||
```
|
||||
|
||||
## 额外的 style 配置
|
||||
## 额外的 style 配置
|
||||
|
||||
- pickLight 设置 3D 填充图
|
||||
- pickLight 设置 3D 填充图
|
||||
|
||||
pickLight 默认为 false 表示对拾取的颜色不进行光照计算，开启后会增加部分额外的计算。
|
||||
pickLight 默认为 false 表示对拾取的颜色不进行光照计算，开启后会增加部分额外的计算。
|
||||
|
||||
```javascript
|
||||
style({
|
||||
pickLight: true // 默认为 false
|
||||
})
|
||||
```
|
||||
pickLight: true, // 默认为 false
|
||||
});
|
||||
```
|
||||
|
||||
[光照拾取](../../../../examples/react/covid#covid_extrude)
|
||||
[光照拾取](../../../../examples/react/covid#covid_extrude)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
title: fill
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/api/polygon_layer/fill.zh.md`
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: 填充图
|
||||
order: 1
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 使用
|
||||
|
|
@ -31,10 +32,11 @@ layer.shape('fill');
|
|||
style({
|
||||
opacityLinear: {
|
||||
enable: true, // true - false
|
||||
dir: 'in' // in - out
|
||||
}
|
||||
})
|
||||
dir: 'in', // in - out
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
[径向渐变 in](../../../examples/polygon/fill#china_linear_in)
|
||||
[径向渐变 out](../../../examples/polygon/fill#china_linear_out)
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: PolygonLayer
|
||||
order: 0
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
绘制 2D 多边形以及沿 Z 轴拉伸后的 3D 图形。
|
||||
|
|
|
|||
Loading…
Reference in New Issue