Feat yanxiong (#924)

* feat: 1.新增扫光中心sweepCenter  2.完善扫光Layer配置API和demo

* feat: 1.新增wind图层

* fix: 1.eslint问题

* feat: 1.新增WindLayer 文档和Example

* fix: 1.风场图层文档新增示例图片

* feat: 1.新增轨迹/围墙Example

* feat: 1.新增线图层Demo

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

examples/line/animate/demo/meta.json

@@ -5,26 +5,24 @@
   },
   "demos": [
     {
-      "filename": "wind.js",
-      "title": "风场弧线",
+      "filename": "wind_animate.js",
+      "title": "风场动画",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*LpcBTKiazZcAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "arcCircle.js",
-      "title": "大圆弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"
+      "filename": "line_animate.js",
+      "title": "直线动画",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*z5sLS4Tpl3kAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "trip_arc_dark.js",
-      "title": "3D 弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"
-
+      "filename": "trip_animate.js",
+      "title": "3D 弧线动画-亮",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*p8k2R5GpyQoAAAAAAAAAAAAAARQnAQ"
     },
     {
-      "filename": "trip_arc.js",
-      "title": "3D 弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ"
-
+      "filename": "trip_animate_dark.js",
+      "title": "3D 弧线动画-暗",
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w-gDQra4KGMAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

examples/line/animate/demo/trip_animate.js

@@ -7,10 +7,12 @@ const scene = new Scene({
     pitch: 60,
     type: 'mapbox',
     style: 'light',
-    center: [ -74.06967, 40.720399 ],
-    zoom: 12.45977
+    center: [ -74.05371169148452, 40.72573640479783 ],
+    zoom: 12.45977,
+    rotation: -38.39999999999969
   })
 });
+
 scene.on('loaded', () => {
   fetch(
     'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'

examples/line/arc/demo/meta.json

@@ -18,7 +18,7 @@
     {
       "filename": "trip_arc_dark_linear.js",
       "title": "3D 弧线（渐变）",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*RZEgSYZLeJIAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*8DYQTZeQyZ4AAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "trip_arc.js",

examples/line/arc/demo/trip_arc_dark.js

@@ -12,23 +12,24 @@ const scene = new Scene({
   })
 });
 scene.on('loaded', () => {
-  fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-    .then(res => res.text())
+  fetch('https://gw.alipayobjects.com/os/bmw-prod/e495c407-953b-44cc-8f77-87b9cf257578.json')
+    .then(res => res.json())
     .then(data => {
       const layer = new LineLayer({})
         .source(data, {
           parser: {
             type: 'csv',
-            x: 'lng1',
-            y: 'lat1',
-            x1: 'lng2',
-            y1: 'lat2'
+            x: 'from_lon',
+            y: 'from_lat',
+            x1: 'to_lon',
+            y1: 'to_lat'
           }
         })
         .size(1)
-        .shape('arc3d')
+        .shape('arc')
         .color('#FF7C6A')
         .style({
+          segmentNumber: 15,
           opacity: 0.8
         });
       scene.addLayer(layer);

examples/line/arc/demo/trip_arc_dark_linear.js

@@ -4,13 +4,14 @@ import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new Mapbox({
-    pitch: 60,
+    pitch: 57.999999999999964,
     style: 'dark',
-    center: [ 104.34278, 41.12554 ],
-    zoom: 2.94888,
-    rotation: 42.3999
+    center: [ 101.94365594271085, 40.46139674355291 ],
+    zoom: 2.7484264183323437,
+    rotation: -21.600099999999884
   })
 });
+
 scene.on('loaded', () => {
   fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
     .then(res => res.text())
@@ -31,7 +32,7 @@ scene.on('loaded', () => {
         .style({
           opacity: 0.8,
           sourceColor: '#f00',
-          targetColor: '#0f0'
+          targetColor: '#6F19FF'
         });
       scene.addLayer(layer);
     });

examples/line/isoline/demo/ele_dark.js

@@ -4,12 +4,14 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 26.842105263157915,
+    pitch: 45.06995336442376,
     style: 'dark',
-    center: [ 102.599436, 23.116371 ],
-    zoom: 14.78
+    center: [ 102.597971, 23.110479 ],
+    zoom: 13.34,
+    rotation: 360,
   })
 });
+
 scene.on('loaded', () => {
   fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
     .then(res => res.json())

examples/line/isoline/demo/height.js

@@ -7,11 +7,13 @@ const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
     pitch: 60,
-    style: 'light',
-    center: [ 120.7, 23.114887 ],
-    zoom: 8
+    style: 'dark',
+    center: [ 120.958472, 23.464292 ],
+    zoom: 7.65,
+    rotation: 33.375609237091055
   })
 });
+
 scene.on('loaded', () => {
   fetch(
     'https://gw.alipayobjects.com/os/bmw-prod/65589ef3-7f1d-440f-ba5d-86b03ee6ba7e.json'
@@ -25,7 +27,7 @@ scene.on('loaded', () => {
         .style({
           vertexHeightScale: 30
         })
-        .color('#ccc');
+        .color('#0D5EFF');
 
       scene.addLayer(layer);
     });

examples/line/isoline/demo/meta.json

@@ -22,7 +22,7 @@
     {
       "filename": "height.js",
       "title": "海拔线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*ucDnRrNaDNkAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*AARcS4YKlTYAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }

examples/line/path/demo/meta.json

@@ -26,8 +26,8 @@
     },
     {
       "filename": "road_dark.js",
-      "title": "路径dark",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"
+      "title": "路径边框",
+      "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Fo6hQYuxV3wAAAAAAAAAAAAAARQnAQ"
     },
     {
       "filename": "road_dark_dash.js",

examples/line/path/demo/road_dark.js

@@ -19,9 +19,13 @@ scene.on('loaded', () => {
     .then(data => {
       const layer = new LineLayer({})
         .source(data)
-        .size(1.5)
+        .size(6)
         .shape('line')
-        .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
+        .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])
+        .style({
+          borderWidth: 1,
+          borderColor: '#fff'
+        });
       scene.addLayer(layer);
     });
 });