feat(scene): scene service inTransientScope

.gitignore

@@ -67,4 +67,92 @@ jspm_packages/
 lib/
 
 .DS_Store
-public
+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

.storybook/addons.ts

@@ -1,3 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-notes/register';
-import '@storybook/addon-storysource/register';
+import '@storybook/addon-storysource/register';

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);
+
+  });

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"
+    }
+  ]
+}

examples/data/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 数据
+order: 0
+---

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);
+
+  });

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"
+    }
+  ]
+}

examples/gallery/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Gallery
+order: 0
+---

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);
+
+  });

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"
+    }
+  ]
+}

examples/heatmap/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 热力图
+order: 0
+---

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);
+
+  });

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"
+    }
+  ]
+}

examples/line/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 线图层
+order: 1
+---

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);
+
+  });

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"
+    }
+  ]
+}

examples/marker/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 标注
+order: 0
+---

examples/point/basic/data.json

@@ -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
-}]

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)
+        .size('unit_price', [5, 25])
-        .color('count',['#d73027','#fc8d59','#fee08b','#d9ef8b','#91cf60','#1a9850'])
+        .color('#5B8FF9')
         .style({
-          opacity: 1.0,
+          opacity: 0.3,
-          strokeWidth: 2,
+          strokeWidth: 1,
-          strokeColor: "#fff",
+          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();
   });
 
 

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,
+          opacity: 0.3,
-          strokeWidth: 2,
+          strokeWidth: 1,
-          strokeColor: "#fff",
-
         })
-        // scene.on('loaded',()=>{
+
-        //   console.log('----------loaded')
+      scene.addLayer(pointLayer);
-          scene.addLayer(pointLayer);
+
-        // })
-        scene.render();
   });
 
 

examples/point/basic/index.zh.md

@@ -4,8 +4,3 @@ order: 0
 redirect_from:
   - /zh/examples
 ---
-
-图表的基本描述。
-
-### 何时使用
-

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);
+  });
+
+

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"
+    }
+  ]
+}

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);
+  });
+
+

examples/point/image/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 符号图
+order: 1
+---

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"
+    }
+  ]
+}

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);
+  });
+
+

examples/polygon/basic/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 面图层
+order: 0
+redirect_from:
+  - /zh/examples
+---

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);
+
+  });

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"
+    }
+  ]
+}

examples/raster/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 栅格图层
+order: 0
+---

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);

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();
 

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"
     }

examples/scene/basic/index.zh.md

@@ -1,8 +1,7 @@
 ---
-title: Scene
+title: 地图
 order: 0
 ---
 初始 L7 地图实例
 
-### 何时使用
 

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,
+});

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,
+});
+

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"
+    }
+  ]
+}

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,
+});

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');

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: '<div style="min-height: 590px; justify-content: center;position: relative" id="map"/>'
+    exampleContainer: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
+    playground: {
+      container: '<div style="min-height: 500px; justify-content: center;position: relative" id="map"/>',
+      playgroundDidMount: 'console.log("playgroundDidMount");',
+      playgroundWillUnmount: 'console.log("scene");',
+    },
   },
 
 };

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,

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;
 }

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({
+      const iconImage = this.iconData.find((icon: IIcon) => {
-        id,
+        return icon.id === id;
-        image: imagedata,
-        width: imageSize,
-        height: imageSize,
       });
+      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);
+      }
     });
   }
 

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;
   }

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);
+  }
 }

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);
+    this.initPlugin(layer);
-    // layer.init();
+    layer.init();
     this.layers.push(layer);
   }
 

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 {

packages/core/src/services/renderer/IModel.ts

@@ -54,6 +54,8 @@ export interface IModelInitializationOptions {
    */
   instances?: number;
 
+  colorMask?: [boolean, boolean, boolean, boolean];
+
   /**
    * depth buffer
    */

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -97,7 +97,7 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
         depth: 1,
       });
 
-      this.logger.info(`picking fbo cleared ${width} ${height}`);
+      // this.logger.info(`picking fbo cleared ${width} ${height}`);
 
       /**
        * picking pass 不需要 multipass，原因如下：

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);
+  }
 }

packages/core/src/services/shader/IShaderModuleService.ts

@@ -20,4 +20,5 @@ export interface IShaderModuleService {
    * 注册 L7 内置 shader module
    */
   registerBuiltinModules(): void;
+  destroy(): void;
 }

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];

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';

packages/layers/src/point/extrude.ts

@@ -78,7 +78,6 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
           if (size) {
             let buffersize: number[] = [];
             if (Array.isArray(size)) {
-              // TODO 多维size支持
               buffersize =
                 size.length === 2 ? [size[0], size[0], size[1]] : size;
             }

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<IPointLayerStyleOptions> {
+  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];
+        },
+      },
+    });
+  }
+}

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<IPointLayerStyleOptions> {
   public name: string = 'PointLayer';
-
+  private texture: ITexture2D;
   protected getConfigSchema() {
     return {
       properties: {
@@ -47,11 +48,8 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
       model.draw({
         uniforms: {
           u_opacity: opacity || 1.0,
-          u_texture: createTexture2D({
+          u_texture: this.texture,
-            data: this.iconService.getCanvas(),
+          u_textSize: [1024, this.iconService.canvasHeight || 128],
-            width: 1024,
-            height: this.iconService.canvasHeight || 64,
-          }),
         },
       }),
     );
@@ -61,7 +59,9 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
 
   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<IPointLayerStyleOptions> {
           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<IPointLayerStyleOptions> {
       },
     });
   }
+  private updateTexture() {
+    const { createTexture2D } = this.rendererService;
+    this.texture = createTexture2D({
+      data: this.iconService.getCanvas(),
+      width: 1024,
+      height: this.iconService.canvasHeight || 128,
+    });
+  }
 }

packages/layers/src/point/point.ts

@@ -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,
-//         // }),
-//       }),
-//     );
-//   }
-// }

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);
 }

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);
 }

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.;
+vec2 pos= v_uv / u_textSize + gl_PointCoord / u_textSize * 64.;
-//    pos.y= 1.- pos.y;
+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;
   }

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;
 
 }

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;
 

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();
+    if (this.map) {
-    document.head.removeChild(this.$jsapi);
+      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,
         );

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',
 };

packages/maps/src/mapbox/index.ts

@@ -197,9 +197,11 @@ export default class MapboxService implements IMapService {
   }
 
   public destroy() {
-    document.head.removeChild(this.$link);
+    if (this.map) {
-    this.$mapContainer = null;
+      this.map.remove();
-    this.map.remove();
+      document.head.removeChild(this.$link);
+      this.$mapContainer = null;
+    }
   }
 
   public getMapContainer() {

packages/scene/src/index.ts

@@ -103,8 +103,8 @@ class Scene {
     this.mapService = container.get<IMapService>(TYPES.IMapService);
     this.iconService = container.get<IIconService>(TYPES.IIconService);
     this.controlService = container.get<IControlService>(TYPES.IControlService);
-    // this.map = this.mapService.map; // 暴露原生map方法
     mapType = this.mapService.getType();
+    this.render();
   }
 
   public getMapService(): IMapService {

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;

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
+    scene.addImage(
-      .source(data)
+      '01',
-      .shape('00')
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
-      .size(30);
+    );
-    const pointLayer2 = new PointLayer({})
+    scene.addImage(
-      .source(data)
+      '02',
-      .shape('circle')
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
-      .size(8)
+    );
-      .color('red')
+    this.scene = scene;
-      .style({
+    scene.on('loaded', () => {
-        opacity: 1.0,
+      run();
-        strokeWidth: 2,
+    });
-        strokeColor: '#fff',
+    const imageLayer = new PointImageLayer({})
-      });
+      .source(await response.json(), {
-    scene.addLayer(pointLayer2);
+        parser: {
-    scene.addLayer(pointLayer);
+          type: 'json',
-    scene.render();
+          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;
   }
 

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;
 
     /*** 运行时修改样式属性 ***/

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);
       },
     });