From 980a1824cae2c1298361c5e660eee0816ffb8587 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Mon, 13 Apr 2020 14:10:53 +0800 Subject: [PATCH] docs: add line animate demo --- examples/line/animate/demo/arcCircle.js | 38 ++++++++++++++++++ examples/line/animate/demo/meta.json | 25 ++++++++++++ examples/line/animate/demo/trip_arc.js | 44 +++++++++++++++++++++ examples/line/animate/demo/trip_arc_dark.js | 37 +++++++++++++++++ examples/line/animate/index.en.md | 4 ++ examples/line/animate/index.zh.md | 4 ++ stories/Layers/components/Arc2DLine.tsx | 3 +- 7 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 examples/line/animate/demo/arcCircle.js create mode 100644 examples/line/animate/demo/meta.json create mode 100644 examples/line/animate/demo/trip_arc.js create mode 100644 examples/line/animate/demo/trip_arc_dark.js create mode 100644 examples/line/animate/index.en.md create mode 100644 examples/line/animate/index.zh.md diff --git a/examples/line/animate/demo/arcCircle.js b/examples/line/animate/demo/arcCircle.js new file mode 100644 index 0000000000..a5c6301c06 --- /dev/null +++ b/examples/line/animate/demo/arcCircle.js @@ -0,0 +1,38 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 0, + style: 'dark', + center: [ 107.77791556935472, 35.443286920228644 ], + zoom: 2.9142882493605033 + }) +}); +scene.on('loaded', () => { + fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') + .then(res => res.text()) + .then(data => { + const layer = new LineLayer({ + blend: 'normal' + }) + .source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2' + } + }) + .size(1) + .shape('greatcircle') + .animate(true) + .color('#8C1EB2') + .style({ + opacity: 0.8 + }); + scene.addLayer(layer); + }); +}); diff --git a/examples/line/animate/demo/meta.json b/examples/line/animate/demo/meta.json new file mode 100644 index 0000000000..fe382753ee --- /dev/null +++ b/examples/line/animate/demo/meta.json @@ -0,0 +1,25 @@ +{ + "title": { + "zh": "弧线", + "en": "line" + }, + "demos": [ + { + "filename": "arcCircle.js", + "title": "大圆弧线", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "trip_arc_dark.js", + "title": "3D 弧线", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ" + + }, + { + "filename": "trip_arc.js", + "title": "3D 弧线", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ" + + } + ] +} diff --git a/examples/line/animate/demo/trip_arc.js b/examples/line/animate/demo/trip_arc.js new file mode 100644 index 0000000000..675d5b24c6 --- /dev/null +++ b/examples/line/animate/demo/trip_arc.js @@ -0,0 +1,44 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 60, + type: 'mapbox', + style: 'light', + center: [ -74.06967, 40.720399 ], + zoom: 12.45977 + }) +}); +scene.on('loaded', () => { + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv' + ) + .then(res => res.text()) + .then(data => { + const layer = new LineLayer({}) + .source(data, { + parser: { + type: 'csv', + x: 'start station longitude', + y: 'start station latitude', + x1: 'end station longitude', + y1: 'end station latitude' + } + }) + .size(1) + .shape('arc3d') + .color('#0C47BF') + .animate({ + interval: 0.4, + trailLength: 0.2, + duration: 1 + }) + .style({ + opacity: 1, + blur: 0.9 + }); + scene.addLayer(layer); + }); +}); diff --git a/examples/line/animate/demo/trip_arc_dark.js b/examples/line/animate/demo/trip_arc_dark.js new file mode 100644 index 0000000000..685e1ef719 --- /dev/null +++ b/examples/line/animate/demo/trip_arc_dark.js @@ -0,0 +1,37 @@ +import { Scene, LineLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 60, + style: 'dark', + center: [ 104.34278, 41.12554 ], + zoom: 2.94888, + rotation: 42.3999 + }) +}); +scene.on('loaded', () => { + fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') + .then(res => res.text()) + .then(data => { + const layer = new LineLayer({}) + .source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2' + } + }) + .size(1) + .shape('arc3d') + .color('#FF7C6A') + .animate(true) + .style({ + opacity: 0.8 + }); + scene.addLayer(layer); + }); +}); diff --git a/examples/line/animate/index.en.md b/examples/line/animate/index.en.md new file mode 100644 index 0000000000..9d42887b1b --- /dev/null +++ b/examples/line/animate/index.en.md @@ -0,0 +1,4 @@ +--- +title: Line Animate +order: 1 +--- diff --git a/examples/line/animate/index.zh.md b/examples/line/animate/index.zh.md new file mode 100644 index 0000000000..f5966d0024 --- /dev/null +++ b/examples/line/animate/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 线动画 +order: 1 +--- diff --git a/stories/Layers/components/Arc2DLine.tsx b/stories/Layers/components/Arc2DLine.tsx index 67d4e2d305..55107e54cc 100644 --- a/stories/Layers/components/Arc2DLine.tsx +++ b/stories/Layers/components/Arc2DLine.tsx @@ -35,8 +35,9 @@ export default class Arc2DLineDemo extends React.Component { y: 'lat2', }, }) - .size(3) + .size(1) .shape('arc') + .animate(true) .color('#8C1EB2') .style({ opacity: 1,