antv-l7/docs/api/layer/pointlayer.en.md

78 lines
1.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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')
```