docs: `CityBuildingLayer` doc (#906)

* docs: refine `CityBuildingLayer` doc

* style: doc lint
This commit is contained in:
susiwen8 2021-12-31 11:34:31 +08:00 committed by GitHub
parent c16848426b
commit ceac6e759c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 21 deletions

View File

@ -5,6 +5,10 @@ order: 6
`markdown:docs/common/style.md`
## 简介
`CityBuildingLayer` 用于构建城市建筑 3D 模型, 展示城市建筑
## 使用
```javascript
@ -13,10 +17,14 @@ import { CityBuildingLayer } from '@antv/l7';
### animate
开启动画效果
是否开启动画效果, 仅支持`boolean` 或`enable: boolean` 配置项
```javascript
layer.animate(true);
layer.animatte({
enable: true,
});
```
### style
@ -38,35 +46,55 @@ layer.animate(true);
## 自定义动画频率
自定义动画频率需要 关闭默认动画,通过 setLight 方法不断更新时间
```javascript
layer.animate(false);
```
自定义动画频率需要 关闭默认动画,通过 `setLight` 方法不断更新时间
### setLight(time)
参数
time : 时间 毫秒
```js
import { CityBuildingLayer } from '@antv/l7';
const buildingLayer = new CityBuildingLayer();
buildingLayer.animate(false);
setInterval(() => {
buildingLayer.setLight(Date.now());
}, 2000);
```
#### 完整代码
```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)',
import { Scene, CityBuildingLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
center: [120.173104, 30.244072],
pitch: 70.41138037735848,
zoom: 17.18,
rotation: 2.24, // 358.7459759480504
minZoom: 14,
}),
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
.then((res) => res.json())
.then((data) => {
const layer = new CityBuildingLayer({
zIndex: 0,
});
scene.addLayer(pointLayer);
layer.source(data);
scene.addLayer(layer);
});
});
```
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Fe40RYZYR0kAAAAAAAAAAAAAARQnAQ" alt="L7 建筑图层" height="300" width="300">
`markdown:docs/common/layer/base.md`