mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' of https://github.com/antvis/L7
This commit is contained in:
commit
b113793d34
|
@ -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`
|
||||
|
|
|
@ -95,7 +95,7 @@ const scene = new Scene({
|
|||
提供了简单的方法控制地球系统的旋转(实际上控制的是相机的旋转,需要传入一个对象
|
||||
|
||||
- force: `false` 判断是否强制生效,默认该方法的优先级比用户鼠标操作要低,当用户操作相机的时候,该方法会失效
|
||||
- regScale: `0.01` 旋转的角度(视觉上地球的旋转角度), `regScale` 表示的并不是实际的旋转角度,而是单位旋转角度的比例
|
||||
- reg: `0.01` 旋转的角度(视觉上地球的旋转角度), `reg` 表示的并不是实际的旋转角度,而是单位旋转角度的比例
|
||||
🌟 单位旋转角度 = Math.min(this.earthCameraZoom \* this.earthCameraZoom, 1)
|
||||
|
||||
```js
|
||||
|
@ -112,7 +112,7 @@ function step() {
|
|||
mapService.rotateY({
|
||||
option: {
|
||||
force: true,
|
||||
regScale: 350,
|
||||
reg: .1,
|
||||
},
|
||||
});
|
||||
requestAnimationFrame(step);
|
||||
|
|
Loading…
Reference in New Issue