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`
|
`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`
|
||||||
|
|
Loading…
Reference in New Issue