2019-12-31 19:17:29 +08:00
|
|
|
---
|
|
|
|
|
title: 城市建筑
|
|
|
|
|
order: 6
|
|
|
|
|
---
|
2020-01-01 09:52:32 +08:00
|
|
|
|
2019-12-31 19:17:29 +08:00
|
|
|
## 使用
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
import { CityBuildingLayer } from '@antv/l7';
|
|
|
|
|
```
|
2020-01-01 09:52:32 +08:00
|
|
|
|
|
|
|
|
### source
|
2019-12-31 19:17:29 +08:00
|
|
|
|
|
|
|
|
同 [PolygonLayer](./polygon_layer/extrude)
|
|
|
|
|
|
|
|
|
|
### size
|
|
|
|
|
|
2020-01-01 09:52:32 +08:00
|
|
|
同 [PolygonLayer](./polygon_layer/extrude)
|
2019-12-31 19:17:29 +08:00
|
|
|
|
2020-01-01 09:52:32 +08:00
|
|
|
### color
|
2019-12-31 19:17:29 +08:00
|
|
|
|
|
|
|
|
[PolygonLayer](./polygon_layer/extrude)
|
|
|
|
|
|
|
|
|
|
### animate
|
2020-01-01 09:52:32 +08:00
|
|
|
|
2019-12-31 19:17:29 +08:00
|
|
|
开启动画效果
|
2020-01-01 09:52:32 +08:00
|
|
|
|
2019-12-31 19:17:29 +08:00
|
|
|
```javascript
|
2020-01-01 09:52:32 +08:00
|
|
|
layer.animate(true);
|
2019-12-31 19:17:29 +08:00
|
|
|
```
|
|
|
|
|
|
2020-01-01 09:52:32 +08:00
|
|
|
### style
|
|
|
|
|
|
|
|
|
|
- baseColor 楼房颜色,
|
|
|
|
|
- windowColor: 窗户颜色,
|
|
|
|
|
- brightColor: 点亮窗户颜色
|
|
|
|
|
|
|
|
|
|
其他 style 配置项同
|
2019-12-31 19:17:29 +08:00
|
|
|
|
|
|
|
|
[layer#style](./layer#style)
|
|
|
|
|
|
|
|
|
|
#### 完整代码
|
|
|
|
|
|
2020-01-01 09:52:32 +08:00
|
|
|
```javascript
|
|
|
|
|
const pointLayer = new CityBuildingLayer();
|
|
|
|
|
pointLayer
|
|
|
|
|
.source(await response.json())
|
|
|
|
|
.size('floor', [0, 500])
|
|
|
|
|
.color('rgba(242,246,250,1.0)')
|
|
|
|
|
.animate({
|
|
|
|
|
enable: true,
|
|
|
|
|
})
|
|
|
|
|
.style({
|
|
|
|
|
opacity: 1.0,
|
|
|
|
|
baseColor: 'rgb(16,16,16)',
|
|
|
|
|
windowColor: 'rgb(30,60,89)',
|
|
|
|
|
brightColor: 'rgb(255,176,38)',
|
|
|
|
|
});
|
|
|
|
|
scene.addLayer(pointLayer);
|
2019-12-31 19:17:29 +08:00
|
|
|
```
|
