mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善点图层的文档
This commit is contained in:
shihui
parent
2faff4b346
commit
6cd3fee934
|
|
@ -7,39 +7,97 @@ order: 0
|
|||
|
||||
## 简介
|
||||
|
||||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||||
点数据的展示，根据经纬点绘制图形，数据源支持 JSON、GeoJSON、CSV 三种数据格式。
|
||||
- [GeoJSON](../source/geojson/#point)
|
||||
- [CSV](../source/csv/#parser)
|
||||
- [JSON](../source/json/#点数据)
|
||||
|
||||
shape 支持
|
||||
🌟 通常每种数据都需要相应的 parser 解析数据
|
||||
|
||||
```javascript
|
||||
// 传入 JSON 类型的数据
|
||||
var data = [
|
||||
{
|
||||
lng: 120,
|
||||
lat: 30
|
||||
},
|
||||
...
|
||||
]
|
||||
|
||||
var layer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
}
|
||||
})
|
||||
|
||||
// 传入 GeoJSON 类型数据 *** L7 默认支持，不需要 parser 解析
|
||||
var data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[120, 30],
|
||||
...
|
||||
]
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
var layer = new PointLayer()
|
||||
.source(data)
|
||||
|
||||
// 传入 txt 类型数据
|
||||
var data = `from,to,value,type,lng1,lat1,lng2,lat2
|
||||
鎷夎惃,娴疯タ,6.91,move_out,91.111891,29.662557,97.342625,37.373799
|
||||
鎷夎惃,鎴愰兘,4.79,move_out,91.111891,29.662557,104.067923,30.679943
|
||||
鎷夎惃,閲嶅簡,2.41,move_out,91.111891,29.662557,106.530635,29.544606
|
||||
鎷夎惃,鍖椾含,2.05,move_out,91.111891,29.662557,116.395645,39.929986
|
||||
...`
|
||||
|
||||
var layer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'csv',
|
||||
x: 'lng1',
|
||||
y: 'lat1',
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## shape 类型
|
||||
|
||||
PointLayer 图层支持多种 shape 类型，通过改变 shape 我们可以显示不同的点
|
||||
|
||||
**2D 符号图**
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iN0nTYRDd3AAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
```
|
||||
'simple', 'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
|
||||
|
||||
```
|
||||
|
||||
**3D 类型 柱图**
|
||||
|
||||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tvpvQZLv_xYAAAAAAAAAAABkARQnAQ'>
|
||||
|
||||
```
|
||||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||||
|
||||
```
|
||||
|
||||
**2D 符号图**
|
||||
🌟 若是使用简单的圆点图层，建议使用 simple 代替 circle 以获得更好的性能
|
||||
|
||||
```
|
||||
'circle', 'square', 'hexagon', 'triangle'， 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
|
||||
|
||||
```
|
||||
|
||||
## source
|
||||
|
||||
点数据类型，根据经纬点绘制图形,目前支持三种数据结构
|
||||
|
||||
- [GeoJSON](../source/geojson/#point)
|
||||
- [CSV](../source/csv/#parser)
|
||||
- [JSON](../source/json/#点数据)
|
||||
|
||||
**图片标注**
|
||||
|
||||
通过 `Scene.addImage()` 可以添加图片资源
|
||||
|
||||
### 代码示例
|
||||
|
||||
#### 基本图形显示示例
|
||||
### 基本用法
|
||||
|
||||
```javascript
|
||||
import { PointLayer } from '@antv/l7';
|
||||
|
|
@ -68,23 +126,4 @@ const layer = PointLayer({
|
|||
]);
|
||||
```
|
||||
|
||||
#### 符号图
|
||||
|
||||
使用图片添加地图标注
|
||||
|
||||
```javascript
|
||||
scene.addImage(
|
||||
'local',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png',
|
||||
);
|
||||
|
||||
const layer = new PointLayer({
|
||||
zIndex: 4,
|
||||
})
|
||||
.source(city)
|
||||
.size(20.0)
|
||||
.shape('local')
|
||||
.color('#0D408C');
|
||||
```
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Simple point
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/simple.zh.md`
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: 简单点图层
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
|
||||
- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
|
||||
|
||||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../examples/point/dot#normal2)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Wave point
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/point_layer/wave.zh.md`
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: 水波图
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
亮度图又称点密度图，单位面积的内点的个数越多，亮度会越亮，亮度图一般用来表达海量点数据分布情况
|
||||
|
||||
## 使用
|
||||
|
||||
### shape
|
||||
|
||||
- dot 如果需要使用亮度图可以将 shape 设置为 dot,或者不设置 shape
|
||||
|
||||
### color
|
||||
|
||||
- 无权重
|
||||
如果数据没有权重可以将颜色设置为常量，渲染时会自动进行颜色叠加，点越多颜色越亮
|
||||
- 有权重
|
||||
如果数据有权重可以设置一组同一色相，不同亮度的色带，值越大亮度会越亮。
|
||||
|
||||
```javascript
|
||||
const pointLayer = new PointLayer()
|
||||
.source(data)
|
||||
.size(2)
|
||||
.shape('dot')
|
||||
.color('h8', [
|
||||
'#0A3663',
|
||||
'#1558AC',
|
||||
'#3771D9',
|
||||
'#4D89E5',
|
||||
'#64A5D3',
|
||||
'#72BED6',
|
||||
'#83CED6',
|
||||
'#A6E1E0',
|
||||
'#B8EFE2',
|
||||
'#D7F9F0',
|
||||
])
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
|
||||
scene.addLayer(pointLayer);
|
||||
```
|
||||
|
||||
## 相关 demo
|
||||
|
||||
[城市亮度图](../../../examples/point/dot#normal2)
|
||||
|
||||
`markdown:docs/common/layer/base.md`
|
||||
Loading…
Reference in New Issue