mirror of https://gitee.com/antv-l7/antv-l7
70 lines
1.4 KiB
Markdown
70 lines
1.4 KiB
Markdown
|
---
|
|||
|
|
title: 风场图层
|
|||
|
|
order: 3
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
WindLayer 用于将存储风场信息的图片，设置其风速线采样相关参数，将采样后的风场线的走向、强度通过可视化的方式在地图上呈现出来。
|
|||
|
|
|
|||
|
|
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CPveRqBxBwkAAAAAAAAAAAAAARQnAQ' />
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
import { WindLayer } from '@antv/l7';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API
|
|||
|
|
|
|||
|
|
### source
|
|||
|
|
|
|||
|
|
(data, options) => WindLayer, 设置风场相关信息的函数
|
|||
|
|
|
|||
|
|
- data: string 存储风场信息的图片地址
|
|||
|
|
- 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'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
## 配置项
|
|||
|
|
|
|||
|
|
`markdown:docs/common/layer/options.md`
|
|||
|
|
|
|||
|
|
`markdown:docs/common/layer/layer_ctr.md`
|
|||
|
|
|
|||
|
|
`markdown:docs/common/layer/layer_event.md`
|