mirror of https://gitee.com/antv-l7/antv-l7
87 lines
1.4 KiB
Markdown
87 lines
1.4 KiB
Markdown
---
|
||
title: PointLayer
|
||
order: 0
|
||
---
|
||
|
||
## 简介
|
||
|
||
点数据的展示，数据源支持 JSON,GeoJSON,CSV 三种数据格式。
|
||
|
||
shape 支持
|
||
|
||
**3D 类型 柱图**
|
||
|
||
```
|
||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||
|
||
```
|
||
|
||
**2D 符号图**
|
||
|
||
```
|
||
'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';
|
||
|
||
const layer = PointLayer({
|
||
zIndex: 2,
|
||
})
|
||
.source(data.list, {
|
||
type: 'array',
|
||
x: 'j',
|
||
y: 'w',
|
||
})
|
||
.shape('cylinder')
|
||
.size('t', (level) => {
|
||
return [4, 4, level + 40];
|
||
})
|
||
.color('t', [
|
||
'#002466',
|
||
'#105CB3',
|
||
'#2894E0',
|
||
'#CFF6FF',
|
||
'#FFF5B8',
|
||
'#FFAB5C',
|
||
'#F27049',
|
||
'#730D1C',
|
||
]);
|
||
```
|
||
|
||
#### 符号图
|
||
|
||
使用图片添加地图标注
|
||
|
||
```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');
|
||
```
|