From 9e3242be2c0e84c42e935006f13700e058f4031b Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 14 Nov 2019 17:25:16 +0800 Subject: [PATCH] fix(demo): gatsby --- examples/heatmap/{basic => grid}/demo/grid.js | 21 ++-- .../heatmap/{basic => grid}/demo/meta.json | 0 .../heatmap/{basic => grid}/demo/world.js | 0 examples/heatmap/{basic => grid}/index.zh.md | 0 examples/heatmap/heatmap/demo/meta.json | 6 +- examples/heatmap/heatmap/index.zh.md | 2 + .../{basic => hexagon}/demo/hexagon.ts | 4 - examples/line/basic/demo/path.js | 28 ------ examples/line/basic/index.zh.md | 4 - examples/line/dash/demo/line.js | 44 --------- examples/line/dash/demo/meta.json | 20 ---- examples/line/dash/demo/path.js | 96 ------------------- examples/line/dash/index.zh.md | 4 - .../{basic/demo/line.js => path/demo/ele.js} | 0 .../demo/line2.js => path/demo/line.js} | 5 +- .../demo/line2.js => path/demo/linedash.js} | 4 +- examples/line/{basic => path}/demo/meta.json | 0 .../line/{basic => path}/demo/road_dark.js | 0 .../line/{basic => path}/demo/road_light.js | 0 examples/line/path/index.zh.md | 6 ++ examples/point/3d/demo/point.js | 6 +- examples/point/basic/demo/color.js | 19 +++- examples/point/chartmap/demo/chart.js | 2 +- examples/point/chartmap/demo/marker.js | 37 +++++++ examples/point/image/demo/size.js | 40 ++++---- examples/polygon/3d/index.zh.md | 2 + examples/raster/basic/index.zh.md | 2 + gatsby-browser.js | 4 +- .../core/src/services/layer/ILayerService.ts | 6 ++ .../services/layer/IStyleAttributeService.ts | 7 ++ .../core/src/services/layer/LayerService.ts | 34 +++++++ packages/core/src/utils/clock.ts | 50 ++++++++++ packages/layers/src/core/BaseLayer.ts | 7 ++ .../layers/src/heatmap/shaders/grid_vert.glsl | 2 +- .../src/heatmap/shaders/hexagon_3d_vert.glsl | 4 +- packages/layers/src/line/index.ts | 21 ++++ .../src/line/shaders/line_dash_frag.glsl | 4 + .../src/line/shaders/line_dash_vert.glsl | 2 + .../layers/src/line/shaders/line_frag.glsl | 13 ++- .../layers/src/line/shaders/line_vert.glsl | 2 + site/css/demo.css | 16 ++++ 41 files changed, 268 insertions(+), 256 deletions(-) rename examples/heatmap/{basic => grid}/demo/grid.js (77%) rename examples/heatmap/{basic => grid}/demo/meta.json (100%) rename examples/heatmap/{basic => grid}/demo/world.js (100%) rename examples/heatmap/{basic => grid}/index.zh.md (100%) rename examples/heatmap/{basic => hexagon}/demo/hexagon.ts (92%) delete mode 100644 examples/line/basic/demo/path.js delete mode 100644 examples/line/basic/index.zh.md delete mode 100644 examples/line/dash/demo/line.js delete mode 100644 examples/line/dash/demo/meta.json delete mode 100644 examples/line/dash/demo/path.js delete mode 100644 examples/line/dash/index.zh.md rename examples/line/{basic/demo/line.js => path/demo/ele.js} (100%) rename examples/line/{basic/demo/line2.js => path/demo/line.js} (88%) rename examples/line/{dash/demo/line2.js => path/demo/linedash.js} (93%) rename examples/line/{basic => path}/demo/meta.json (100%) rename examples/line/{basic => path}/demo/road_dark.js (100%) rename examples/line/{basic => path}/demo/road_light.js (100%) create mode 100644 examples/line/path/index.zh.md create mode 100644 examples/point/chartmap/demo/marker.js create mode 100644 packages/core/src/utils/clock.ts create mode 100644 site/css/demo.css diff --git a/examples/heatmap/basic/demo/grid.js b/examples/heatmap/grid/demo/grid.js similarity index 77% rename from examples/heatmap/basic/demo/grid.js rename to examples/heatmap/grid/demo/grid.js index 9255205525..3e2e1187e4 100644 --- a/examples/heatmap/basic/demo/grid.js +++ b/examples/heatmap/grid/demo/grid.js @@ -24,7 +24,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941 transforms: [ { type: 'grid', - size: 50, + size: 20, field: 'count', method: 'sum', }, @@ -33,22 +33,17 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-941 .size('sum', (value) => { return value; }) - .shape('square') + .shape('circle') .style({ - coverage: 1.0, + coverage: 0.8, angle: 0, opacity: 1.0, }) - .color('count', [ - '#002466', - '#105CB3', - '#2894E0', - '#CFF6FF', - '#FFF5B8', - '#FFAB5C', - '#F27049', - '#730D1C', - ]); + .color('count', ['#0A3663', '#1558AC', + '#3771D9', '#4D89E5', + '#64A5D3', '#72BED6', + '#83CED6', '#A6E1E0', + '#B8EFE2', '#D7F9F0']); scene.addLayer(layer); console.log(layer); diff --git a/examples/heatmap/basic/demo/meta.json b/examples/heatmap/grid/demo/meta.json similarity index 100% rename from examples/heatmap/basic/demo/meta.json rename to examples/heatmap/grid/demo/meta.json diff --git a/examples/heatmap/basic/demo/world.js b/examples/heatmap/grid/demo/world.js similarity index 100% rename from examples/heatmap/basic/demo/world.js rename to examples/heatmap/grid/demo/world.js diff --git a/examples/heatmap/basic/index.zh.md b/examples/heatmap/grid/index.zh.md similarity index 100% rename from examples/heatmap/basic/index.zh.md rename to examples/heatmap/grid/index.zh.md diff --git a/examples/heatmap/heatmap/demo/meta.json b/examples/heatmap/heatmap/demo/meta.json index c36eb6b0b9..89b0b97da4 100644 --- a/examples/heatmap/heatmap/demo/meta.json +++ b/examples/heatmap/heatmap/demo/meta.json @@ -1,16 +1,16 @@ { "title": { - "zh": "网格热力图", + "zh": "经典热力图", "en": "heatmap" }, "demos": [ { "filename": "world3d.js", - "title": "网格热力图" + "title": "经典热力图3D" }, { "filename": "world.js", - "title": "世界电厂热力图" + "title": "经典热力图2D" } ] } diff --git a/examples/heatmap/heatmap/index.zh.md b/examples/heatmap/heatmap/index.zh.md index e651ddabef..ea61d8545d 100644 --- a/examples/heatmap/heatmap/index.zh.md +++ b/examples/heatmap/heatmap/index.zh.md @@ -1,4 +1,6 @@ --- title: 经典热力图 order: 0 +redirect_from: + - /zh/examples/heatmap/ --- diff --git a/examples/heatmap/basic/demo/hexagon.ts b/examples/heatmap/hexagon/demo/hexagon.ts similarity index 92% rename from examples/heatmap/basic/demo/hexagon.ts rename to examples/heatmap/hexagon/demo/hexagon.ts index 376600dd17..eada0dd8d7 100644 --- a/examples/heatmap/basic/demo/hexagon.ts +++ b/examples/heatmap/hexagon/demo/hexagon.ts @@ -26,9 +26,6 @@ fetch( ], }) .size('sum', [0, 600]) - .scale('sum', { - type: 'quantize', - }) .shape('hexagon') .style({ coverage: 0.8, @@ -50,5 +47,4 @@ fetch( ].reverse(), ); scene.addLayer(layer); - console.log(layer); }); diff --git a/examples/line/basic/demo/path.js b/examples/line/basic/demo/path.js deleted file mode 100644 index 5558c7bd11..0000000000 --- a/examples/line/basic/demo/path.js +++ /dev/null @@ -1,28 +0,0 @@ -import { Scene } from '@l7/scene'; -import { LineLayer } from '@l7/layers' -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'amap', - style: 'light', - center: [120.2336, 30.2002], - zoom: 15, -}); - -fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json') - .then((res) => res.json()) - .then((data) => { - const layer = - new LineLayer({ - }) - .source(data) - .size(1.5) - .shape('line') - .color( - 'name', - ['#5B8FF9','#5CCEA1','#7B320A' ] - ) - scene.addLayer(layer); - console.log(layer); - - }); diff --git a/examples/line/basic/index.zh.md b/examples/line/basic/index.zh.md deleted file mode 100644 index 02e511f417..0000000000 --- a/examples/line/basic/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 路径地图 -order: 0 ---- diff --git a/examples/line/dash/demo/line.js b/examples/line/dash/demo/line.js deleted file mode 100644 index c06857cc8f..0000000000 --- a/examples/line/dash/demo/line.js +++ /dev/null @@ -1,44 +0,0 @@ -import { Scene } from '@l7/scene'; -import { DashLineLayer } from '@l7/layers' -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'amap', - style: 'light', - center: [102.602992, 23.107329], - zoom: 14, -}); - -fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') - .then((res) => res.json()) - .then((data) => { - const layer = - new DashLineLayer({ - }) - .source(data) - .size('ELEV', (h) => { - return h % 50 === 0 ? 1.0 : 0.5; - }) - .shape('line') - .scale('ELEV', { - type: 'quantize' - }) - .color( - 'ELEV', - [ '#E4682F', - '#FF8752', - '#FFA783', - '#FFBEA8', - '#FFDCD6', - '#EEF3FF', - '#C8D7F5', - '#A5C1FC', - '#7FA7F9', - '#5F8AE5' ].reverse() - ).style({ - dashArray:[10, 1], - }) - scene.addLayer(layer); - console.log(layer); - - }); diff --git a/examples/line/dash/demo/meta.json b/examples/line/dash/demo/meta.json deleted file mode 100644 index ac88d09d2f..0000000000 --- a/examples/line/dash/demo/meta.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "title": { - "zh": "线图层", - "en": "line" - }, - "demos": [ - { - "filename": "path.js", - "title": "路径" - }, - { - "filename": "line.js", - "title": "等高线" - }, - { - "filename": "line2.js", - "title": "等值线" - } - ] -} diff --git a/examples/line/dash/demo/path.js b/examples/line/dash/demo/path.js deleted file mode 100644 index a61fd36f91..0000000000 --- a/examples/line/dash/demo/path.js +++ /dev/null @@ -1,96 +0,0 @@ -import { Scene } from '@l7/scene'; -import { DashLineLayer } from '@l7/layers' -const scene = new Scene({ - id: 'map', - pitch: 0, - type: 'amap', - style: 'light', - center: [120.2336, 30.2002], - zoom: 3, -}); -const lineData ={ - "type": "FeatureCollection", - "features": [ - { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [ - 102.98583984374999, - 37.666429212090605 - ], - [ - 111.33544921874999, - 37.23032838760387 - ], - [ - 111.24755859375, - 34.92197103616377 - ], - [ - 98.15185546874999, - 35.44277092585766 - ], - [ - 98.701171875, - 41.09591205639546 - ], - [ - 100.5908203125, - 41.0130657870063 - ], - [ - 101.09619140625, - 41.0130657870063 - ], - [ - 101.689453125, - 41.0130657870063 - ], - [ - 102.26074218749999, - 41.0130657870063 - ], - [ - 102.26074218749999, - 40.58058466412761 - ], - [ - 102.23876953125, - 40.329795743702064 - ], - [ - 102.23876953125, - 39.977120098439634 - ], - [ - 102.26074218749999, - 40.212440718286466 - ], - [ - 102.48046875, - 39.87601941962116 - ] - ] - } - } - ] -}; -fetch('https://gw.alipayobjects.com/os/basement_prod/65e9cebb-8063-45e7-b18f-727da84e9908.json') - .then((res) => res.json()) - .then((data) => { - const layer = - new DashLineLayer({ - }) - .source(lineData) - .size(1.5) - .shape('line') - .color( - '#5B8FF9' - ) - scene.addLayer(layer); - console.log(layer); - - }); diff --git a/examples/line/dash/index.zh.md b/examples/line/dash/index.zh.md deleted file mode 100644 index 5b28db9bce..0000000000 --- a/examples/line/dash/index.zh.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: 虚线 -order: 0 ---- diff --git a/examples/line/basic/demo/line.js b/examples/line/path/demo/ele.js similarity index 100% rename from examples/line/basic/demo/line.js rename to examples/line/path/demo/ele.js diff --git a/examples/line/basic/demo/line2.js b/examples/line/path/demo/line.js similarity index 88% rename from examples/line/basic/demo/line2.js rename to examples/line/path/demo/line.js index 9049913700..6aaf9f159d 100644 --- a/examples/line/basic/demo/line2.js +++ b/examples/line/path/demo/line.js @@ -5,8 +5,8 @@ const scene = new Scene({ pitch: 0, type: 'amap', style: 'light', - center: [102.602992, 23.107329], - zoom: 4, + center: [102.602992, 33.107329], + zoom: 3.5, }); fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json') @@ -22,6 +22,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-227 .size('value', [0.5, 1, 1.5, 2]) .shape('line') .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A']) + .animate({enable:true}) scene.addLayer(layer); console.log(layer); diff --git a/examples/line/dash/demo/line2.js b/examples/line/path/demo/linedash.js similarity index 93% rename from examples/line/dash/demo/line2.js rename to examples/line/path/demo/linedash.js index 6f02472e56..4453e67cb3 100644 --- a/examples/line/dash/demo/line2.js +++ b/examples/line/path/demo/linedash.js @@ -5,8 +5,8 @@ const scene = new Scene({ pitch: 0, type: 'amap', style: 'light', - center: [102.602992, 23.107329], - zoom: 4, + center: [102.602992, 33.107329], + zoom: 3.5, }); fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json') diff --git a/examples/line/basic/demo/meta.json b/examples/line/path/demo/meta.json similarity index 100% rename from examples/line/basic/demo/meta.json rename to examples/line/path/demo/meta.json diff --git a/examples/line/basic/demo/road_dark.js b/examples/line/path/demo/road_dark.js similarity index 100% rename from examples/line/basic/demo/road_dark.js rename to examples/line/path/demo/road_dark.js diff --git a/examples/line/basic/demo/road_light.js b/examples/line/path/demo/road_light.js similarity index 100% rename from examples/line/basic/demo/road_light.js rename to examples/line/path/demo/road_light.js diff --git a/examples/line/path/index.zh.md b/examples/line/path/index.zh.md new file mode 100644 index 0000000000..8b26f1e716 --- /dev/null +++ b/examples/line/path/index.zh.md @@ -0,0 +1,6 @@ +--- +title: 路径地图 +order: 0 +redirect_from: + - /zh/examples/line/ +--- diff --git a/examples/point/3d/demo/point.js b/examples/point/3d/demo/point.js index 9da78ba911..2b97bd5d22 100644 --- a/examples/point/3d/demo/point.js +++ b/examples/point/3d/demo/point.js @@ -22,11 +22,11 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 x: 'longitude', y: 'latitude' } - }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn']) + }).shape('name',['cylinder', 'triangleColumn', 'hexagonColumn','squareColumn']) .size('unit_price', (h)=>{ - return [ 5,5, h / 1000 ] + return [ 15,15, h / 1000 ] }) - .color('name',['#49B5AD', "#5B8FF9"]) + .color('name',['#49B5AD', "#5B8FF9",'#E4504A','#E99431']) .style({ opacity: 1.0, }) diff --git a/examples/point/basic/demo/color.js b/examples/point/basic/demo/color.js index e370f77fc9..6cba3fe1db 100644 --- a/examples/point/basic/demo/color.js +++ b/examples/point/basic/demo/color.js @@ -22,13 +22,22 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 x: 'longitude', y: 'latitude' } - }).shape('circle') - .size('unit_price', [5, 25]) - .color('#5B8FF9') + }).shape('name',[ + 'circle', + 'triangle', + 'square', + 'pentagon', + 'hexagon', + 'octogon', + 'hexagram', + 'rhombus', + 'vesica', + ]) + .size('unit_price', [10, 25]) + .color('name',['#E4504A',"#E99431", "#EBCC53","#43A5DA","#6CC175"]) .style({ - opacity: 0.3, + opacity:1.0, strokeWidth: 1, - strokeColor: "#5B8FF9", }) diff --git a/examples/point/chartmap/demo/chart.js b/examples/point/chartmap/demo/chart.js index 140a8b20dd..ab264be1f3 100644 --- a/examples/point/chartmap/demo/chart.js +++ b/examples/point/chartmap/demo/chart.js @@ -1,6 +1,6 @@ import { Scene } from '@l7/scene'; import { Marker } from '@l7/component' -import * as G2Plot from '@antv/g2plot' +import G2Plot from '@antv/g2plot'; const scene = new Scene({ id: 'map', type: 'amap', diff --git a/examples/point/chartmap/demo/marker.js b/examples/point/chartmap/demo/marker.js new file mode 100644 index 0000000000..05015288de --- /dev/null +++ b/examples/point/chartmap/demo/marker.js @@ -0,0 +1,37 @@ +import { Scene } from '@l7/scene'; +import { Marker } from '@l7/component' +const scene = new Scene({ + id: 'map', + type: 'amap', + style: 'light', + center: [122.80009283836715, 37.05881309947238], + pitch: 0, + zoom: 3 +}); + +scene.on('loaded',()=>{ + addMarkers(); +}) + +function addMarkers() { + fetch('https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json') + .then((res) => res.json()) + .then((nodes) => { + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].g !== '1') continue; + var el = document.createElement('label'); + el.className = 'lableclass'; + el.textContent = nodes[i].v; + el.style.background = getColor(nodes[i].v); + const marker = new Marker({ + element: el + }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y }).addTo(scene);; + + } + }) +} + + + function getColor(v) { + return v > 50 ? '#800026' : v > 40 ? '#BD0026' : v > 30 ? '#E31A1C' : v > 20 ? '#FC4E2A' : v > 10 ? '#FD8D3C' : v > 5 ? '#FEB24C' : v > 0 ? '#FED976' : '#FFEDA0'; + } diff --git a/examples/point/image/demo/size.js b/examples/point/image/demo/size.js index 44f0d66871..d941a2805f 100644 --- a/examples/point/image/demo/size.js +++ b/examples/point/image/demo/size.js @@ -9,32 +9,28 @@ const scene = new Scene({ center: [121.40, 31.258134], zoom: 15, }); - -fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json') +scene.addImage('00', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'); +scene.addImage('01', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'); +scene.addImage('02', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'); +scene.addImage('04', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'); +scene.addImage('11', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'); +scene.addImage('15', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'); +scene.addImage('07', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'); +scene.addImage('16', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'); +scene.addImage('06', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'); +scene.addImage('08', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'); +scene.addImage('17', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'); +scene.addImage('05', 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'); +fetch('https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json') .then((res) => res.json()) .then((data) => { - scene.addImage( - '00', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ', - ); - scene.addImage( - '01', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ', - ); - scene.addImage( - '02', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ', - ); + const imageLayer = new PointImageLayer() - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } + .source(data) + .shape('w', function(w) { + return w; }) - .shape('name', ['00', '01','02']) - .size('unit_price', [5, 15]) + .size(20) scene.addLayer(imageLayer); }); diff --git a/examples/polygon/3d/index.zh.md b/examples/polygon/3d/index.zh.md index 1298ab2e17..62cb4fb498 100644 --- a/examples/polygon/3d/index.zh.md +++ b/examples/polygon/3d/index.zh.md @@ -1,4 +1,6 @@ --- title: 3D填充图 order: 0 +redirect_from: + - /zh/examples/polygon/ --- diff --git a/examples/raster/basic/index.zh.md b/examples/raster/basic/index.zh.md index 6147459f75..29cc71a8e1 100644 --- a/examples/raster/basic/index.zh.md +++ b/examples/raster/basic/index.zh.md @@ -1,4 +1,6 @@ --- title: 栅格图层 order: 0 +redirect_from: + - /zh/examples/raster/ --- diff --git a/gatsby-browser.js b/gatsby-browser.js index dd1cbe4384..c9608c7731 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,6 +1,8 @@ import './packages/component/src/css/l7.css'; +import './site/css/demo.css' // window.GeoTIFF = require('geotiff/dist/geotiff.bundle.js') window.scene = require('@l7/scene'); window.layers= require('@l7/layers'); window.component= require('@l7/component'); -window.G2Plot = require('@antv/g2plot'); +window.G2PO = require('@antv/g2plot'); + diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index d88002ea0d..d84e9b0c8b 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -1,9 +1,11 @@ import { SyncBailHook, SyncHook } from 'tapable'; +import Clock from '../../utils/clock'; import { IGlobalConfigService } from '../config/IConfigService'; import { IModel } from '../renderer/IModel'; import { IMultiPassRenderer } from '../renderer/IMultiPassRenderer'; import { ISource, ISourceCFG } from '../source/ISourceService'; import { + IAnimateOption, IEncodeFeature, IScale, IScaleOptions, @@ -62,6 +64,7 @@ export interface ILayer { color(field: StyleAttrField, value?: StyleAttributeOption): ILayer; shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer; label(field: StyleAttrField, value?: StyleAttributeOption): ILayer; + animate(option: IAnimateOption): ILayer; // pattern(field: string, value: StyleAttributeOption): ILayer; // filter(field: string, value: StyleAttributeOption): ILayer; // active(option: ActiveOption): ILayer; @@ -146,8 +149,11 @@ export interface ILayerInitializationOptions { * 提供 Layer 管理服务 */ export interface ILayerService { + clock: Clock; add(layer: ILayer): void; initLayers(): void; + startAnimate(): void; + stopAnimate(): void; getLayers(): ILayer[]; getLayer(name: string): ILayer | undefined; remove(layer: ILayer): void; diff --git a/packages/core/src/services/layer/IStyleAttributeService.ts b/packages/core/src/services/layer/IStyleAttributeService.ts index 410fd946ee..c6584232b9 100644 --- a/packages/core/src/services/layer/IStyleAttributeService.ts +++ b/packages/core/src/services/layer/IStyleAttributeService.ts @@ -61,6 +61,13 @@ export enum AttributeType { Uniform, } +export interface IAnimateOption { + enable: boolean; + interval?: number; + duration?: number; + trailLength?: number; +} + export interface IEncodeFeature { color?: Color; size?: number | number[]; diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 4044dbe214..fb50cabe81 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -1,14 +1,21 @@ import { inject, injectable } from 'inversify'; import { container, ILayer } from '../..'; import { TYPES } from '../../types'; +import Clock from '../../utils/clock'; import { IGlobalConfigService } from '../config/IConfigService'; import { IRendererService } from '../renderer/IRendererService'; import { ILayerService } from './ILayerService'; @injectable() export default class LayerService implements ILayerService { + public clock = new Clock(); + private layers: ILayer[] = []; + private layerRenderID: number; + + private animateInstanceCount: number = 0; + @inject(TYPES.IRendererService) private readonly renderService: IRendererService; @@ -73,6 +80,24 @@ export default class LayerService implements ILayerService { this.layers = []; } + public startAnimate() { + if (this.animateInstanceCount++ === 0) { + this.runRender(); + } + } + + public stopAnimate() { + if (--this.animateInstanceCount === 0) { + this.stopRender(); + } + } + + private initPlugin(layer: ILayer) { + for (const plugin of layer.plugins) { + plugin.apply(layer); + } + } + private clear() { this.renderService.clear({ color: [0, 0, 0, 0], @@ -80,4 +105,13 @@ export default class LayerService implements ILayerService { framebuffer: null, }); } + + private runRender() { + this.renderLayers(); + this.layerRenderID = requestAnimationFrame(this.renderLayers.bind(this)); + } + + private stopRender() { + cancelAnimationFrame(this.layerRenderID); + } } diff --git a/packages/core/src/utils/clock.ts b/packages/core/src/utils/clock.ts new file mode 100644 index 0000000000..a51f946242 --- /dev/null +++ b/packages/core/src/utils/clock.ts @@ -0,0 +1,50 @@ +// https://github.com/mrdoob/three.js/blob/master/src/core/Clock.js +export default class Clock { + private autoStart: boolean; + private startTime: number = 0; + private oldTime: number = 0; + private running: boolean = false; + private elapsedTime: number = 0; + constructor(autoStart = true) { + this.autoStart = autoStart; + } + public start() { + this.startTime = (typeof performance === 'undefined' + ? Date + : performance + ).now(); + + this.oldTime = this.startTime; + this.elapsedTime = 0; + this.running = true; + } + public stop() { + this.getElapsedTime(); + this.running = false; + this.autoStart = false; + } + + public getElapsedTime() { + this.getDelta(); + return this.elapsedTime; + } + public getDelta() { + let diff = 0; + + if (this.autoStart && !this.running) { + this.start(); + return 0; + } + + if (this.running) { + const newTime = (typeof performance === 'undefined' + ? Date + : performance + ).now(); + diff = (newTime - this.oldTime) / 1000; + this.oldTime = newTime; + this.elapsedTime += diff; + } + return diff; + } +} diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 76ba8fb35e..fcb90df68b 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -1,5 +1,6 @@ import { gl, + IAnimateOption, ICameraService, IEncodeFeature, IFontService, @@ -135,6 +136,8 @@ export default class BaseLayer extends EventEmitter }; } = {}; + protected animateOptions: IAnimateOption = { enable: false }; + private encodedData: IEncodeFeature[]; private configSchema: object; @@ -280,6 +283,10 @@ export default class BaseLayer extends EventEmitter ); return this; } + public animate(options: IAnimateOption) { + this.animateOptions = options; + return this; + } public source(data: any, options?: ISourceCFG): ILayer { this.sourceOption = { diff --git a/packages/layers/src/heatmap/shaders/grid_vert.glsl b/packages/layers/src/heatmap/shaders/grid_vert.glsl index f7e97a87ae..5cc66a19b6 100644 --- a/packages/layers/src/heatmap/shaders/grid_vert.glsl +++ b/packages/layers/src/heatmap/shaders/grid_vert.glsl @@ -17,7 +17,7 @@ void main() { v_color = a_Color; mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle)); - vec2 offset = a_Position.xy * u_radius * rotationMatrix ; + vec2 offset = a_Position.xy * u_radius * rotationMatrix * u_coverage ; // vec2 lnglat = unProjectFlat(a_Pos.xy); vec4 project_pos = project_position(vec4(a_Pos.xy + offset, 0, 1.0)); gl_Position = project_common_position_to_clipspace(project_pos); diff --git a/packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl b/packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl index 0c38ff5c38..856b39be1b 100644 --- a/packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl +++ b/packages/layers/src/heatmap/shaders/hexagon_3d_vert.glsl @@ -17,13 +17,13 @@ varying vec4 v_color; #pragma include "project" #pragma include "light" void main() { - + mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle)); vec2 offset =(vec2(a_Position.xy * u_radius * rotationMatrix * u_coverage)); vec2 lnglat = unProjectFlat(a_Pos.xy + offset); vec4 project_pos = project_position(vec4(lnglat, a_Position.z * a_Size, 1.0)); float lightWeight = calc_lighting(project_pos); - v_color =vec4(a_Color.rgb*lightWeight, a_Color.w); + v_color =vec4(a_Color.rgb*lightWeight, a_Color.w); gl_Position = project_common_position_to_clipspace(project_pos); } diff --git a/packages/layers/src/line/index.ts b/packages/layers/src/line/index.ts index 9e4af3bc9b..66a8e3f3bf 100644 --- a/packages/layers/src/line/index.ts +++ b/packages/layers/src/line/index.ts @@ -9,6 +9,8 @@ interface IPointLayerStyleOptions { export default class LineLayer extends BaseLayer { public name: string = 'LineLayer'; + private animateStartTime: number = 0; + protected getConfigSchema() { return { properties: { @@ -22,11 +24,21 @@ export default class LineLayer extends BaseLayer { } protected renderModels() { + const { + enable, + interval = 0.2, + trailLength = 0.2, + duration = 2, + } = this.animateOptions; + const animate = enable ? 1 : 0; const { opacity } = this.getStyleOptions(); this.models.forEach((model) => model.draw({ uniforms: { u_opacity: opacity || 1.0, + u_time: + this.layerService.clock.getElapsedTime() - this.animateStartTime, + u_animate: [animate, duration, interval, trailLength], }, }), ); @@ -52,6 +64,7 @@ export default class LineLayer extends BaseLayer { }, }), ]; + // this.initAnimate(); } private registerBuiltinAttributes(layer: ILayer) { @@ -128,4 +141,12 @@ export default class LineLayer extends BaseLayer { }, }); } + // 拆分的动画插件 + private initAnimate() { + const { enable } = this.animateOptions; + if (enable) { + this.layerService.startAnimate(); + this.animateStartTime = this.layerService.clock.getElapsedTime(); + } + } } diff --git a/packages/layers/src/line/shaders/line_dash_frag.glsl b/packages/layers/src/line/shaders/line_dash_frag.glsl index 2dbee9d6d1..698c72179f 100644 --- a/packages/layers/src/line/shaders/line_dash_frag.glsl +++ b/packages/layers/src/line/shaders/line_dash_frag.glsl @@ -5,6 +5,9 @@ uniform float u_dash_ratio : 0.1; varying vec4 v_color; varying vec2 v_normal; +uniform float u_time; +uniform vec3 u_aimate: [ 0, 2., 1.0, 0.2 ]; + varying float v_distance_ratio; varying vec2 v_dash_array; void main() { @@ -15,4 +18,5 @@ void main() { // gl_FragColor.a *= blur * ceil(mod(v_distance_ratio, v_dash_array.x) - v_dash_array.y); gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y))); + } diff --git a/packages/layers/src/line/shaders/line_dash_vert.glsl b/packages/layers/src/line/shaders/line_dash_vert.glsl index 34e6b9b1ab..43f0332b00 100644 --- a/packages/layers/src/line/shaders/line_dash_vert.glsl +++ b/packages/layers/src/line/shaders/line_dash_vert.glsl @@ -16,6 +16,8 @@ varying vec2 v_normal; varying float v_distance_ratio; + + #pragma include "projection" void main() { diff --git a/packages/layers/src/line/shaders/line_frag.glsl b/packages/layers/src/line/shaders/line_frag.glsl index 0af8c88906..817c97e4cf 100644 --- a/packages/layers/src/line/shaders/line_frag.glsl +++ b/packages/layers/src/line/shaders/line_frag.glsl @@ -5,12 +5,23 @@ uniform float u_dash_ratio : 0.0; varying vec4 v_color; varying vec2 v_normal; +uniform float u_time; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; +// [animate, duration, interval, trailLength], varying float v_distance_ratio; varying float v_dash_array; void main() { gl_FragColor = v_color; // anti-alias float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)) * u_opacity; - gl_FragColor.a *= blur; + // gl_FragColor.a *= blur; + + #ifdef ANIMATE + + float alpha =1.0 - fract( mod(1.0- v_distance_ratio,u_aimate.z)* (1.0/ u_aimate.z) + u_time / u_aimate.y); + alpha = (alpha + u_aimate.w -1.0) / u_aimate.w; + alpha = smoothstep(0., 1., alpha); + gl_FragColor.a *= alpha * blur; + #endif } diff --git a/packages/layers/src/line/shaders/line_vert.glsl b/packages/layers/src/line/shaders/line_vert.glsl index 93bc05bba3..7b4c674f4c 100644 --- a/packages/layers/src/line/shaders/line_vert.glsl +++ b/packages/layers/src/line/shaders/line_vert.glsl @@ -5,10 +5,12 @@ attribute vec2 a_Size; attribute vec3 a_Normal; attribute vec3 a_Position; uniform mat4 u_ModelMatrix; + #pragma include "projection" varying vec4 v_color; varying float v_dash_array; varying vec2 v_normal; + void main() { v_normal = vec2(reverse_offset_normal(a_Normal) * sign(a_Miter)); v_color = a_Color; diff --git a/site/css/demo.css b/site/css/demo.css new file mode 100644 index 0000000000..266a6a02bf --- /dev/null +++ b/site/css/demo.css @@ -0,0 +1,16 @@ +.lableclass { + position: absolute; + display: inline; + cursor: pointer; + background: rgb(255, 228, 120); + border: none; padding: 4px; + white-space: nowrap; + font: bold 12px/18px arial, sans-serif; + color: rgb(51, 51, 51); + box-shadow: rgb(153, 153, 153) 1px 1px 2px; + border-radius: 4px; + width: 22px; + height: 24px; + text-align: center; + user-select: none; +}