Merge branch 'master' of https://github.com/antvis/L7

docs/api/wind.en.md

@@ -0,0 +1,6 @@
+---
+title: WindLayer
+order: 3
+---
+
+`markdown:docs/api/wind.zh.md`

docs/api/wind.zh.md

@@ -0,0 +1,69 @@
+---
+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`

examples/wind/basic/API.en.md

@@ -0,0 +1 @@
+`markdown:docs/api/wind.en.md`

examples/wind/basic/API.zh.md

@@ -0,0 +1,2 @@
+`markdown:docs/api/wind.zh.md`
+

examples/wind/basic/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "风场图层",
+    "en": "WindLayer"
+  },
+  "demos": [
+    {
+      "filename": "wind.js",
+      "title": "风场图层",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*CPveRqBxBwkAAAAAAAAAAAAAARQnAQ"
+    }
+  ]
+}

examples/wind/basic/demo/wind.js

@@ -0,0 +1,48 @@
+import { Scene, WindLayer } from '@antv/l7';
+import { GaodeMap } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new GaodeMap({
+    center: [ 105.732421875, 32.24997445586331 ],
+    pitch: 0,
+    style: 'dark',
+    zoom: 2,
+    viewMode: '3D'
+  })
+});
+
+scene.on('loaded', () => {
+  const layer = new WindLayer({});
+  layer
+    .source(
+      'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*wcU8S5xMEDYAAAAAAAAAAAAAARQnAQ',
+      {
+        parser: {
+          type: 'image',
+          extent: [ -180, -85, 180, 85 ]
+        }
+      }
+    )
+    .animate(true)
+    .style({
+      uMin: -21.32,
+      uMax: 26.8,
+      vMin: -21.57,
+      vMax: 21.42,
+      numParticles: 35535,
+      fadeOpacity: 0.996,
+      sizeScale: 1.2,
+      rampColors: {
+        0.0: '#3288bd',
+        0.1: '#66c2a5',
+        0.2: '#abdda4',
+        0.3: '#e6f598',
+        0.4: '#fee08b',
+        0.5: '#fdae61',
+        0.6: '#f46d43', // f46d43
+        1.0: '#d53e4f'
+      }
+    });
+  scene.addLayer(layer);
+});

examples/wind/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Wind Layer
+order: 7
+---

examples/wind/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 风场图层
+order: 7
+---

gatsby-config.js

@@ -220,6 +220,14 @@ module.exports = {
         },
         order: 3
       },
+      {
+        slug: 'api/wind',
+        title: {
+          zh: '风场图层',
+          en: 'WindLayer'
+        },
+        order: 3
+      },
       {
         slug: 'api/mini',
         title: {
@@ -243,7 +251,7 @@ module.exports = {
           en: 'map plugin'
         },
         order: 5
-      },
+      }
     ],
     examples: [
       {
@@ -343,6 +351,14 @@ module.exports = {
           en: 'Raster Layer'
         }
       },
+      {
+        slug: 'wind',
+        icon: 'raster',
+        title: {
+          zh: '风场图层',
+          en: 'Wind Layer'
+        }
+      },
       {
         slug: 'tutorial',
         icon: 'map',

stories/Map/components/amap2demo_wind.tsx

@@ -122,6 +122,30 @@ export default class WindMap extends React.Component {
           });
         });
 
+      pointFolder
+        .add(styleOptions, 'uMax', -100, 100, 1)
+        .onChange((num: number) => {
+          layer.style({
+            uMax: num,
+          });
+        });
+
+      pointFolder
+        .add(styleOptions, 'vMin', -100, 100, 1)
+        .onChange((num: number) => {
+          layer.style({
+            vMin: num,
+          });
+        });
+
+      pointFolder
+        .add(styleOptions, 'vMax', -100, 100, 1)
+        .onChange((num: number) => {
+          layer.style({
+            vMax: num,
+          });
+        });
+
       pointFolder
         .add(styleOptions, 'fadeOpacity', 0.9, 1, 0.01)
         .onChange((num: number) => {