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 类型 柱图**
|
**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'
|
'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
|
```javascript
|
||||||
import { PointLayer } from '@antv/l7';
|
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`
|
`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