mirror of https://gitee.com/antv-l7/antv-l7
59 lines
977 B
Markdown
59 lines
977 B
Markdown
|
---
|
|||
|
|
title: 3D 柱图
|
|||
|
|
order: 5
|
|||
|
|
---
|
|||
|
|
3D柱图地理区域上方会显示不同高度的柱体，主题的高度与其在数据集中的数值会成正比。
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
3D柱图通过 PointLayer对象实例化，将shape设置成不同的3Dshape
|
|||
|
|
### shape
|
|||
|
|
|
|||
|
|
3D Shape 支持
|
|||
|
|
|
|||
|
|
- cylinder
|
|||
|
|
- triangleColumn
|
|||
|
|
- hexagonColumn
|
|||
|
|
- squareColumn
|
|||
|
|
|
|||
|
|
### size
|
|||
|
|
|
|||
|
|
3D柱图size 需要设置三个维度 [w, l, z]
|
|||
|
|
- w 宽
|
|||
|
|
- l 长
|
|||
|
|
- z 高度
|
|||
|
|
|
|||
|
|
size设置成常量
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
layer.size([2,2,3])
|
|||
|
|
```
|
|||
|
|
size 回调函数设置
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
layer.size('unit_price', h => {
|
|||
|
|
return [ 6, 6, h / 500 ];
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
|
|||
|
|
const column = new PointLayer({})
|
|||
|
|
.source(data)
|
|||
|
|
.shape('name', [
|
|||
|
|
'cylinder',
|
|||
|
|
'triangleColumn',
|
|||
|
|
'hexagonColumn',
|
|||
|
|
'squareColumn'
|
|||
|
|
])
|
|||
|
|
.size('unit_price', h => {
|
|||
|
|
return [ 6, 6, h / 500 ];
|
|||
|
|
})
|
|||
|
|
.color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
|
|||
|
|
.style({
|
|||
|
|
opacity: 1.0
|
|||
|
|
});
|
|||
|
|
```
|