mirror of https://gitee.com/antv-l7/antv-l7
65 lines
1.4 KiB
Markdown
65 lines
1.4 KiB
Markdown
---
|
||
title: 风场图层
|
||
order: 7
|
||
---
|
||
|
||
WindLayer 用于将存储风场信息的图片，设置其风速线采样相关参数，将采样后的风场线的走向、强度通过可视化的方式在地图上呈现出来。
|
||
|
||
## 使用
|
||
|
||
```jsx
|
||
import { WindLayer } from '@antv/l7';
|
||
```
|
||
|
||
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ADr-SIxhM9AAAAAAAAAAAAAAARQnAQ' />
|
||
|
||
### source
|
||
|
||
(data, options) => WindLayer, 设置风场相关信息的函数
|
||
|
||
- data: string 存储风场信息的图片地址
|
||
🌟 [数据获取](https://github.com/mapbox/webgl-wind#downloading-weather-data)
|
||
- options:
|
||
|
||
```js
|
||
{
|
||
parser: {
|
||
type: 'image',
|
||
extent: [-180, -85, 180, 85], // 用于设置风场图片作用到地图上的经纬图区间
|
||
},
|
||
}
|
||
```
|
||
|
||
### animate
|
||
|
||
开启动画效果
|
||
|
||
```javascript
|
||
layer.animate(true);
|
||
```
|
||
|
||
### style
|
||
|
||
- uMin: 风速 X 轴/横向最小值
|
||
- uMax: 风速 X 轴/横向最大值
|
||
- vMin: 风速 Y 轴/纵向最小值
|
||
- vMax: 风速 Y 轴/纵向最大值
|
||
- sizeScale: 风场线条粗细缩放比，0-2
|
||
- fadeOpacity: 线条透明度，0-1
|
||
- numParticles: 线条数量
|
||
- rampColors: 线条填充颜色映射，例：
|
||
{
|
||
0.0: '#3288bd',
|
||
0.1: '#66c2a5',
|
||
0.2: '#abdda4',
|
||
0.3: '#e6f598',
|
||
0.4: '#fee08b',
|
||
0.5: '#fdae61',
|
||
0.6: '#f46d43',
|
||
1.0: '#d53e4f'
|
||
}
|
||
|
||
[在线案例](../../examples/wind/basic#wind)
|
||
|
||
`markdown:docs/common/layer/base.md`
|