mirror of https://gitee.com/antv-l7/antv-l7
docs: `CityBuildingLayer` doc (#906)
* docs: refine `CityBuildingLayer` doc * style: doc lint
This commit is contained in:
parent
c16848426b
commit
ceac6e759c
|
@ -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)',
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
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,
|
||||
});
|
||||
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`
|
||||
|
|
Loading…
Reference in New Issue