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