mirror of https://gitee.com/antv-l7/antv-l7
78 lines
1.2 KiB
Markdown
78 lines
1.2 KiB
Markdown
---
|
||
title: PointLayer
|
||
order: 1
|
||
---
|
||
# PointLayer
|
||
|
||
|
||
## 简介
|
||
点数据的展示,数据源支持JSON,GeoJSON,CSV 三种数据格式。
|
||
|
||
shape 支持
|
||
|
||
**3D类型 柱图**
|
||
|
||
```
|
||
'cylinder', 'triangleColumn', 'hexagonColumn', 'squareColumn'
|
||
|
||
```
|
||
|
||
**2D 符号图**
|
||
|
||
```
|
||
'circle', 'square', 'hexagon', 'triangle', 'pentagon', 'octogon', 'hexagram','rhombus', 'vesica',
|
||
|
||
```
|
||
|
||
**图片标注**
|
||
|
||
通过 ```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')
|
||
|
||
```
|
||
|
||
|
||
|