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` `markdown:docs/common/style.md`
## 简介
`CityBuildingLayer` 用于构建城市建筑 3D 模型, 展示城市建筑
## 使用 ## 使用
```javascript ```javascript
@ -13,10 +17,14 @@ import { CityBuildingLayer } from '@antv/l7';
### animate ### animate
开启动画效果 是否开启动画效果, 仅支持`boolean` 或`enable: boolean` 配置项
```javascript ```javascript
layer.animate(true); layer.animate(true);
layer.animatte({
enable: true,
});
``` ```
### style ### style
@ -38,35 +46,55 @@ layer.animate(true);
## 自定义动画频率 ## 自定义动画频率
自定义动画频率需要 关闭默认动画,通过 setLight 方法不断更新时间 自定义动画频率需要 关闭默认动画,通过 `setLight` 方法不断更新时间
```javascript
layer.animate(false);
```
### setLight(time) ### setLight(time)
参数 参数
time : 时间 毫秒 time : 时间 毫秒
```js
import { CityBuildingLayer } from '@antv/l7';
const buildingLayer = new CityBuildingLayer();
buildingLayer.animate(false);
setInterval(() => {
buildingLayer.setLight(Date.now());
}, 2000);
```
#### 完整代码 #### 完整代码
```javascript ```javascript
const pointLayer = new CityBuildingLayer(); import { Scene, CityBuildingLayer } from '@antv/l7';
pointLayer import { GaodeMap } from '@antv/l7-maps';
.source(await response.json())
.size('floor', [0, 500]) const scene = new Scene({
.color('rgba(242,246,250,1.0)') id: 'map',
.animate({ map: new GaodeMap({
enable: true, style: 'dark',
}) center: [120.173104, 30.244072],
.style({ pitch: 70.41138037735848,
opacity: 1.0, zoom: 17.18,
baseColor: 'rgb(16,16,16)', rotation: 2.24, // 358.7459759480504
windowColor: 'rgb(30,60,89)', minZoom: 14,
brightColor: 'rgb(255,176,38)', }),
}); });
scene.addLayer(pointLayer);
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json')
.then((res) => res.json())
.then((data) => {
const layer = new CityBuildingLayer({
zIndex: 0,
});
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` `markdown:docs/common/layer/base.md`