diff --git a/docs/api/layer/line_layer/arc.en.md b/docs/api/layer/line_layer/arc.en.md new file mode 100644 index 0000000000..78e87d4bdd --- /dev/null +++ b/docs/api/layer/line_layer/arc.en.md @@ -0,0 +1,75 @@ +--- +title: 弧线图 +order: 1 +--- +将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等 + +## 使用 + +### 数据 +绘制弧线只需提供起始点坐标即可 + +```javascript + source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2' + } + }) +``` + +### shape + +弧线支持两种弧线算法 + +- arc 绘制弧线 通过贝塞尔曲线算法技术弧线 +- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线 +- arc3d 3d 弧线地图 3D 视角 + + +### 示例代码 + +```javascript +const layer = new LineLayer({}) + .source(data, { + parser: { + type: 'csv', + x: 'lng1', + y: 'lat1', + x1: 'lng2', + y1: 'lat2' + } + }) + .size(1) + .shape('arc') + .color('#8C1EB2') + .style({ + opacity: 0.8, + }); +``` +### animate + +#### 开启关闭动画 + +```javascript +layer.animate(true) +layer.animate(false) +``` + +#### 设置动画参数 + +- duration 动画时间 单位(s)秒 +- interval 轨迹间隔, 取值区间 0 - 1 +- trailLength 轨迹长度 取值区间 0 - 1 + +```javascript +layer.animate({ + duration: 4, + interval: 0.2, + trailLength: 0.1 + +}) +``` diff --git a/docs/api/layer/line_layer/path.zh.md b/docs/api/layer/line_layer/path.zh.md index 15737427fd..1a2602b6b4 100644 --- a/docs/api/layer/line_layer/path.zh.md +++ b/docs/api/layer/line_layer/path.zh.md @@ -23,4 +23,27 @@ shape 设置成line即可绘制路线图 ``` ### animate +#### 开启关闭动画 + +```javascript +layer.animate(true) +layer.animate(false) +``` + +#### 设置动画参数 + +- duration 动画时间 单位(s)秒 +- interval 轨迹间隔, 取值区间 0 - 1 +- trailLength 轨迹长度 取值区间 0 - 1 + +```javascript +layer.animate({ + duration: 4, + interval: 0.2, + trailLength: 0.1 + +}) +``` + + diff --git a/examples/gallery/basic/demo/animate.js b/examples/gallery/animate/demo/animate.js similarity index 100% rename from examples/gallery/basic/demo/animate.js rename to examples/gallery/animate/demo/animate.js diff --git a/examples/gallery/basic/demo/animate_line.js b/examples/gallery/animate/demo/animate_line.js similarity index 89% rename from examples/gallery/basic/demo/animate_line.js rename to examples/gallery/animate/demo/animate_line.js index 9df1b86fdd..b69fffbc37 100644 --- a/examples/gallery/basic/demo/animate_line.js +++ b/examples/gallery/animate/demo/animate_line.js @@ -4,7 +4,7 @@ const scene = new Scene({ id: 'map', map: new Mapbox({ center: [ -74.006, 40.7128 ], - zoom: 15, + zoom: 14, style: 'dark' }) }); @@ -27,9 +27,9 @@ fetch( return `rgb(${v[0]})`; }) .animate({ - interval: 0.5, - trailLength: 0.4, - duration: 4 + interval: 0.1, + trailLength: 1.0, + duration: 2 }); scene.addLayer(lineLayer); }); diff --git a/examples/gallery/basic/demo/build.js b/examples/gallery/animate/demo/build.js similarity index 100% rename from examples/gallery/basic/demo/build.js rename to examples/gallery/animate/demo/build.js diff --git a/examples/gallery/animate/demo/meta.json b/examples/gallery/animate/demo/meta.json new file mode 100644 index 0000000000..9b3a0af97a --- /dev/null +++ b/examples/gallery/animate/demo/meta.json @@ -0,0 +1,23 @@ +{ + "title": { + "zh": "图库", + "en": "Gallery" + }, + "demos": [ + { + "filename": "animate.js", + "title": "轨迹动画", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "build.js", + "title": "点亮城市", + "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "animate_line.js", + "title": "轨迹动画", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8cXXR5FxHgAAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/gallery/animate/demo/world.js b/examples/gallery/animate/demo/world.js new file mode 100644 index 0000000000..0281b6dc43 --- /dev/null +++ b/examples/gallery/animate/demo/world.js @@ -0,0 +1,78 @@ +/* eslint-disable no-eval */ +import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7'; +import { Mapbox } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + pitch: 40, + style: 'blank', + center: [ 3.438, 40.16797 ], + zoom: 0.51329 + }) +}); +Promise.all([ + fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()), + fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()), + fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text()) +]).then(function onLoad([ world, dot, flyline ]) { + const dotData = eval(dot); + const flydata = eval(flyline).map(item => { + const latlng1 = item.from.split(',').map(e => { return e * 1; }); + const latlng2 = item.to.split(',').map(e => { return e * 1; }); + return { coord: [ latlng1, latlng2 ] }; + }); + const worldFill = new PolygonLayer() + .source(world) + .color('#98E3FA') + .shape('fill') + .style({ + opacity: 1 + }); + + const worldLine = new LineLayer() + .source(world) + .color('#fff') + .size(0.6) + .style({ + opacity: 1 + }); + const dotPoint = new PointLayer() + .source(dotData, { + parser: { + type: 'json', + x: 'lng', + y: 'lat' + } + }) + .shape('circle') + .color('red') + .animate(true) + .size(40) + .style({ + opacity: 1.0 + }); + const flyLine = new LineLayer() + .source(flydata, { + parser: { + type: 'json', + coordinates: 'coord' + } + }) + .color('#faad14') + .shape('arc3d') + .size(2.0) + .animate({ + interval: 0.1, + trailLength: 1.0, + duration: 2 + }) + .style({ + opacity: 1 + }); + scene.addLayer(worldFill); + scene.addLayer(worldLine); + scene.addLayer(dotPoint); + scene.addLayer(flyLine); +}); + diff --git a/examples/gallery/animate/index.en.md b/examples/gallery/animate/index.en.md new file mode 100644 index 0000000000..74cacd64b2 --- /dev/null +++ b/examples/gallery/animate/index.en.md @@ -0,0 +1,4 @@ +--- +title: Animate +order: 1 +--- diff --git a/examples/gallery/animate/index.zh.md b/examples/gallery/animate/index.zh.md new file mode 100644 index 0000000000..3be864dda9 --- /dev/null +++ b/examples/gallery/animate/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 动画 +order: 1 +--- diff --git a/examples/gallery/basic/demo/meta.json b/examples/gallery/basic/demo/meta.json index 5999b8faa8..2510cc7524 100644 --- a/examples/gallery/basic/demo/meta.json +++ b/examples/gallery/basic/demo/meta.json @@ -4,16 +4,6 @@ "en": "Gallery" }, "demos": [ - { - "filename": "animate.js", - "title": "轨迹动画", - "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ" - }, - { - "filename": "build.js", - "title": "点亮城市", - "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ" - }, { "filename": "column_dark.js", "title": "3D柱图深色", diff --git a/examples/gallery/basic/index.zh.md b/examples/gallery/basic/index.zh.md index 09884f5206..f0d63d2a5d 100644 --- a/examples/gallery/basic/index.zh.md +++ b/examples/gallery/basic/index.zh.md @@ -1,4 +1,4 @@ --- -title: 官方精品库 +title: 基础可视化 order: 0 --- diff --git a/examples/point/bubble/demo/scatter.js b/examples/point/bubble/demo/scatter.js index d0b0bd66a5..0950578e39 100644 --- a/examples/point/bubble/demo/scatter.js +++ b/examples/point/bubble/demo/scatter.js @@ -27,8 +27,8 @@ fetch( .shape('circle') .active(true) .animate(true) - .size(40) - .color('#ffa842') + .size(56) + .color('#4cfd47') .style({ opacity: 1 }); diff --git a/examples/point/text/demo/point_text.js b/examples/point/text/demo/point_text.js index ffba83f146..45c688e814 100644 --- a/examples/point/text/demo/point_text.js +++ b/examples/point/text/demo/point_text.js @@ -23,15 +23,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') } }) .shape('m', 'text') - .size(18) - .color('w', [ '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac' ]) + .size(12) + .color('w', [ '#0e0030', '#0e0030', '#0e0030' ]) .style({ textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直] spacing: 2, // 字符间距 padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: 'red', // 描边颜色 - strokeWidth: 1, // 描边宽度 + stroke: '#ffffff', // 描边颜色 + strokeWidth: 0.3, // 描边宽度 strokeOpacity: 1.0 });