From af4371b242b9c23f2ddfb0497c80972b342ebc1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=82=8E=E7=86=8A?= <496845051@qq.com> Date: Mon, 10 Jan 2022 10:02:35 +0800 Subject: [PATCH] Feat yanxiong (#924) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../demo/{arcCircle.js => line_animate.js} | 0 examples/line/animate/demo/meta.json | 24 +++++++++---------- .../demo/{trip_arc.js => trip_animate.js} | 6 +++-- ...{trip_arc_dark.js => trip_animate_dark.js} | 0 .../animate/demo/{wind.js => wind_animate.js} | 0 examples/line/arc/demo/meta.json | 2 +- examples/line/arc/demo/trip_arc_dark.js | 15 ++++++------ .../line/arc/demo/trip_arc_dark_linear.js | 11 +++++---- examples/line/isoline/demo/ele_dark.js | 8 ++++--- examples/line/isoline/demo/height.js | 10 ++++---- examples/line/isoline/demo/meta.json | 2 +- examples/line/path/demo/meta.json | 4 ++-- examples/line/path/demo/road_dark.js | 8 +++++-- 13 files changed, 50 insertions(+), 40 deletions(-) rename examples/line/animate/demo/{arcCircle.js => line_animate.js} (100%) rename examples/line/animate/demo/{trip_arc.js => trip_animate.js} (89%) rename examples/line/animate/demo/{trip_arc_dark.js => trip_animate_dark.js} (100%) rename examples/line/animate/demo/{wind.js => wind_animate.js} (100%) diff --git a/examples/line/animate/demo/arcCircle.js b/examples/line/animate/demo/line_animate.js similarity index 100% rename from examples/line/animate/demo/arcCircle.js rename to examples/line/animate/demo/line_animate.js diff --git a/examples/line/animate/demo/meta.json b/examples/line/animate/demo/meta.json index b082eb808d..4b7a2f9946 100644 --- a/examples/line/animate/demo/meta.json +++ b/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" } ] } diff --git a/examples/line/animate/demo/trip_arc.js b/examples/line/animate/demo/trip_animate.js similarity index 89% rename from examples/line/animate/demo/trip_arc.js rename to examples/line/animate/demo/trip_animate.js index 053cda6deb..aac6323c34 100644 --- a/examples/line/animate/demo/trip_arc.js +++ b/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' diff --git a/examples/line/animate/demo/trip_arc_dark.js b/examples/line/animate/demo/trip_animate_dark.js similarity index 100% rename from examples/line/animate/demo/trip_arc_dark.js rename to examples/line/animate/demo/trip_animate_dark.js diff --git a/examples/line/animate/demo/wind.js b/examples/line/animate/demo/wind_animate.js similarity index 100% rename from examples/line/animate/demo/wind.js rename to examples/line/animate/demo/wind_animate.js diff --git a/examples/line/arc/demo/meta.json b/examples/line/arc/demo/meta.json index 1a97c2fa8e..a14b67b02a 100644 --- a/examples/line/arc/demo/meta.json +++ b/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", diff --git a/examples/line/arc/demo/trip_arc_dark.js b/examples/line/arc/demo/trip_arc_dark.js index 75a6696540..54de46829d 100644 --- a/examples/line/arc/demo/trip_arc_dark.js +++ b/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); diff --git a/examples/line/arc/demo/trip_arc_dark_linear.js b/examples/line/arc/demo/trip_arc_dark_linear.js index 73d1863943..3a5a58db2d 100644 --- a/examples/line/arc/demo/trip_arc_dark_linear.js +++ b/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); }); diff --git a/examples/line/isoline/demo/ele_dark.js b/examples/line/isoline/demo/ele_dark.js index 5308f4fddf..19ab5be243 100644 --- a/examples/line/isoline/demo/ele_dark.js +++ b/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()) diff --git a/examples/line/isoline/demo/height.js b/examples/line/isoline/demo/height.js index b19b6b7df4..9c339cf09d 100644 --- a/examples/line/isoline/demo/height.js +++ b/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); }); diff --git a/examples/line/isoline/demo/meta.json b/examples/line/isoline/demo/meta.json index cd8f45ffa2..a140c07f02 100644 --- a/examples/line/isoline/demo/meta.json +++ b/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" } ] } diff --git a/examples/line/path/demo/meta.json b/examples/line/path/demo/meta.json index a241eeb8ab..65d79e3587 100644 --- a/examples/line/path/demo/meta.json +++ b/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", diff --git a/examples/line/path/demo/road_dark.js b/examples/line/path/demo/road_dark.js index c1530660f8..3adb5a941a 100644 --- a/examples/line/path/demo/road_dark.js +++ b/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); }); });