From 26c3cca5118fce63b3a496d2166452f880b66026 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Thu, 7 Nov 2019 00:52:03 +0800 Subject: [PATCH] feat(scene): scene service inTransientScope --- .gitignore | 90 ++++- .storybook/addons.ts | 2 +- examples/data/basic/demo/line.js | 39 ++ examples/data/basic/demo/meta.json | 13 + examples/data/basic/index.zh.md | 4 + examples/gallery/basic/demo/line.js | 39 ++ examples/gallery/basic/demo/meta.json | 13 + examples/gallery/basic/index.zh.md | 4 + examples/heatmap/basic/demo/line.js | 39 ++ examples/heatmap/basic/demo/meta.json | 13 + examples/heatmap/basic/index.zh.md | 4 + examples/line/basic/demo/line.js | 39 ++ examples/line/basic/demo/meta.json | 13 + examples/line/basic/index.zh.md | 4 + examples/marker/basic/demo/line.js | 39 ++ examples/marker/basic/demo/meta.json | 13 + examples/marker/basic/index.zh.md | 4 + examples/point/basic/data.json | 351 ------------------ examples/point/basic/demo/color.js | 40 +- examples/point/basic/demo/point.js | 22 +- examples/point/basic/index.zh.md | 5 - examples/point/image/demo/image.js | 41 ++ examples/point/image/demo/meta.json | 13 + examples/point/image/demo/size.js | 41 ++ examples/point/image/index.zh.md | 4 + examples/polygon/basic/demo/meta.json | 13 + examples/polygon/basic/demo/polygon.js | 41 ++ examples/polygon/basic/index.zh.md | 6 + examples/raster/basic/demo/line.js | 39 ++ examples/raster/basic/demo/meta.json | 13 + examples/raster/basic/index.zh.md | 4 + examples/scene/{ => basic}/demo/amap.js | 3 - examples/scene/{ => basic}/demo/mapbox.js | 3 +- examples/scene/{ => basic}/demo/meta.json | 6 +- examples/scene/{ => basic}/index.zh.md | 3 +- examples/scene/control/demo/amap.js | 9 + examples/scene/control/demo/mapbox.js | 10 + examples/scene/control/demo/meta.json | 18 + examples/scene/map/demo/amap.js | 9 + gatsby-browser.js | 3 +- gatsby-config.js | 64 +++- .../core/src/services/asset/FontService.ts | 1 + .../core/src/services/asset/IIconService.ts | 4 +- .../core/src/services/asset/IconService.ts | 27 +- .../src/services/component/ControlService.ts | 5 +- .../interaction/InteractionService.ts | 8 + .../core/src/services/layer/LayerService.ts | 4 +- packages/core/src/services/log/LogService.ts | 2 +- packages/core/src/services/renderer/IModel.ts | 2 + .../renderer/passes/PixelPickingPass.ts | 2 +- .../core/src/services/scene/SceneService.ts | 13 +- .../services/shader/IShaderModuleService.ts | 1 + .../services/shader/ShaderModuleService.ts | 6 +- packages/layers/src/index.ts | 2 +- packages/layers/src/point/extrude.ts | 1 - packages/layers/src/point/fill.ts | 154 ++++++++ packages/layers/src/point/image.ts | 21 +- packages/layers/src/point/point.ts | 130 ------- .../layers/src/point/shaders/fill_frag.glsl | 6 +- .../layers/src/point/shaders/fill_vert.glsl | 4 + .../layers/src/point/shaders/image_frag.glsl | 20 +- .../layers/src/point/shaders/image_vert.glsl | 8 +- packages/maps/src/amap/Viewport.ts | 1 - packages/maps/src/amap/index.ts | 10 +- packages/maps/src/amap/theme.ts | 2 +- packages/maps/src/mapbox/index.ts | 8 +- packages/scene/src/index.ts | 2 +- stories/Layers/components/Line.tsx | 2 +- stories/Layers/components/pointImage.tsx | 58 +-- stories/Picking/components/Highlight.tsx | 4 +- stories/Picking/components/Tooltip.tsx | 2 +- 71 files changed, 1034 insertions(+), 609 deletions(-) create mode 100644 examples/data/basic/demo/line.js create mode 100644 examples/data/basic/demo/meta.json create mode 100644 examples/data/basic/index.zh.md create mode 100644 examples/gallery/basic/demo/line.js create mode 100644 examples/gallery/basic/demo/meta.json create mode 100644 examples/gallery/basic/index.zh.md create mode 100644 examples/heatmap/basic/demo/line.js create mode 100644 examples/heatmap/basic/demo/meta.json create mode 100644 examples/heatmap/basic/index.zh.md create mode 100644 examples/line/basic/demo/line.js create mode 100644 examples/line/basic/demo/meta.json create mode 100644 examples/line/basic/index.zh.md create mode 100644 examples/marker/basic/demo/line.js create mode 100644 examples/marker/basic/demo/meta.json create mode 100644 examples/marker/basic/index.zh.md delete mode 100644 examples/point/basic/data.json create mode 100644 examples/point/image/demo/image.js create mode 100644 examples/point/image/demo/meta.json create mode 100644 examples/point/image/demo/size.js create mode 100644 examples/point/image/index.zh.md create mode 100644 examples/polygon/basic/demo/meta.json create mode 100644 examples/polygon/basic/demo/polygon.js create mode 100644 examples/polygon/basic/index.zh.md create mode 100644 examples/raster/basic/demo/line.js create mode 100644 examples/raster/basic/demo/meta.json create mode 100644 examples/raster/basic/index.zh.md rename examples/scene/{ => basic}/demo/amap.js (81%) rename examples/scene/{ => basic}/demo/mapbox.js (83%) rename examples/scene/{ => basic}/demo/meta.json (80%) rename examples/scene/{ => basic}/index.zh.md (58%) create mode 100644 examples/scene/control/demo/amap.js create mode 100644 examples/scene/control/demo/mapbox.js create mode 100644 examples/scene/control/demo/meta.json create mode 100644 examples/scene/map/demo/amap.js create mode 100644 packages/layers/src/point/fill.ts delete mode 100644 packages/layers/src/point/point.ts diff --git a/.gitignore b/.gitignore index 41df2a35fb..c5dea2def4 100644 --- a/.gitignore +++ b/.gitignore @@ -67,4 +67,92 @@ jspm_packages/ lib/ .DS_Store -public \ No newline at end of file +public +.cache/redirects.json +.cache/redux.state +.cache/caches/gatsby-transformer-remark/diskstore-0b12f383a1ce9a8cdbb2a4f52cf8af84.json +.cache/caches/gatsby-transformer-remark/diskstore-1ea0cd3c8f491f1774b8edd1ce38b1f9.json +.cache/caches/gatsby-transformer-remark/diskstore-2b8cd1df4f8a6941bff4108301b5d6a9.json +.cache/caches/gatsby-transformer-remark/diskstore-2c713f7ba9a30ac45cbadf6d86d5d544.json +.cache/caches/gatsby-transformer-remark/diskstore-2e9a5d11bfbd9e331e877b0e013a0ab8.json +.cache/caches/gatsby-transformer-remark/diskstore-03f70e3c5a52291e52b331e3d35900a4.json +.cache/caches/gatsby-transformer-remark/diskstore-5a894e6dcf41aaf38dcfe7c4ef24bb6c.json +.cache/caches/gatsby-transformer-remark/diskstore-5aa0c32748bae2a74e08828fed4fd3a6.json +.cache/caches/gatsby-transformer-remark/diskstore-5be2deb5db771c62d6348aacc8798213.json +.cache/caches/gatsby-transformer-remark/diskstore-5ce457da6f1384d2d0a1c8d65aa7035f.json +.cache/caches/gatsby-transformer-remark/diskstore-5e29728bfdb977a2a740b90f7e81c026.json +.cache/caches/gatsby-transformer-remark/diskstore-6e44d9bde57e425196c802f385c59145.json +.cache/caches/gatsby-transformer-remark/diskstore-7c691ebc8b681ec76a0dd2b62e2186ba.json +.cache/caches/gatsby-transformer-remark/diskstore-8a657829abac5ed5e9e205e519d6ded0.json +.cache/caches/gatsby-transformer-remark/diskstore-8c6f6648e48a1e25d0879cba52c6f15c.json +.cache/caches/gatsby-transformer-remark/diskstore-9a6db7a621d98f2e40fca942ffec8d7f.json +.cache/caches/gatsby-transformer-remark/diskstore-09be3cfc8fb53b393e594e000fb9c3c4.json +.cache/caches/gatsby-transformer-remark/diskstore-9ea0254de64dbc01eafc57f7dafb6400.json +.cache/caches/gatsby-transformer-remark/diskstore-9fb8c242123b7f40762c92122bacea8e.json +.cache/caches/gatsby-transformer-remark/diskstore-31a80985ee546abb7aa91ce454986fb1.json +.cache/caches/gatsby-transformer-remark/diskstore-34caa57442541fb555e65adf766c9dbf.json +.cache/caches/gatsby-transformer-remark/diskstore-35f1e3ed2504889557819cd85f730da3.json +.cache/caches/gatsby-transformer-remark/diskstore-51d0f3b693c1d063f395570395293fb4.json +.cache/caches/gatsby-transformer-remark/diskstore-60ffaa0253ce67428f5a7e31a4a0bad1.json +.cache/caches/gatsby-transformer-remark/diskstore-61c1d71d82d9e8cb724bc675e994ee07.json +.cache/caches/gatsby-transformer-remark/diskstore-62ff8f6ebb8d87c110d712e03f9a98e9.json +.cache/caches/gatsby-transformer-remark/diskstore-63f86e913288c0406ba43ec83f25684f.json +.cache/caches/gatsby-transformer-remark/diskstore-97cfab1e1ad583ea0fa987b5c84f159c.json +.cache/caches/gatsby-transformer-remark/diskstore-314bc0cb54aa930a49cfb58df8b50ffa.json +.cache/caches/gatsby-transformer-remark/diskstore-335fc52df6558698584a4c58a93133dc.json +.cache/caches/gatsby-transformer-remark/diskstore-468b5bae8ef758f28811323986a026ca.json +.cache/caches/gatsby-transformer-remark/diskstore-479f7412bfaf2ad395f176418584631a.json +.cache/caches/gatsby-transformer-remark/diskstore-509da604a7cd9c41a31392dd15cfd143.json +.cache/caches/gatsby-transformer-remark/diskstore-833c6a9868536cc7f0ee995069745bd6.json +.cache/caches/gatsby-transformer-remark/diskstore-3240b72791cdbb0de473bd7b0fc3f4a3.json +.cache/caches/gatsby-transformer-remark/diskstore-4959c881d2fccc57dea5cba657223041.json +.cache/caches/gatsby-transformer-remark/diskstore-6195db1b342fb1235a247e18694e1cc8.json +.cache/caches/gatsby-transformer-remark/diskstore-8152d0a6832522eb79f34eecc5e89cd4.json +.cache/caches/gatsby-transformer-remark/diskstore-9429c44d730cc08b4b28804d3d7d5a2c.json +.cache/caches/gatsby-transformer-remark/diskstore-19012e1f6f28c599baa0778f3e002c21.json +.cache/caches/gatsby-transformer-remark/diskstore-20649dc8fd4cdde49b1d9ea0c26371b2.json +.cache/caches/gatsby-transformer-remark/diskstore-96374eabb69d89610d3ad583e7ef7bfc.json +.cache/caches/gatsby-transformer-remark/diskstore-164252f91872bc33e77d29eb616fafa1.json +.cache/caches/gatsby-transformer-remark/diskstore-419766453a3a10f392d412948ad4520a.json +.cache/caches/gatsby-transformer-remark/diskstore-2763556052b3406bbcf4532fe8fa5d4e.json +.cache/caches/gatsby-transformer-remark/diskstore-a9a7598872d374acd56469ecbe4a84da.json +.cache/caches/gatsby-transformer-remark/diskstore-a7725b15bd64a40f9d4d5eb35340b314.json +.cache/caches/gatsby-transformer-remark/diskstore-aae05a37d5dbc73377131a3df8a830bd.json +.cache/caches/gatsby-transformer-remark/diskstore-b0407a444ef8acb3f4819a2fd00c5ae3.json +.cache/caches/gatsby-transformer-remark/diskstore-b923ecb39dc7dd6f4752bf9bbf5c94da.json +.cache/caches/gatsby-transformer-remark/diskstore-b089023713dde4294665d832c48ccd63.json +.cache/caches/gatsby-transformer-remark/diskstore-bbdcb1122dc2a86aef4134f4c5c42dc1.json +.cache/caches/gatsby-transformer-remark/diskstore-bd3cd1387f798ad20e18475f0929f324.json +.cache/caches/gatsby-transformer-remark/diskstore-be4a0f00b712d152c6b7536968d29cef.json +.cache/caches/gatsby-transformer-remark/diskstore-bea1dfafb379b4e5e4393814eff70f54.json +.cache/caches/gatsby-transformer-remark/diskstore-bee012580db1a2e5f57e03421caf971f.json +.cache/caches/gatsby-transformer-remark/diskstore-bf54f7f5282b043f03b2a3733bdac4f3.json +.cache/caches/gatsby-transformer-remark/diskstore-bf0995ffe3e44d36b50e8f808495c563.json +.cache/caches/gatsby-transformer-remark/diskstore-bf3648bcc8f9d552a4439069ae408fad.json +.cache/caches/gatsby-transformer-remark/diskstore-c32f0608dadae224d91a44d7bb4b66db.json +.cache/caches/gatsby-transformer-remark/diskstore-c320ffacf9b8eef3d92229d6a1a70d96.json +.cache/caches/gatsby-transformer-remark/diskstore-ca2fb97dfd9c7f243ca223efc08ffba5.json +.cache/caches/gatsby-transformer-remark/diskstore-ca3867e16d821cfd8579d7b29582e0b8.json +.cache/caches/gatsby-transformer-remark/diskstore-cbe5331f7cf63c058404726cdea224c2.json +.cache/caches/gatsby-transformer-remark/diskstore-cc83f0f387424948934f22053503ed85.json +.cache/caches/gatsby-transformer-remark/diskstore-d0b48925fc35a486d2edcefd379a8067.json +.cache/caches/gatsby-transformer-remark/diskstore-d2b3f82b0a8e66040aa810a8958afe0d.json +.cache/caches/gatsby-transformer-remark/diskstore-d4b28ce0015b79c52ff804a21a129aa0.json +.cache/caches/gatsby-transformer-remark/diskstore-d41ece99b0e508f70b31a8152b25f8a5.json +.cache/caches/gatsby-transformer-remark/diskstore-db5d13902d2d007ceff5537b4ca04b11.json +.cache/caches/gatsby-transformer-remark/diskstore-dc1901f7f1baf243df1556f52717b2ba.json +.cache/caches/gatsby-transformer-remark/diskstore-ddc1db31dfe2bcb6d2040bce323f5828.json +.cache/caches/gatsby-transformer-remark/diskstore-df75817e83ad0a2f79b98ce42e6056a8.json +.cache/caches/gatsby-transformer-remark/diskstore-e49d5822f90847d686ab7ed05c412e0b.json +.cache/caches/gatsby-transformer-remark/diskstore-e2145ab61e30e98413fb69c2f3d5098f.json +.cache/caches/gatsby-transformer-remark/diskstore-e8067f3515dcae00ea981c2733ca40cb.json +.cache/caches/gatsby-transformer-remark/diskstore-e72135977ad05cc3007997a59f58e7ed.json +.cache/caches/gatsby-transformer-remark/diskstore-ec259f9adac459854ebecf9375d97a8d.json +.cache/caches/gatsby-transformer-remark/diskstore-ee0df53bccbd3ad6e6ad1b28c1331ca4.json +.cache/caches/gatsby-transformer-remark/diskstore-f5cfa5aac1b0651a071bc0b0f90efa3c.json +.cache/caches/gatsby-transformer-remark/diskstore-f9c2ec20398ba84a7058c3475b4845c3.json +.cache/caches/gatsby-transformer-remark/diskstore-f250d30e0f7c9f0380924fbf1033efc3.json +.cache/caches/gatsby-transformer-remark/diskstore-fb18e835921f3dc32ae5b74bdfb36220.json +.cache/caches/gatsby-transformer-remark/diskstore-fbddf0de549e59cfa8bf242898a85984.json +.cache/caches/gatsby-transformer-remark/diskstore-feb74fcce830febf6919bf3857a7765f.json +.cache/caches/gatsby-transformer-remark/diskstore-fffb15ec8285c18963c880046e7fccce.json diff --git a/.storybook/addons.ts b/.storybook/addons.ts index b5cbcc0466..06915d6e12 100644 --- a/.storybook/addons.ts +++ b/.storybook/addons.ts @@ -1,3 +1,3 @@ import '@storybook/addon-actions/register'; import '@storybook/addon-notes/register'; -import '@storybook/addon-storysource/register'; \ No newline at end of file +import '@storybook/addon-storysource/register'; diff --git a/examples/data/basic/demo/line.js b/examples/data/basic/demo/line.js new file mode 100644 index 0000000000..288f28b1dd --- /dev/null +++ b/examples/data/basic/demo/line.js @@ -0,0 +1,39 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [102.602992, 23.107329], + zoom: 13, +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/data/basic/demo/meta.json b/examples/data/basic/demo/meta.json new file mode 100644 index 0000000000..42812b23e6 --- /dev/null +++ b/examples/data/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "图库", + "en": "Gallery" + }, + "demos": [ + { + "filename": "line.js", + "title": "线图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/data/basic/index.zh.md b/examples/data/basic/index.zh.md new file mode 100644 index 0000000000..a005c7b254 --- /dev/null +++ b/examples/data/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 数据 +order: 0 +--- diff --git a/examples/gallery/basic/demo/line.js b/examples/gallery/basic/demo/line.js new file mode 100644 index 0000000000..288f28b1dd --- /dev/null +++ b/examples/gallery/basic/demo/line.js @@ -0,0 +1,39 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [102.602992, 23.107329], + zoom: 13, +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/gallery/basic/demo/meta.json b/examples/gallery/basic/demo/meta.json new file mode 100644 index 0000000000..42812b23e6 --- /dev/null +++ b/examples/gallery/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "图库", + "en": "Gallery" + }, + "demos": [ + { + "filename": "line.js", + "title": "线图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/gallery/basic/index.zh.md b/examples/gallery/basic/index.zh.md new file mode 100644 index 0000000000..a8885a5a95 --- /dev/null +++ b/examples/gallery/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Gallery +order: 0 +--- diff --git a/examples/heatmap/basic/demo/line.js b/examples/heatmap/basic/demo/line.js new file mode 100644 index 0000000000..288f28b1dd --- /dev/null +++ b/examples/heatmap/basic/demo/line.js @@ -0,0 +1,39 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [102.602992, 23.107329], + zoom: 13, +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/heatmap/basic/demo/meta.json b/examples/heatmap/basic/demo/meta.json new file mode 100644 index 0000000000..41027679a3 --- /dev/null +++ b/examples/heatmap/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "热力图", + "en": "heatmap" + }, + "demos": [ + { + "filename": "line.js", + "title": "线图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/heatmap/basic/index.zh.md b/examples/heatmap/basic/index.zh.md new file mode 100644 index 0000000000..bd8e98cbc4 --- /dev/null +++ b/examples/heatmap/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 热力图 +order: 0 +--- diff --git a/examples/line/basic/demo/line.js b/examples/line/basic/demo/line.js new file mode 100644 index 0000000000..288f28b1dd --- /dev/null +++ b/examples/line/basic/demo/line.js @@ -0,0 +1,39 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [102.602992, 23.107329], + zoom: 13, +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/line/basic/demo/meta.json b/examples/line/basic/demo/meta.json new file mode 100644 index 0000000000..eb9d251bbd --- /dev/null +++ b/examples/line/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "线图层", + "en": "line" + }, + "demos": [ + { + "filename": "line.js", + "title": "线图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/line/basic/index.zh.md b/examples/line/basic/index.zh.md new file mode 100644 index 0000000000..95c13bc598 --- /dev/null +++ b/examples/line/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 线图层 +order: 1 +--- diff --git a/examples/marker/basic/demo/line.js b/examples/marker/basic/demo/line.js new file mode 100644 index 0000000000..288f28b1dd --- /dev/null +++ b/examples/marker/basic/demo/line.js @@ -0,0 +1,39 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [102.602992, 23.107329], + zoom: 13, +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/marker/basic/demo/meta.json b/examples/marker/basic/demo/meta.json new file mode 100644 index 0000000000..42812b23e6 --- /dev/null +++ b/examples/marker/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "图库", + "en": "Gallery" + }, + "demos": [ + { + "filename": "line.js", + "title": "线图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/marker/basic/index.zh.md b/examples/marker/basic/index.zh.md new file mode 100644 index 0000000000..fc36b3a35a --- /dev/null +++ b/examples/marker/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 标注 +order: 0 +--- diff --git a/examples/point/basic/data.json b/examples/point/basic/data.json deleted file mode 100644 index 79e82cb123..0000000000 --- a/examples/point/basic/data.json +++ /dev/null @@ -1,351 +0,0 @@ -[{ - "id": "5011000000404", - "name": "铁路新村(华池路)", - "longitude": 121.4316962, - "latitude": 31.26082325, - "unit_price": 71469.4, - "count": 2 -}, { - "id": "5011000002716", - "name": "金元坊", - "longitude": 121.3810096, - "latitude": 31.25302026, - "unit_price": 47480.5, - "count": 2 -}, { - "id": "5011000003403", - "name": "兰溪路231弄", - "longitude": 121.4086229, - "latitude": 31.25291206, - "unit_price": 55218.4, - "count": 2 -}, { - "id": "5011000003652", - "name": "兰溪公寓", - "longitude": 121.409227, - "latitude": 31.251014, - "unit_price": 55577.8, - "count": 2 -}, { - "id": "5011000004139", - "name": "梅岭新村", - "longitude": 121.400946, - "latitude": 31.24946565, - "unit_price": 63028.1, - "count": 2 -}, { - "id": "5011000005647", - "name": "石泉路140弄", - "longitude": 121.4318415, - "latitude": 31.25682515, - "unit_price": 52256.3, - "count": 2 -}, { - "id": "5011000006479", - "name": "中山北路2165弄", - "longitude": 121.4350523, - "latitude": 31.25364239, - "unit_price": 55129.4, - "count": 2 -}, { - "id": "5011000008328", - "name": "光新路430弄", - "longitude": 121.4374976, - "latitude": 31.26298493, - "unit_price": 49397.2, - "count": 2 -}, { - "id": "5011000004973", - "name": "旬阳新村", - "longitude": 121.431054, - "latitude": 31.259485, - "unit_price": 58836.4, - "count": 3 -}, { - "id": "5011000005863", - "name": "岚皋路300弄", - "longitude": 121.4290778, - "latitude": 31.2587194, - "unit_price": 56944.2, - "count": 3 -}, { - "id": "5011000006645", - "name": "光复西路145弄", - "longitude": 121.4375783, - "latitude": 31.25329386, - "unit_price": 63652.3, - "count": 3 -}, { - "id": "5011000011530", - "name": "祥和大厦", - "longitude": 121.3839187, - "latitude": 31.25161362, - "unit_price": 41029.4, - "count": 3 -}, { - "id": "5011000013673", - "name": "真光十小区", - "longitude": 121.395288, - "latitude": 31.256758, - "unit_price": 41900.9, - "count": 3 -}, { - "id": "5011000013938", - "name": "真光新秀", - "longitude": 121.396422, - "latitude": 31.260857, - "unit_price": 49490.7, - "count": 3 -}, { - "id": "5011000017097", - "name": "陆三小区", - "longitude": 121.4259304, - "latitude": 31.24930686, - "unit_price": 56632.3, - "count": 3 -}, { - "id": "5011000017118", - "name": "樱花苑", - "longitude": 121.4002071, - "latitude": 31.25485805, - "unit_price": 49650.2, - "count": 3 -}, { - "id": "5011000017635", - "name": "宁馨家园", - "longitude": 121.3988072, - "latitude": 31.25289796, - "unit_price": 61407.7, - "count": 3 -}, { - "id": "5011000020263", - "name": "南大街22弄", - "longitude": 121.4090896, - "latitude": 31.25320726, - "unit_price": 52482.1, - "count": 3 -}, { - "id": "5011000000988", - "name": "芝川新苑", - "longitude": 121.409025, - "latitude": 31.263945, - "unit_price": 59417.8, - "count": 4 -}, { - "id": "5011000007885", - "name": "南大街34弄", - "longitude": 121.4080409, - "latitude": 31.2535179, - "unit_price": 49739.4, - "count": 4 -}, { - "id": "5011000016119", - "name": "万千公寓", - "longitude": 121.4379659, - "latitude": 31.26270913, - "unit_price": 61846.7, - "count": 4 -}, { - "id": "5011000017255", - "name": "上海星港", - "longitude": 121.419023, - "latitude": 31.249904, - "unit_price": 81443.3, - "count": 4 -}, { - "id": "5011000018021", - "name": "中岚大楼", - "longitude": 121.432984, - "latitude": 31.251381, - "unit_price": 52858.6, - "count": 4 -}, { - "id": "5011000018102", - "name": "武宁苑", - "longitude": 121.424577, - "latitude": 31.249765, - "unit_price": 53966.7, - "count": 4 -}, { - "id": "5011000019020", - "name": "天汇国际", - "longitude": 121.4115686, - "latitude": 31.26126002, - "unit_price": 45380, - "count": 4 -}, { - "id": "5011102208410", - "name": "三元及地苑", - "longitude": 121.3760233, - "latitude": 31.26220092, - "unit_price": 47857.5, - "count": 4 -}, { - "id": "5011000001095", - "name": "长征家苑", - "longitude": 121.3949788, - "latitude": 31.25376373, - "unit_price": 58117.4, - "count": 5 -}, { - "id": "5011000009828", - "name": "中环财富杰座", - "longitude": 121.378574, - "latitude": 31.25527816, - "unit_price": 26802.3, - "count": 5 -}, { - "id": "5011000013807", - "name": "华轩大厦", - "longitude": 121.375539, - "latitude": 31.258582, - "unit_price": 23147.8, - "count": 5 -}, { - "id": "5011000014493", - "name": "金莲坊", - "longitude": 121.3802448, - "latitude": 31.24989653, - "unit_price": 48458.5, - "count": 5 -}, { - "id": "5011000017050", - "name": "曹杨家园", - "longitude": 121.4101947, - "latitude": 31.26469667, - "unit_price": 56991.5, - "count": 5 -}, { - "id": "5011000018096", - "name": "颐宁苑", - "longitude": 121.415998, - "latitude": 31.252321, - "unit_price": 62755.7, - "count": 5 -}, { - "id": "5011000018172", - "name": "城公大厦", - "longitude": 121.4383528, - "latitude": 31.26001489, - "unit_price": 56813.7, - "count": 5 -}, { - "id": "509977363956217", - "name": "中骏天悦", - "longitude": 121.409065, - "latitude": 31.260569, - "unit_price": 109279, - "count": 5 -}, { - "id": "5011000015683", - "name": "市政馨苑", - "longitude": 121.420237, - "latitude": 31.259543, - "unit_price": 60397.9, - "count": 6 -}, { - "id": "5011000003824", - "name": "星光域", - "longitude": 121.413902, - "latitude": 31.264414, - "unit_price": 91223.7, - "count": 7 -}, { - "id": "5011000014462", - "name": "大隆花苑", - "longitude": 121.4388425, - "latitude": 31.26340479, - "unit_price": 52720.9, - "count": 7 -}, { - "id": "5011000015186", - "name": "光新三村", - "longitude": 121.43749, - "latitude": 31.263028, - "unit_price": 50524.7, - "count": 7 -}, { - "id": "5011000015629", - "name": "平民后村", - "longitude": 121.43489, - "latitude": 31.256305, - "unit_price": 59470, - "count": 7 -}, { - "id": "5011000015825", - "name": "真光新村", - "longitude": 121.397285, - "latitude": 31.260535, - "unit_price": 48991.6, - "count": 7 -}, { - "id": "5011000018225", - "name": "半岛花园", - "longitude": 121.441891, - "latitude": 31.253607, - "unit_price": 73694.6, - "count": 7 -}, { - "id": "5011000008852", - "name": "真西新村第二小区", - "longitude": 121.402254, - "latitude": 31.251552, - "unit_price": 55383.5, - "count": 8 -}, { - "id": "5011000017348", - "name": "嘉秀坊", - "longitude": 121.3750242, - "latitude": 31.26059388, - "unit_price": 47246.6, - "count": 10 -}, { - "id": "5011000018056", - "name": "真情公寓", - "longitude": 121.3909318, - "latitude": 31.26018159, - "unit_price": 56255.2, - "count": 10 -}, { - "id": "5011000011380", - "name": "清涧七街坊", - "longitude": 121.3922347, - "latitude": 31.2646608, - "unit_price": 46948.6, - "count": 11 -}, { - "id": "5011000015943", - "name": "新体育广场", - "longitude": 121.432549, - "latitude": 31.26324211, - "unit_price": 30852.9, - "count": 11 -}, { - "id": "5011000014039", - "name": "清涧六街坊", - "longitude": 121.395639, - "latitude": 31.263124, - "unit_price": 45790.7, - "count": 12 -}, { - "id": "5011000015761", - "name": "曹杨八村", - "longitude": 121.4120603, - "latitude": 31.25113592, - "unit_price": 50921.7, - "count": 18 -}, { - "id": "5011000017518", - "name": "海棠苑", - "longitude": 121.398276, - "latitude": 31.254232, - "unit_price": 49380.8, - "count": 18 -}, { - "id": "5011000012360", - "name": "嘉善坊", - "longitude": 121.3811297, - "latitude": 31.25881044, - "unit_price": 41048.3, - "count": 20 -}] diff --git a/examples/point/basic/demo/color.js b/examples/point/basic/demo/color.js index b1bd4c8149..add72b4856 100644 --- a/examples/point/basic/demo/color.js +++ b/examples/point/basic/demo/color.js @@ -1,5 +1,5 @@ import { Scene } from '@l7/scene'; -import { PointLayer, PointImageLayer } from '@l7/layers' +import { PointLayer } from '@l7/layers' const scene = new Scene({ id: 'map', pitch: 0, @@ -13,7 +13,8 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 .then((res) => res.json()) .then((data) => { const pointLayer = - new PointLayer() + new PointLayer({ + }) .source(data, { parser: { type: 'json', @@ -21,38 +22,17 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 y: 'latitude' } }).shape('circle') - .size(8) - .color('count',['#d73027','#fc8d59','#fee08b','#d9ef8b','#91cf60','#1a9850']) + .size('unit_price', [5, 25]) + .color('#5B8FF9') .style({ - opacity: 1.0, - strokeWidth: 2, - strokeColor: "#fff", + opacity: 0.3, + strokeWidth: 1, + strokeColor: "#5B8FF9", }) - scene.addImage( - '00', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ', - ); - const imageLayer = new PointImageLayer() - .source(data, { - parser: { - type: 'json', - x: 'longitude', - y: 'latitude' - } - }) - .shape('00') - .size(30); - scene.addLayer(imageLayer); - // scene.on('loaded',()=>{ - // console.log('----------loaded') + scene.addLayer(pointLayer); - // }) - console.log(scene); - scene.on('loaded',()=>{ - console.log(scene.map); - }) - scene.render(); + }); diff --git a/examples/point/basic/demo/point.js b/examples/point/basic/demo/point.js index 793b0c7f57..a22d50d6b1 100644 --- a/examples/point/basic/demo/point.js +++ b/examples/point/basic/demo/point.js @@ -1,11 +1,10 @@ import { Scene } from '@l7/scene'; import { PointLayer } from '@l7/layers' -console.log(scene); const scene = new Scene({ id: 'map', pitch: 0, type: 'amap', - style: 'dark', + style: 'light', center: [121.40, 31.258134], zoom: 15, }); @@ -14,7 +13,8 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 .then((res) => res.json()) .then((data) => { const pointLayer = - new PointLayer() + new PointLayer({ + }) .source(data, { parser: { type: 'json', @@ -23,18 +23,14 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9 } }).shape('circle') .size('unit_price', [5, 25]) - .color('#2F54EB') + .color('name',['#49B5AD', "#5B8FF9"]) .style({ - opacity: 1.0, - strokeWidth: 2, - strokeColor: "#fff", - + opacity: 0.3, + strokeWidth: 1, }) - // scene.on('loaded',()=>{ - // console.log('----------loaded') - scene.addLayer(pointLayer); - // }) - scene.render(); + + scene.addLayer(pointLayer); + }); diff --git a/examples/point/basic/index.zh.md b/examples/point/basic/index.zh.md index 2d7d9074bf..28816f38db 100644 --- a/examples/point/basic/index.zh.md +++ b/examples/point/basic/index.zh.md @@ -4,8 +4,3 @@ order: 0 redirect_from: - /zh/examples --- - -图表的基本描述。 - -### 何时使用 - diff --git a/examples/point/image/demo/image.js b/examples/point/image/demo/image.js new file mode 100644 index 0000000000..ecc93a1798 --- /dev/null +++ b/examples/point/image/demo/image.js @@ -0,0 +1,41 @@ +import { Scene } from '@l7/scene'; +import { PointImageLayer } from '@l7/layers' +console.log(this); +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'amap', + style: 'light', + center: [121.40, 31.258134], + zoom: 15, +}); + +fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.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' + } + }) + .shape('name', ['00', '01','02']) + .size(60); + scene.addLayer(imageLayer); + }); + + diff --git a/examples/point/image/demo/meta.json b/examples/point/image/demo/meta.json new file mode 100644 index 0000000000..63fdd2f8ef --- /dev/null +++ b/examples/point/image/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "point.js", + "title": "气泡图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/point/image/demo/size.js b/examples/point/image/demo/size.js new file mode 100644 index 0000000000..e1932a3a46 --- /dev/null +++ b/examples/point/image/demo/size.js @@ -0,0 +1,41 @@ +import { Scene } from '@l7/scene'; +import { PointImageLayer } from '@l7/layers' +console.log(this); +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'amap', + style: 'light', + center: [121.40, 31.258134], + zoom: 15, +}); + +fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.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' + } + }) + .shape('name', ['00', '01','02']) + .size('unit_price', [30, 100]) + scene.addLayer(imageLayer); + }); + + diff --git a/examples/point/image/index.zh.md b/examples/point/image/index.zh.md new file mode 100644 index 0000000000..338e947362 --- /dev/null +++ b/examples/point/image/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 符号图 +order: 1 +--- diff --git a/examples/polygon/basic/demo/meta.json b/examples/polygon/basic/demo/meta.json new file mode 100644 index 0000000000..be1f983bc0 --- /dev/null +++ b/examples/polygon/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "中文分类", + "en": "Category" + }, + "demos": [ + { + "filename": "point.js", + "title": "面图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/polygon/basic/demo/polygon.js b/examples/polygon/basic/demo/polygon.js new file mode 100644 index 0000000000..ca723aae3b --- /dev/null +++ b/examples/polygon/basic/demo/polygon.js @@ -0,0 +1,41 @@ +import { Scene } from '@l7/scene'; +import { PolygonLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'dark', + center: [121.40, 31.258134], + zoom: 3, +}); + +fetch('https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new PolygonLayer({ + enablePicking: true, + enableHighlight: true, + highlightColor: 'red', + onHover: (pickedFeature) => { + // tslint:disable-next-line:no-console + console.log(pickedFeature); + }, + }) + .source(data) + .color('name', [ + '#2E8AE6', + '#69D1AB', + '#DAF291', + '#FFD591', + '#FF7A45', + '#CF1D49', + ]) + .shape('fill') + .style({ + opacity: 1.0, + }); + scene.addLayer(layer); + }); + + diff --git a/examples/polygon/basic/index.zh.md b/examples/polygon/basic/index.zh.md new file mode 100644 index 0000000000..3e98b0b14c --- /dev/null +++ b/examples/polygon/basic/index.zh.md @@ -0,0 +1,6 @@ +--- +title: 面图层 +order: 0 +redirect_from: + - /zh/examples +--- diff --git a/examples/raster/basic/demo/line.js b/examples/raster/basic/demo/line.js new file mode 100644 index 0000000000..288f28b1dd --- /dev/null +++ b/examples/raster/basic/demo/line.js @@ -0,0 +1,39 @@ +import { Scene } from '@l7/scene'; +import { LineLayer } from '@l7/layers' +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [102.602992, 23.107329], + zoom: 13, +}); + +fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json') + .then((res) => res.json()) + .then((data) => { + const layer = + new LineLayer({ + }) + .source(data) + .size(1) + .shape('line') + .color( + 'ELEV', + [ + '#E8FCFF', + '#CFF6FF', + '#A1E9ff', + '#65CEF7', + '#3CB1F0', + '#2894E0', + '#1772c2', + '#105CB3', + '#0D408C', + '#002466', + ].reverse(), + ) + scene.addLayer(layer); + console.log(layer); + + }); diff --git a/examples/raster/basic/demo/meta.json b/examples/raster/basic/demo/meta.json new file mode 100644 index 0000000000..42812b23e6 --- /dev/null +++ b/examples/raster/basic/demo/meta.json @@ -0,0 +1,13 @@ +{ + "title": { + "zh": "图库", + "en": "Gallery" + }, + "demos": [ + { + "filename": "line.js", + "title": "线图层", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/raster/basic/index.zh.md b/examples/raster/basic/index.zh.md new file mode 100644 index 0000000000..6147459f75 --- /dev/null +++ b/examples/raster/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 栅格图层 +order: 0 +--- diff --git a/examples/scene/demo/amap.js b/examples/scene/basic/demo/amap.js similarity index 81% rename from examples/scene/demo/amap.js rename to examples/scene/basic/demo/amap.js index de42ea38b2..fd49089062 100644 --- a/examples/scene/demo/amap.js +++ b/examples/scene/basic/demo/amap.js @@ -7,6 +7,3 @@ const scene = new Scene({ center: [121.40, 31.258134], zoom: 5, }); -scene.render(); - -console.log(scene); diff --git a/examples/scene/demo/mapbox.js b/examples/scene/basic/demo/mapbox.js similarity index 83% rename from examples/scene/demo/mapbox.js rename to examples/scene/basic/demo/mapbox.js index 1cb8d37c12..ec57775e93 100644 --- a/examples/scene/demo/mapbox.js +++ b/examples/scene/basic/demo/mapbox.js @@ -2,10 +2,9 @@ import { Scene } from '@l7/scene'; const scene = new Scene({ id: 'map', pitch: 0, - type: 'amap', + type: 'mapbox', style: 'light', center: [ -97.119140625, 38.75408327579141], zoom: 2, }); -scene.render(); diff --git a/examples/scene/demo/meta.json b/examples/scene/basic/demo/meta.json similarity index 80% rename from examples/scene/demo/meta.json rename to examples/scene/basic/demo/meta.json index 1cf82df769..31bfd25527 100644 --- a/examples/scene/demo/meta.json +++ b/examples/scene/basic/demo/meta.json @@ -1,16 +1,16 @@ { "title": { - "zh": "中文分类", + "zh": "地图", "en": "Category" }, "demos": [ { - "filename": "scene.js", + "filename": "amap.js", "title": "高德底图", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" }, { - "filename": "scene.js", + "filename": "mapbox.js", "title": "MapBox底图", "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" } diff --git a/examples/scene/index.zh.md b/examples/scene/basic/index.zh.md similarity index 58% rename from examples/scene/index.zh.md rename to examples/scene/basic/index.zh.md index 7d2766d542..56c0e06be5 100644 --- a/examples/scene/index.zh.md +++ b/examples/scene/basic/index.zh.md @@ -1,8 +1,7 @@ --- -title: Scene +title: 地图 order: 0 --- 初始 L7 地图实例 -### 何时使用 diff --git a/examples/scene/control/demo/amap.js b/examples/scene/control/demo/amap.js new file mode 100644 index 0000000000..fd49089062 --- /dev/null +++ b/examples/scene/control/demo/amap.js @@ -0,0 +1,9 @@ +import { Scene } from '@l7/scene'; +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'amap', + style: 'dark', + center: [121.40, 31.258134], + zoom: 5, +}); diff --git a/examples/scene/control/demo/mapbox.js b/examples/scene/control/demo/mapbox.js new file mode 100644 index 0000000000..ec57775e93 --- /dev/null +++ b/examples/scene/control/demo/mapbox.js @@ -0,0 +1,10 @@ +import { Scene } from '@l7/scene'; +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'mapbox', + style: 'light', + center: [ -97.119140625, 38.75408327579141], + zoom: 2, +}); + diff --git a/examples/scene/control/demo/meta.json b/examples/scene/control/demo/meta.json new file mode 100644 index 0000000000..31bfd25527 --- /dev/null +++ b/examples/scene/control/demo/meta.json @@ -0,0 +1,18 @@ +{ + "title": { + "zh": "地图", + "en": "Category" + }, + "demos": [ + { + "filename": "amap.js", + "title": "高德底图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "mapbox.js", + "title": "MapBox底图", + "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*KCyXTJrePiYAAAAAAAAAAABkARQnAQ" + } + ] +} diff --git a/examples/scene/map/demo/amap.js b/examples/scene/map/demo/amap.js new file mode 100644 index 0000000000..3b0a7f4e01 --- /dev/null +++ b/examples/scene/map/demo/amap.js @@ -0,0 +1,9 @@ +import { Scene } from './node_modules/@l7/scene'; +const scene = new Scene({ + id: 'map', + pitch: 0, + type: 'amap', + style: 'dark', + center: [121.40, 31.258134], + zoom: 5, +}); diff --git a/gatsby-browser.js b/gatsby-browser.js index 2030c5bd31..6a9fc40e57 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,2 +1,3 @@ window.scene = require('@l7/scene'); -window.layers= require('@l7/layers') +window.layers= require('@l7/layers'); +window.component= require('@l7/component'); diff --git a/gatsby-config.js b/gatsby-config.js index eed9e4aaba..01e28a6eb0 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -76,6 +76,22 @@ module.exports = { }, ], examples: [ + { + slug: 'gallery', + icon: 'gallery', + title: { + zh: 'Gallery', + en: 'Gallery', + }, + }, + { + slug: 'data', + icon: 'data', + title: { + zh: '数据源', + en: 'data', + }, + }, { slug: 'scene', icon: 'map', @@ -91,9 +107,55 @@ module.exports = { zh: '点图层', en: 'PointLayer', }, + }, + { + slug: 'line', + icon: 'line', + title: { + zh: '线图层', + en: 'LineLayer', + }, + }, + { + slug: 'polygon', + icon: 'polygon', + title: { + zh: '面图层', + en: 'PolygonLayer', + }, + }, + { + slug: 'heatmap', + icon: 'heatmap', + title: { + zh: '热力图', + en: 'HeatMapLayer', + }, + order:5, + }, + { + slug: 'raster', + icon: 'raster', + title: { + zh: '栅格图层', + en: 'RasterLayer', + }, + }, + { + slug: 'marker', + icon: 'mapmarker', + title: { + zh: '标注', + en: 'Marker', + }, } ], - exampleContainer: '
' + exampleContainer: '
', + playground: { + container: '
', + playgroundDidMount: 'console.log("playgroundDidMount");', + playgroundWillUnmount: 'console.log("scene");', + }, }, }; diff --git a/packages/core/src/services/asset/FontService.ts b/packages/core/src/services/asset/FontService.ts index 045e5787af..656fffc5e2 100644 --- a/packages/core/src/services/asset/FontService.ts +++ b/packages/core/src/services/asset/FontService.ts @@ -64,6 +64,7 @@ export default class FontService implements IFontService { private key: string; private cache: LRUCache = new LRUCache(CACHE_LIMIT); public init() { + this.cache.clear(); this.fontOptions = { fontFamily: DEFAULT_FONT_FAMILY, fontWeight: DEFAULT_FONT_WEIGHT, diff --git a/packages/core/src/services/asset/IIconService.ts b/packages/core/src/services/asset/IIconService.ts index 5327519aa4..f71632015f 100644 --- a/packages/core/src/services/asset/IIconService.ts +++ b/packages/core/src/services/asset/IIconService.ts @@ -5,11 +5,11 @@ export type Listener = (...args: any[]) => void; export interface IIconValue { x: number; y: number; - image: HTMLImageElement; + image?: HTMLImageElement; } export interface IIcon { id: string; - image: HTMLImageElement; + image?: HTMLImageElement; height: number; width: number; } diff --git a/packages/core/src/services/asset/IconService.ts b/packages/core/src/services/asset/IconService.ts index f165bfeee2..2b593388a8 100644 --- a/packages/core/src/services/asset/IconService.ts +++ b/packages/core/src/services/asset/IconService.ts @@ -33,15 +33,26 @@ export default class IconService extends EventEmitter implements IIconService { if (this.hasImage(id)) { throw new Error('Image Id already exists'); } - + this.iconData.push({ + id, + width: imageSize, + height: imageSize, + }); + this.updateIconMap(); this.loadImage(image).then((img) => { imagedata = img as HTMLImageElement; - this.iconData.push({ - id, - image: imagedata, - width: imageSize, - height: imageSize, + const iconImage = this.iconData.find((icon: IIcon) => { + return icon.id === id; }); + if (iconImage) { + iconImage.image = imagedata; + } + // this.iconData.push({ + // id, + // image: imagedata, + // width: imageSize, + // height: imageSize, + // }); this.update(); }); } @@ -86,7 +97,9 @@ export default class IconService extends EventEmitter implements IIconService { this.canvas.height = this.canvasHeight; Object.keys(this.iconMap).forEach((item: string) => { const { x, y, image } = this.iconMap[item]; - this.ctx.drawImage(image, x, y, imageSize, imageSize); + if (image) { + this.ctx.drawImage(image, x, y, imageSize, imageSize); + } }); } diff --git a/packages/core/src/services/component/ControlService.ts b/packages/core/src/services/component/ControlService.ts index 6775b1fb06..b2d7ee784a 100644 --- a/packages/core/src/services/component/ControlService.ts +++ b/packages/core/src/services/component/ControlService.ts @@ -15,6 +15,7 @@ export default class ControlService implements IControlService { public controlContainer: HTMLElement; private controls: IControl[] = []; public init(cfg: IControlServiceCfg) { + this.destroy(); this.container = cfg.container; this.initControlPos(); } @@ -68,7 +69,9 @@ export default class ControlService implements IControlService { DOM.remove(this.controlCorners[i]); } } - DOM.remove(this.controlContainer); + if (this.controlContainer) { + DOM.remove(this.controlContainer); + } delete this.controlCorners; delete this.controlContainer; } diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index e1860a3297..b4a8d064b2 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -23,6 +23,7 @@ export default class InteractionService extends EventEmitter public init() { // 注册事件在地图底图上 + this.clear(); this.addEventListenerOnMap(); } @@ -68,4 +69,11 @@ export default class InteractionService extends EventEmitter private onHover = ({ x, y }: MouseEvent) => { this.emit(InteractionEvent.Hover, { x, y }); }; + private clear() { + if (this.hammertime) { + this.hammertime.destroy(); + } + this.removeEventListenerOnMap(); + this.off(InteractionEvent.Hover); + } } diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index 163f976e76..2b56f57178 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -16,8 +16,8 @@ export default class LayerService implements ILayerService { private readonly configService: IGlobalConfigService; public add(layer: ILayer) { - // this.initPlugin(layer); - // layer.init(); + this.initPlugin(layer); + layer.init(); this.layers.push(layer); } diff --git a/packages/core/src/services/log/LogService.ts b/packages/core/src/services/log/LogService.ts index 179e50d735..92c739bc20 100644 --- a/packages/core/src/services/log/LogService.ts +++ b/packages/core/src/services/log/LogService.ts @@ -2,7 +2,7 @@ import { injectable } from 'inversify'; import { Log } from 'probe.gl'; import { ILogService } from './ILogService'; -const Logger = new Log({ id: 'L7' }).enable(); +const Logger = new Log({ id: 'L7' }).enable(false); @injectable() export default class LogService implements ILogService { diff --git a/packages/core/src/services/renderer/IModel.ts b/packages/core/src/services/renderer/IModel.ts index 7441227450..280491fc2d 100644 --- a/packages/core/src/services/renderer/IModel.ts +++ b/packages/core/src/services/renderer/IModel.ts @@ -54,6 +54,8 @@ export interface IModelInitializationOptions { */ instances?: number; + colorMask?: [boolean, boolean, boolean, boolean]; + /** * depth buffer */ diff --git a/packages/core/src/services/renderer/passes/PixelPickingPass.ts b/packages/core/src/services/renderer/passes/PixelPickingPass.ts index 415c65e058..dd5f9f22da 100644 --- a/packages/core/src/services/renderer/passes/PixelPickingPass.ts +++ b/packages/core/src/services/renderer/passes/PixelPickingPass.ts @@ -97,7 +97,7 @@ export default class PixelPickingPass implements IPa depth: 1, }); - this.logger.info(`picking fbo cleared ${width} ${height}`); + // this.logger.info(`picking fbo cleared ${width} ${height}`); /** * picking pass 不需要 multipass，原因如下： diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index d0183164d1..f5b597fb85 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/packages/core/src/services/scene/SceneService.ts @@ -85,6 +85,7 @@ export default class Scene extends EventEmitter implements ISceneService { } public init(globalConfig: IGlobalConfig) { + this.initClear(); this.configService.setAndCheckConfig(globalConfig); // 初始化资源管理 图片 @@ -160,7 +161,7 @@ export default class Scene extends EventEmitter implements ISceneService { this.map.addMarkerContainer(); this.inited = true; - this.layerService.initLayers(); + // this.layerService.initLayers(); this.emit('loaded'); } @@ -206,4 +207,14 @@ export default class Scene extends EventEmitter implements ISceneService { this.cameraService.update(viewport); this.render(); }; + private initClear() { + this.inited = false; + this.layerService.destroy(); + this.configService.reset(); + this.interactionService.destroy(); + this.controlService.destroy(); + this.removeAllListeners(); + this.map.destroy(); + window.removeEventListener('resize', this.handleWindowResized, false); + } } diff --git a/packages/core/src/services/shader/IShaderModuleService.ts b/packages/core/src/services/shader/IShaderModuleService.ts index 223aeb6d8a..7a0a4089ed 100644 --- a/packages/core/src/services/shader/IShaderModuleService.ts +++ b/packages/core/src/services/shader/IShaderModuleService.ts @@ -20,4 +20,5 @@ export interface IShaderModuleService { * 注册 L7 内置 shader module */ registerBuiltinModules(): void; + destroy(): void; } diff --git a/packages/core/src/services/shader/ShaderModuleService.ts b/packages/core/src/services/shader/ShaderModuleService.ts index 56660717d1..24476daf36 100644 --- a/packages/core/src/services/shader/ShaderModuleService.ts +++ b/packages/core/src/services/shader/ShaderModuleService.ts @@ -22,6 +22,7 @@ export default class ShaderModuleService implements IShaderModuleService { private rawContentCache: { [key: string]: IModuleParams } = {}; public registerBuiltinModules() { + this.destroy(); this.registerModule('common', { vs: common, fs: common }); this.registerModule('decode', { vs: decode, fs: '' }); this.registerModule('projection', { vs: projection, fs: '' }); @@ -50,7 +51,10 @@ export default class ShaderModuleService implements IShaderModuleService { vs: extractedVS, }; } - + public destroy() { + this.moduleCache = {}; + this.rawContentCache = {}; + } public getModule(moduleName: string): IModuleParams { if (this.moduleCache[moduleName]) { return this.moduleCache[moduleName]; diff --git a/packages/layers/src/index.ts b/packages/layers/src/index.ts index acd403c13b..d85eeae09e 100644 --- a/packages/layers/src/index.ts +++ b/packages/layers/src/index.ts @@ -6,8 +6,8 @@ import ArcLineLayer from './line/arc'; import Arc2DLineLayer from './line/arc2d'; import LineLayer from './line/index'; import Point3dLayer from './point/extrude'; +import PointLayer from './point/fill'; import PointImageLayer from './point/image'; -import PointLayer from './point/index'; import TextLayer from './point/text'; // import Point from './point/point'; import PolygonLayer from './polygon'; diff --git a/packages/layers/src/point/extrude.ts b/packages/layers/src/point/extrude.ts index 69cb5c09e6..82d4cf7ce3 100644 --- a/packages/layers/src/point/extrude.ts +++ b/packages/layers/src/point/extrude.ts @@ -78,7 +78,6 @@ export default class PointLayer extends BaseLayer { if (size) { let buffersize: number[] = []; if (Array.isArray(size)) { - // TODO 多维size支持 buffersize = size.length === 2 ? [size[0], size[0], size[1]] : size; } diff --git a/packages/layers/src/point/fill.ts b/packages/layers/src/point/fill.ts new file mode 100644 index 0000000000..a94fefbe69 --- /dev/null +++ b/packages/layers/src/point/fill.ts @@ -0,0 +1,154 @@ +import { + AttributeType, + gl, + IEncodeFeature, + ILayer, + ILayerPlugin, + ILogService, + IStyleAttributeService, + lazyInject, + TYPES, +} from '@l7/core'; +import BaseLayer from '../core/BaseLayer'; +import { rgb2arr } from '../utils/color'; +import pointFillFrag from './shaders/fill_frag.glsl'; +import pointFillVert from './shaders/fill_vert.glsl'; +interface IPointLayerStyleOptions { + opacity: number; + strokeWidth: number; + strokeColor: string; +} +export function PointTriangulation(feature: IEncodeFeature) { + const coordinates = feature.coordinates as number[]; + return { + vertices: [...coordinates, ...coordinates, ...coordinates, ...coordinates], + extrude: [-1, -1, 1, -1, 1, 1, -1, 1], + indices: [0, 1, 2, 2, 3, 0], + size: coordinates.length, + }; +} +export default class PointLayer extends BaseLayer { + public name: string = 'PointLayer'; + + protected getConfigSchema() { + return { + properties: { + opacity: { + type: 'number', + minimum: 0, + maximum: 1, + }, + }, + }; + } + + protected renderModels() { + const { + opacity = 1, + strokeColor = 'rgb(0,0,0,0)', + strokeWidth = 1, + } = this.getStyleOptions(); + this.models.forEach((model) => + model.draw({ + uniforms: { + u_opacity: opacity, + u_stroke_width: strokeWidth, + u_stroke_color: rgb2arr(strokeColor), + }, + }), + ); + return this; + } + + protected buildModels() { + this.registerBuiltinAttributes(this); + this.models = [ + this.buildLayerModel({ + moduleName: 'pointfill', + vertexShader: pointFillVert, + fragmentShader: pointFillFrag, + triangulation: PointTriangulation, + depth: { enable: false }, + }), + ]; + } + + private registerBuiltinAttributes(layer: ILayer) { + layer.styleAttributeService.registerStyleAttribute({ + name: 'extrude', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Extrude', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 2, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + const extrude = [-1, -1, 1, -1, 1, 1, -1, 1]; + const extrudeIndex = (attributeIdx % 4) * 2; + return [extrude[extrudeIndex], extrude[extrudeIndex + 1]]; + }, + }, + }); + + // point layer size; + layer.styleAttributeService.registerStyleAttribute({ + name: 'size', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Size', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + const { size } = feature; + return Array.isArray(size) ? [size[0]] : [size as number]; + }, + }, + }); + + // point layer size; + layer.styleAttributeService.registerStyleAttribute({ + name: 'shape', + type: AttributeType.Attribute, + descriptor: { + name: 'a_Shape', + buffer: { + // give the WebGL driver a hint that this buffer may change + usage: gl.DYNAMIC_DRAW, + data: [], + type: gl.FLOAT, + }, + size: 1, + update: ( + feature: IEncodeFeature, + featureIdx: number, + vertex: number[], + attributeIdx: number, + ) => { + const { shape = 2 } = feature; + const shape2d = layer.configService.getConfig().shape2d as string[]; + const shapeIndex = shape2d.indexOf(shape as string); + return [shapeIndex]; + }, + }, + }); + } +} diff --git a/packages/layers/src/point/image.ts b/packages/layers/src/point/image.ts index 9a28a5d349..0112f7be08 100644 --- a/packages/layers/src/point/image.ts +++ b/packages/layers/src/point/image.ts @@ -6,6 +6,7 @@ import { ILayerPlugin, ILogService, IStyleAttributeService, + ITexture2D, lazyInject, TYPES, } from '@l7/core'; @@ -27,7 +28,7 @@ export function PointTriangulation(feature: IEncodeFeature) { } export default class PointLayer extends BaseLayer { public name: string = 'PointLayer'; - + private texture: ITexture2D; protected getConfigSchema() { return { properties: { @@ -47,11 +48,8 @@ export default class PointLayer extends BaseLayer { model.draw({ uniforms: { u_opacity: opacity || 1.0, - u_texture: createTexture2D({ - data: this.iconService.getCanvas(), - width: 1024, - height: this.iconService.canvasHeight || 64, - }), + u_texture: this.texture, + u_textSize: [1024, this.iconService.canvasHeight || 128], }, }), ); @@ -61,7 +59,9 @@ export default class PointLayer extends BaseLayer { protected buildModels() { this.registerBuiltinAttributes(this); + this.updateTexture(); this.iconService.on('imageUpdate', () => { + this.updateTexture(); this.renderModels(); }); this.models = [ @@ -131,6 +131,7 @@ export default class PointLayer extends BaseLayer { attributeIdx: number, ) => { const iconMap = this.iconService.getIconMap(); + const { shape } = feature; const { x, y } = iconMap[shape as string] || { x: 0, y: 0 }; return [x, y]; @@ -138,4 +139,12 @@ export default class PointLayer extends BaseLayer { }, }); } + private updateTexture() { + const { createTexture2D } = this.rendererService; + this.texture = createTexture2D({ + data: this.iconService.getCanvas(), + width: 1024, + height: this.iconService.canvasHeight || 128, + }); + } } diff --git a/packages/layers/src/point/point.ts b/packages/layers/src/point/point.ts deleted file mode 100644 index 59f97bef18..0000000000 --- a/packages/layers/src/point/point.ts +++ /dev/null @@ -1,130 +0,0 @@ -// import { -// gl, -// IIconService, -// IRendererService, -// IShaderModuleService, -// lazyInject, -// TYPES, -// } from '@l7/core'; -// import BaseLayer from '../core/BaseLayer'; -// import ExtrudeBuffer from './buffers/ExtrudeBuffer'; -// import ImageBuffer from './buffers/ImageBuffer'; -// import extrude_frag from './shaders/extrude_frag.glsl'; -// import extrude_vert from './shaders/extrude_vert.glsl'; -// import image_frag from './shaders/image_frag.glsl'; -// import image_vert from './shaders/image_vert.glsl'; - -// export default class PointLayer extends BaseLayer { -// public name: string = 'PointLayer'; - -// @lazyInject(TYPES.IShaderModuleService) -// private readonly shaderModule: IShaderModuleService; - -// @lazyInject(TYPES.IRendererService) -// private readonly renderer: IRendererService; - -// protected renderModels() { -// this.models.forEach((model) => -// model.draw({ -// uniforms: { -// u_ModelMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], -// }, -// }), -// ); -// return this; -// } - -// protected buildModels(): void { -// this.shaderModule.registerModule('point', { -// vs: extrude_vert, -// fs: extrude_frag, -// }); -// this.shaderModule.registerModule('pointImage', { -// vs: image_vert, -// fs: image_frag, -// }); - -// this.models = []; -// const { vs, fs, uniforms } = this.shaderModule.getModule('pointImage'); -// // const buffer = new ExtrudeBuffer({ -// // data: this.getEncodedData(), -// // }); -// // buffer.computeVertexNormals('miters', false); -// const { -// createAttribute, -// createBuffer, -// createElements, -// createTexture2D, -// createModel, -// } = this.renderer; -// const buffer = new ImageBuffer({ -// data: this.getEncodedData(), -// iconMap: this.iconService.getIconMap(), -// }); -// this.models.push( -// createModel({ -// attributes: { -// a_Position: createAttribute({ -// buffer: createBuffer({ -// data: buffer.attributes.positions, -// type: gl.FLOAT, -// }), -// size: 3, -// }), -// a_normal: createAttribute({ -// buffer: createBuffer({ -// data: buffer.attributes.normals, -// type: gl.FLOAT, -// }), -// size: 3, -// }), -// a_color: createAttribute({ -// buffer: createBuffer({ -// data: buffer.attributes.colors, -// type: gl.FLOAT, -// }), -// size: 4, -// }), -// a_size: createAttribute({ -// buffer: createBuffer({ -// data: buffer.attributes.sizes, -// type: gl.FLOAT, -// }), -// size: 1, -// }), -// a_uv: createAttribute({ -// buffer: createBuffer({ -// data: buffer.attributes.uv, -// type: gl.FLOAT, -// }), -// size: 2, -// }), -// // a_shape: createAttribute({ -// // buffer: createBuffer({ -// // data: buffer.attributes.miters, -// // type: gl.FLOAT, -// // }), -// // size: 3, -// // }), -// }, -// uniforms: { -// ...uniforms, -// u_opacity: this.styleOption.opacity as number, -// u_texture: createTexture2D({ -// data: this.iconService.getCanvas(), -// width: 1024, -// height: this.iconService.canvasHeight, -// }), -// }, -// fs, -// vs, -// primitive: gl.POINTS, -// count: buffer.verticesCount, -// // elements: createElements({ -// // data: buffer.indexArray, -// // type: gl.UNSIGNED_INT, -// // }), -// }), -// ); -// } -// } diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl index ca6b845eb1..b1eecf6211 100644 --- a/packages/layers/src/point/shaders/fill_frag.glsl +++ b/packages/layers/src/point/shaders/fill_frag.glsl @@ -1,7 +1,7 @@ uniform float u_blur : 0; uniform float u_opacity : 1; uniform float u_stroke_width : 1; -uniform vec4 u_stroke_color : [1, 1, 1, 1]; +uniform vec4 u_stroke_color : [0, 0, 0, 0]; uniform float u_stroke_opacity : 1; varying vec4 v_data; @@ -9,6 +9,7 @@ varying vec4 v_color; varying float v_radius; #pragma include "sdf_2d" +#pragma include "picking" void main() { int shape = int(floor(v_data.w + 0.5)); @@ -56,6 +57,7 @@ void main() { 0.0, inner_df ); + vec4 strokeColor = u_stroke_color == vec4(0) ? v_color : u_stroke_color; - gl_FragColor = opacity_t * mix(v_color * u_opacity, u_stroke_color * u_stroke_opacity, color_t); + gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t); } diff --git a/packages/layers/src/point/shaders/fill_vert.glsl b/packages/layers/src/point/shaders/fill_vert.glsl index dc9a93d76e..af5cb17eb2 100644 --- a/packages/layers/src/point/shaders/fill_vert.glsl +++ b/packages/layers/src/point/shaders/fill_vert.glsl @@ -10,7 +10,9 @@ uniform float u_stroke_width : 2; varying vec4 v_data; varying vec4 v_color; varying float v_radius; + #pragma include "projection" +#pragma include "picking" void main() { // unpack color(vec2) @@ -33,4 +35,6 @@ void main() { // construct point coords v_data = vec4(extrude, antialiasblur, shape_type); + + setPickingColor(a_PickingColor); } diff --git a/packages/layers/src/point/shaders/image_frag.glsl b/packages/layers/src/point/shaders/image_frag.glsl index a7a2e01450..58992a075f 100644 --- a/packages/layers/src/point/shaders/image_frag.glsl +++ b/packages/layers/src/point/shaders/image_frag.glsl @@ -1,12 +1,26 @@ + uniform sampler2D u_texture; varying vec4 v_color; varying vec2 v_uv; +uniform vec2 u_textSize; +uniform float u_stroke_width : 1; +uniform vec4 u_stroke_color : [1, 1, 1, 1]; +uniform float u_stroke_opacity : 1; +uniform float u_opacity : 1; + +varying float v_size; void main(){ - vec2 pos= v_uv + gl_PointCoord / vec2(1024.,128.)* 64.; -// pos.y= 1.- pos.y; +vec2 pos= v_uv / u_textSize + gl_PointCoord / u_textSize * 64.; +vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0; +float distance = length(fragmentPosition); +float distanceSqrd = distance * distance; +float radius = 1.; +float r = 1.0 - smoothstep(radius-(radius*0.01), + radius+(radius*0.01), + distanceSqrd); vec4 textureColor=texture2D(u_texture,pos); if(v_color == vec4(0.)){ - gl_FragColor= textureColor; + gl_FragColor= vec4(textureColor.xyz, textureColor.w * r); }else { gl_FragColor= step(0.01, textureColor.x) * v_color; } diff --git a/packages/layers/src/point/shaders/image_vert.glsl b/packages/layers/src/point/shaders/image_vert.glsl index 5b86d4df16..84adf6c17f 100644 --- a/packages/layers/src/point/shaders/image_vert.glsl +++ b/packages/layers/src/point/shaders/image_vert.glsl @@ -1,3 +1,4 @@ + precision highp float; attribute vec3 a_Position; attribute vec4 a_Color; @@ -6,12 +7,17 @@ attribute float a_Size; varying vec4 v_color; varying vec2 v_uv; uniform mat4 u_ModelMatrix; +uniform float u_stroke_width : 1; +varying float v_size; + #pragma include "projection" void main() { v_color = a_Color; v_uv = a_Uv; vec4 project_pos = project_position(vec4(a_Position, 1.0)); + v_size = a_Size; + gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0)); - gl_PointSize = a_Size; + gl_PointSize = a_Size + u_stroke_width; } diff --git a/packages/maps/src/amap/Viewport.ts b/packages/maps/src/amap/Viewport.ts index 0338737dd6..d7b63e5ca5 100644 --- a/packages/maps/src/amap/Viewport.ts +++ b/packages/maps/src/amap/Viewport.ts @@ -24,7 +24,6 @@ export default class Viewport implements IViewport { far = 1000, fov = 0, } = mapCamera; - this.zoom = zoom; this.center = center; diff --git a/packages/maps/src/amap/index.ts b/packages/maps/src/amap/index.ts index 747fb2eea0..c60820e9bd 100644 --- a/packages/maps/src/amap/index.ts +++ b/packages/maps/src/amap/index.ts @@ -20,7 +20,7 @@ import { MapTheme } from './theme'; import Viewport from './Viewport'; const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200'; -const AMAP_VERSION: string = '1.4.8'; +const AMAP_VERSION: string = '1.4.15'; const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12; /** @@ -208,8 +208,10 @@ export default class AMapService implements IMapService { } public destroy() { - this.map.destroy(); - document.head.removeChild(this.$jsapi); + if (this.map) { + this.map.destroy(); + document.head.removeChild(this.$jsapi); + } } public getMapContainer() { @@ -232,7 +234,6 @@ export default class AMapService implements IMapService { position, } = e.camera; const { lng, lat } = this.getCenter(); - if (this.cameraChangedCallback) { // resync viewport this.viewport.syncWithMapCamera({ @@ -253,6 +254,7 @@ export default class AMapService implements IMapService { // set coordinate system if (this.viewport.getZoom() > LNGLAT_OFFSET_ZOOM_THRESHOLD) { + // TODO:偏移坐标系高德地图不支持 pith bear 同步 this.coordinateSystemService.setCoordinateSystem( CoordinateSystem.P20_OFFSET, ); diff --git a/packages/maps/src/amap/theme.ts b/packages/maps/src/amap/theme.ts index 770185ca33..187a30882f 100644 --- a/packages/maps/src/amap/theme.ts +++ b/packages/maps/src/amap/theme.ts @@ -2,5 +2,5 @@ export const MapTheme: { [key: string]: any; } = { dark: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true', - light: 'amap://styles/a80c558f91b29cf56fa47f895fb1773c?isPublic=true', + light: 'amap://styles/1fd9f8ef9751298f11f5c56968312c70?isPublic=true', }; diff --git a/packages/maps/src/mapbox/index.ts b/packages/maps/src/mapbox/index.ts index 2ea04c274e..94aaa1d7f3 100644 --- a/packages/maps/src/mapbox/index.ts +++ b/packages/maps/src/mapbox/index.ts @@ -197,9 +197,11 @@ export default class MapboxService implements IMapService { } public destroy() { - document.head.removeChild(this.$link); - this.$mapContainer = null; - this.map.remove(); + if (this.map) { + this.map.remove(); + document.head.removeChild(this.$link); + this.$mapContainer = null; + } } public getMapContainer() { diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 6a8d561cc0..be9f84c007 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -103,8 +103,8 @@ class Scene { this.mapService = container.get(TYPES.IMapService); this.iconService = container.get(TYPES.IIconService); this.controlService = container.get(TYPES.IControlService); - // this.map = this.mapService.map; // 暴露原生map方法 mapType = this.mapService.getType(); + this.render(); } public getMapService(): IMapService { diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx index 55dd4d5bcb..e3542876d2 100644 --- a/stories/Layers/components/Line.tsx +++ b/stories/Layers/components/Line.tsx @@ -57,7 +57,7 @@ export default class LineDemo extends React.Component { '#002466', ].reverse(), ) - .render(); + scene.addLayer(lineLayer); scene.render(); this.scene = scene; diff --git a/stories/Layers/components/pointImage.tsx b/stories/Layers/components/pointImage.tsx index 6964dcdc19..1d35687395 100644 --- a/stories/Layers/components/pointImage.tsx +++ b/stories/Layers/components/pointImage.tsx @@ -9,37 +9,51 @@ export default class PointImage extends React.Component { this.scene.destroy(); } - public componentDidMount() { + public async componentDidMount() { + const response = await fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', + ); const scene = new Scene({ - center: [120.19382669582967, 30.258134], + center: [121.40, 31.258134], + zoom: 15, id: 'map', pitch: 0, type: 'mapbox', style: 'mapbox://styles/mapbox/streets-v9', - zoom: 1, }); - const pointLayer = new PointImageLayer({}); scene.addImage( '00', - 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ', + 'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ', ); - pointLayer - .source(data) - .shape('00') - .size(30); - const pointLayer2 = new PointLayer({}) - .source(data) - .shape('circle') - .size(8) - .color('red') - .style({ - opacity: 1.0, - strokeWidth: 2, - strokeColor: '#fff', - }); - scene.addLayer(pointLayer2); - scene.addLayer(pointLayer); - scene.render(); + 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', + ); + this.scene = scene; + scene.on('loaded', () => { + run(); + }); + const imageLayer = new PointImageLayer({}) + .source(await response.json(), { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + } + }) + .shape('name', ['00', '01', '02']) + .size(60); + scene.addLayer(imageLayer); + + function run() { + scene.render(); + console.log('render'); + requestAnimationFrame(run); + } this.scene = scene; } diff --git a/stories/Picking/components/Highlight.tsx b/stories/Picking/components/Highlight.tsx index 3211675500..6c004bd8cb 100644 --- a/stories/Picking/components/Highlight.tsx +++ b/stories/Picking/components/Highlight.tsx @@ -38,7 +38,7 @@ export default class Highlight extends React.Component { highlightColor: [0, 0, 1, 1], onHover: (pickedFeature) => { // tslint:disable-next-line:no-console - console.log(pickedFeature); + // console.log(pickedFeature); }, }); @@ -59,7 +59,7 @@ export default class Highlight extends React.Component { }); scene.addLayer(layer); scene.render(); - + console.log(layer); this.scene = scene; /*** 运行时修改样式属性 ***/ diff --git a/stories/Picking/components/Tooltip.tsx b/stories/Picking/components/Tooltip.tsx index 120f0dc957..d833036b65 100644 --- a/stories/Picking/components/Tooltip.tsx +++ b/stories/Picking/components/Tooltip.tsx @@ -29,7 +29,7 @@ export default class Mapbox extends React.Component { enableHighlight: false, onHover: (pickedFeature) => { // tslint:disable-next-line:no-console - console.log(pickedFeature); + // console.log(pickedFeature); }, });