feat(chart): add chart demo

.storybook/l7.css

@@ -1,3 +1,6 @@
+.l7-marker-container {
+ width:100%
+}
 .l7-marker {
 	position: absolute !important;
 	top: 0;
@@ -279,7 +282,7 @@
 .l7-right .l7-control {
 	margin-right: 10px;
   }
-  
+
   /* attribution and scale controls */
 
 .l7-control-container .l7-control-attribution {

examples/heatmap/grid/demo/china.js

@@ -3,10 +3,10 @@ import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
   style: 'light',
-  pitch: 47.49999999999995,
+  pitch: 46.49999999999997,
-  center: [114.05737552216226, 22.542656745583486],
+  center: [112.10377141242463, 29.968602656853605],
-  zoom: 12.405122702055305,
+  zoom: 3.856,
-  type: 'mapbox',
+  type: 'amap',
 });
 window.mapScene = scene;
 fetch(
@@ -24,20 +24,29 @@ fetch(
       transforms:[
         {
         type: 'grid',
-        size: 10000,
+        size: 20000,
         field:'v',
         method:'sum'
        }
       ]
     })
     .size('count',(value)=>{
-       return value * 10;
+       return value * 0;
     })
     .shape('square')
     .style({
-      coverage: 0.8,
+      coverage: 1,
       angle: 0,
     })
-    .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"])
+    .color('count', [
+      '#0B0030', '#100243',
+      '#100243', '#1B048B',
+      '#051FB7', '#0350C1',
+      '#0350C1', '#0072C4',
+      '#0796D3', '#2BA9DF',
+      '#30C7C4', '#6BD5A0',
+      '#A7ECB2', '#D0F4CA'
+    ].reverse())
+
     scene.addLayer(layer);
   });

examples/heatmap/grid/demo/grid.js

@@ -1,51 +0,0 @@
-import { Scene } from '@l7/scene';
-import { HeatMapGridLayer } from '@l7/layers';
-const scene = new Scene({
-  id: 'map',
-  style: 'light',
-  pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
-  type: 'mapbox',
-  zoom: 16,
-});
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const layer =
-      new HeatMapGridLayer({
-      })
-      .source(data, {
-        parser: {
-          type: 'json',
-          x: 'lng',
-          y: 'lat',
-        },
-        transforms: [
-          {
-            type: 'grid',
-            size: 20,
-            field: 'count',
-            method: 'sum',
-          },
-        ],
-      })
-      .size('sum', (value) => {
-        return value;
-      })
-      .shape('circle')
-      .style({
-        coverage: 0.8,
-        angle: 0,
-        opacity: 1.0,
-      })
-      .color('count',  ['#0A3663', '#1558AC',
-      '#3771D9', '#4D89E5',
-      '#64A5D3', '#72BED6',
-      '#83CED6', '#A6E1E0',
-      '#B8EFE2', '#D7F9F0']);
-    scene.addLayer(layer);
-    console.log(layer);
-
-
-  });

examples/heatmap/grid/demo/grid1.js

@@ -0,0 +1,47 @@
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 46.49999999999997,
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
+  type: 'amap',
+});
+window.mapScene = scene;
+fetch(
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+)
+  .then((res) => res.text())
+  .then((data) => {
+    const layer = new HeatMapGridLayer({})
+      .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 10000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#FF4818', '#F7B74A',
+      '#FFF598', '#FF40F3',
+      '#9415FF', '#421EB2'
+    ].reverse())
+    scene.addLayer(layer);
+  });

examples/heatmap/grid/demo/meta.json

@@ -5,14 +5,22 @@
   },
   "demos": [
     {
-      "filename": "grid.js",
+      "filename": "china.js",
       "title": "网格热力图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*anD-Q4u83R0AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "grid1.js",
+      "title": "",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tAGKS6EClQ4AAAAAAAAAAABkARQnAQ"
+
     },
     {
       "filename": "world.js",
-      "title": "世界电厂热力图",
+      "title": "网格热力图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6danQJDzkyoAAAAAAAAAAABkARQnAQ"
+
     }
+
   ]
 }

examples/heatmap/grid/demo/world.js

@@ -1,48 +1,49 @@
-import { Scene } from '@l7/scene';
 import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  style: 'dark',
-  pitch: 0,
+  pitch: 46.49999999999997,
-  center: [116.49434030056, 39.868073421167621],
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
   type: 'amap',
-  zoom: 3,
 });
-
+window.mapScene = scene;
-fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+fetch(
-  .then((res) => res.json())
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+)
+  .then((res) => res.text())
   .then((data) => {
-    const layer =
+    const layer = new HeatMapGridLayer({})
-      new HeatMapGrid3dLayer({
-      })
       .source(data, {
-        transforms: [
+      parser: {
-          {
+        type: 'csv',
-            type: 'hexagon',
+        x: 'lng',
-            size: 200000,
+        y: 'lat'
-            field: 'capacity',
+      },
-            method: 'sum',
+      transforms:[
-          },
+        {
-        ],
+        type: 'grid',
-      })
+        size: 20000,
-      .size('sum', (value) => {
+        field:'v',
-        return value * 50;
+        method:'sum'
-      })
+       }
-      .shape('hexagon')
+      ]
-      .style({
+    })
-        coverage: 0.9,
+    .size('count',(value)=>{
-        angle: 0,
+       return value * 0;
-        opacity: 1.0,
+    })
-      })
+    .shape('square')
-      .color('sum', [
+    .style({
-            '#2E8AE6',
+      coverage: 1,
-            '#69D1AB',
+      angle: 0,
-            '#DAF291',
+    })
-            '#FFD591',
+    .color('count', [
-            '#FF7A45',
+      '#FF3417', '#FF7412',
-            '#CF1D49',
+      '#FFB02A', '#FFE754',
-      ]);
+      '#46F3FF', '#02BEFF',
+      '#1A7AFF', '#0A1FB2'
+    ].reverse())
+
     scene.addLayer(layer);
-
-
   });

examples/heatmap/heatmap/demo/heatmap_purple.js

@@ -0,0 +1,31 @@
+import { Scene } from '@l7/scene';
+import { HeatMapLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'dark',
+  pitch: 0,
+  center: [127.5671666579043,7.445038892195569],
+  type: 'mapbox',
+  zoom: 2.632456779444394
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapLayer({
+      })
+      .source(data).size('mag', [0, 1.0]) // weight映射通道
+        .style({
+          intensity: 2,
+          radius: 20,
+          opacity: 1.0,
+          rampColors: {
+            colors: [ '#FF4818', '#F7B74A', '#FFF598', '#F27DEB', '#8C1EB2', '#421EB2' ].reverse(),
+            positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
+          }
+        })
+    scene.addLayer(layer);
+
+
+  });

examples/heatmap/heatmap/demo/meta.json

@@ -5,12 +5,17 @@
   },
   "demos": [
     {
-      "filename": "world.js",
+      "filename": "heatmap.js",
       "title": "经典热力图2D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "world3d.js",
+      "filename": "heatmap_purple.js",
+      "title": "经典热力图2D",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DFwET7xJTA8AAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "heatmap3d.js",
       "title": "经典热力图3D",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*K_nOTa1C7PoAAAAAAAAAAABkARQnAQ"
     }

examples/heatmap/hexagon/demo/light.js

@@ -2,78 +2,16 @@ import { HeatMapHexagonLayer, HeatMapGrid3dLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  style: 'light',
+  style: 'dark',
   pitch: 43,
-  center: [119.9719107,29.4924299],
+  center: [120.13383079335335,29.651873105004427],
-  zoom: 7.2,
+  zoom: 7.068989519212174,
   type: 'mapbox',
 });
+
+
 window.mapScene = scene;
-const colorObj = {
+
-  redyellow: [
-    '#8A191A', '#AE3235',
-    '#CC464B', '#E26A5D',
-    '#EC8765', '#F0A66C',
-    '#F4BC8F', '#FFCEA7',
-    '#FFE4CE', '#FFF2E8'
-  ],
-  yellow: [
-    '#7B320A', '#B35B21',
-    '#D2722E', '#F0883A',
-    '#FBA045', '#FAB04B',
-    '#FAC760', '#FBD78C',
-    '#FCE6B3', '#FCF3DB'
-  ],
-  blue_green: [
-    '#094D4A', '#146968',
-    '#1D7F7E', '#289899',
-    '#34B6B7', '#4AC5AF',
-    '#5FD3A6', '#7BE39E',
-    '#A1EDB8', '#CEF8D6'
-  ],
-  blue: [
-    '#0A3663', '#1558AC',
-    '#3771D9', '#4D89E5',
-    '#64A5D3', '#72BED6',
-    '#83CED6', '#A6E1E0',
-    '#B8EFE2', '#D7F9F0'
-  ],
-  purple: [
-    '#312B60', '#4A457E',
-    '#615C99', '#816CAD',
-    '#A67FB5', '#C997C7',
-    '#DEB8D4', '#F5D4E6',
-    '#FAE4F1', '#FFF3FC'
-  ],
-  color1: [
-    '#E4682F', '#FF8752',
-    '#FFA783', '#FFBEA8',
-    '#FFDCD6', '#EEF3FF',
-    '#C8D7F5', '#A5C1FC',
-    '#7FA7F9', '#5F8AE5'
-  ],
-  color2: [
-    '#F1646A', '#F48789',
-    '#F7A9AC', '#FBCCCD',
-    '#FDEEEE', '#EEF3FF',
-    '#C8DAFE', '#A5C1FC',
-    '#80A8FB', '#5B8EF8'
-  ],
-  color3: [
-    '#EEF3FF', '#C8DAFE',
-    '#A5C1FC', '#80A8FB',
-    '#5B8EF8', '#FCF6FA',
-    '#F5E4EF', '#F7CDDF',
-    '#ED9CBE', '#D1749B'
-  ],
-  color4: [ '#421EB2', '#8C1EB2', '#F27DEB', '#FFF598', '#F7B74A', '#FF4818' ],
-  colors6: [ '#FBE0B2', '#F6BB91', '#F88E8B', '#5C6CE5', '#110A6C', '#0D0943' ],
-  colors5: [ '#F86A7E', '#F79794', '#D0A8AD', '#8596A4', '#0D7D9E', '#07485B' ],
-  colors11: [ '#005F6D', '#0F9EA3', '#B9CDC5', '#DF881C', '#AE571E', '#6C2C03' ],
-  colors7: [ '#D66A74', '#EF808B', '#F09FAF', '#B1C987', '#789676', '#636C58' ],
-  colors8: [ '#5E023A', '#C52C6A', '#F0C4E8', '#F7CAB8', '#7EBCA9', '#117D8D' ],
-  colors9: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ]
-}
 fetch(
   'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
 )
@@ -107,8 +45,15 @@ fetch(
       })
       .color(
         'sum',
-        colorObj.blue.slice(0,7).reverse(),
+        [
+          '#094D4A', '#146968',
+          '#1D7F7E', '#289899',
+          '#34B6B7', '#4AC5AF',
+          '#5FD3A6', '#7BE39E',
+          '#A1EDB8', '#C3F9CC',
+          '#DEFAC0', '#ECFFB1'
+        ]
       );
     scene.addLayer(layer);
-    console.log(layer);
+
   });

examples/heatmap/hexagon/demo/meta.json

@@ -7,12 +7,17 @@
     {
       "filename": "light.js",
       "title": "蜂窝热力图",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HxpoRIcBA80AAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "hexagon.js",
       "title": "蜂窝热力图",
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rjkiQLCoZxUAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "world.js",
+      "title": "蜂窝热力图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*tq4hR7QfQ0AAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/heatmap/hexagon/demo/world.js

@@ -0,0 +1,49 @@
+import { Scene } from '@l7/scene';
+import { HeatMapGridLayer, HeatMapGrid3dLayer } from '@l7/layers';
+const scene = new Scene({
+  id: 'map',
+  style: 'light',
+  pitch: 0,
+  center: [116.49434030056, 39.868073421167621],
+  type: 'amap',
+  zoom: 3,
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new HeatMapGrid3dLayer({
+      })
+      .source(data, {
+        transforms: [
+          {
+            type: 'hexagon',
+            size: 90000,
+            field: 'capacity',
+            method: 'sum',
+          },
+        ],
+      })
+      .size('sum', (value) => {
+        return value * 50;
+      })
+      .shape('hexagon')
+      .style({
+        coverage: 0.9,
+        angle: 0,
+        opacity: 1.0,
+      })
+      .color('sum',  [
+        '#1D2BB2', '#06117C',
+        '#06117C', '#06117C',
+        '#1D2BB2', '#1D2BB2',
+        '#1D2BB2', '#0F62FF',
+        '#0F62FF', '#0CB7FF',
+        '#0CB7FF', '#52F1FC'
+
+      ].reverse());
+    scene.addLayer(layer);
+
+
+  });

examples/line/arc/demo/meta.json

@@ -8,6 +8,11 @@
       "filename": "arc3d.js",
       "title": "3D弧线"
 
+    },
+    {
+      "filename": "arc.js",
+      "title": "弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
     },
      {
       "filename": "arcCircle.js",
@@ -16,9 +21,16 @@
 
     },
     {
-      "filename": "arc.js",
+      "filename": "trip_arc_dark.js",
-      "title": "弧线",
+      "title": "3D 弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jXsbSYCqLu8AAAAAAAAAAABkARQnAQ"
+
+    },
+    {
+      "filename": "trip_arc.js",
+      "title": "3D 弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*29BZTqIJkuEAAAAAAAAAAABkARQnAQ"
+
     }
   ]
 }

examples/line/arc/demo/trip_arc.js

@@ -2,11 +2,11 @@ import { Arc3DLineLayer } from '@l7/layers';
 import { Scene } from '@l7/scene';
 const scene = new Scene({
   id: 'map',
-  pitch: 0,
+  pitch: 60,
   type: 'mapbox',
   style: 'light',
-  center: [-74.0334588, 40.7162469],
+  center: [-74.06355155037261,40.73507179789368],
-  zoom: 10,
+  zoom: 11.8623,
 });
 window.mapScene = scene;
 fetch('https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv')
@@ -25,10 +25,10 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e
     })
     .size(1)
     .shape('arc')
-    .color('#8C1EB2')
+    .color('#0C47BF')
     .style({
-      opacity: 0.8,
+      opacity: 1,
-      blur: 0.99
+      blur: 0.9
     })
     ;
    scene.addLayer(layer);

examples/line/arc/demo/trip_arc_dark.js

@@ -0,0 +1,34 @@
+import { Arc3DLineLayer } from '@l7/layers';
+import { Scene } from '@l7/scene';
+const scene = new Scene({
+  id: 'map',
+  pitch: 60,
+  type: 'mapbox',
+  style: 'dark',
+  center: [104.92827320100344,41.209090496438364],
+  zoom: 2.8844827033002813,
+ rotation: 80,
+});
+
+
+fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+  .then((res) => res.text())
+  .then((data) => {
+    const layer =
+    new Arc3DLineLayer({})
+    .source(data, {
+      parser: {
+        type: 'csv',
+        x: 'lng1',
+        y: 'lat1',
+        x1: 'lng2',
+        y1: 'lat2',
+      },
+    })
+    .size(1)
+    .shape('arc')
+    .color('#FF7C6A')
+    .style({
+      opacity: 0.8,
+    })
+  });

examples/line/isoline/demo/isoline.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 33.107329],
+  center: [104.117492,36.492696],
-  zoom: 3.5,
+  zoom: 3.89,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
@@ -21,8 +21,13 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-227
         })
         .size('value', [0.5, 1, 1.5, 2])
         .shape('line')
-        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+        .color('value',  [
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ].reverse())
     scene.addLayer(layer);
-    console.log(layer);
 
   });

examples/line/isoline/demo/meta.json

@@ -15,9 +15,9 @@
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*X1LgSKQbrD0AAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "linedash.js",
+      "filename": "isoline.js",
       "title": "等高线",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YBNRRrk5IV4AAAAAAAAAAABkARQnAQ"
     }
 
   ]

examples/line/line/demo/isoline.js

@@ -1,19 +1,19 @@
-import { Scene } from '@l7/scene';
+import { Scene } from './node_modules/@l7/scene';
-import { DashLineLayer } from '@l7/layers'
+import { LineLayer } from './node_modules/@l7/layers'
 const scene = new Scene({
   id: 'map',
   pitch: 0,
   type: 'amap',
   style: 'light',
-  center: [102.602992, 33.107329],
+  center: [104.117492,36.492696],
-  zoom: 3.5,
+  zoom: 3.89,
 });
 
 fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
   .then((res) => res.json())
   .then((data) => {
     const layer =
-      new DashLineLayer({
+      new LineLayer({
       })
         .source(data)
         .scale('value',{
@@ -21,8 +21,13 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-227
         })
         .size('value', [0.5, 1, 1.5, 2])
         .shape('line')
-        .color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
+        .color('value',  [
+          '#0A3663', '#1558AC',
+          '#3771D9', '#4D89E5',
+          '#64A5D3', '#72BED6',
+          '#83CED6', '#A6E1E0',
+          '#B8EFE2', '#D7F9F0'
+        ].reverse())
     scene.addLayer(layer);
-    console.log(layer);
 
   });

examples/line/path/demo/bus_dark.js

@@ -0,0 +1,42 @@
+import { Scene } from '@l7/scene';
+import { LineLayer } from '@l7/layers'
+const scene = new Scene({
+  id: 'map',
+  center: [103.83735604457024,1.360253881403068],
+  pitch:  4.00000000000001,
+  zoom: 10.210275860702593,
+  rotation: 19.313180925794313,
+  type: 'mapbox',
+  style: 'dark',
+});
+
+fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const layer =
+      new LineLayer({
+      })
+        .source(data,{
+          parser:{
+            type:'json',
+            coordinates:'path'
+          }
+        })
+        .size('level',(level)=>{
+          return [1.0 , level * 1]
+        })
+        .shape('line')
+        .color(
+          'level',
+          [
+            '#312B60', '#4A457E',
+            '#615C99', '#816CAD',
+            '#A67FB5', '#C997C7',
+            '#DEB8D4', '#F5D4E6',
+            '#FAE4F1', '#FFF3FC'
+          ].slice(0,8)
+        )
+    scene.addLayer(layer);
+    console.log(layer);
+
+  });

examples/line/path/demo/bus_light.js

@@ -2,10 +2,10 @@ import { Scene } from '@l7/scene';
 import { LineLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
-  center: [103.7850524, 1.4411409],
+  center: [103.83735604457024,1.360253881403068],
-  pitch: 45,
+  pitch:  4.00000000000001,
-  zoom: 10,
+  zoom: 10.210275860702593,
-  rotation: 10,
+  rotation: 19.313180925794313,
   type: 'mapbox',
   style: 'light',
 });
@@ -23,12 +23,18 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-258
           }
         })
         .size('level',(level)=>{
-          return [1.0 , level * 2]
+          return [1.0 , level * 1]
         })
         .shape('line')
         .color(
           'level',
-          ['#5B8FF9','#5CCEA1','#5D7092' ]
+          [
+            '#0A3663', '#1558AC',
+            '#3771D9', '#4D89E5',
+            '#64A5D3', '#72BED6',
+            '#83CED6', '#A6E1E0',
+            '#B8EFE2', '#D7F9F0'
+          ].slice(0,8)
         )
     scene.addLayer(layer);
     console.log(layer);

examples/line/path/demo/meta.json

@@ -10,14 +10,14 @@
       "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*1gddQ6x8Jq4AAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "line.js",
+      "filename": "bus_light.js",
-      "title": "等高线",
+      "title": "公交线路",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fuSLRL8Ym4kAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "line2.js",
+      "filename": "bus_dark.js",
-      "title": "等值线",
+      "title": "公交线路",
-      "screenshot":""
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
     },
     {
       "filename": "road_dark.js",

examples/point/bubble/demo/point.js

@@ -9,20 +9,18 @@ const scene = new Scene({
   zoom: 5.32,
   maxZoom: 10
 });
-window.mapScene = scene;
+
+
 fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
   .then((res) => res.json())
   .then((data) => {
-  
+
     const pointLayer =
         new PointLayer({
         })
         .source(data)
         .shape('circle')
-        .size('mag', [5, 16])
+        .size('mag', [1, 25])
-        .scale('mag',{
-          type:'quantile'
-        })
         .color('mag',(mag)=>{
            return mag > 4.5? "#5B8FF9" : '#5CCEA1';
         })
@@ -33,4 +31,5 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842
 
         scene.addLayer(pointLayer);
 
-  });
+  });
+

examples/point/bubble/index.en.md

@@ -2,5 +2,5 @@
 title: Bubble Map
 order: 0
 redirect_from:
-  - /en/point
+  - /en/examples
 ---

examples/point/chart/demo/bar.js

@@ -1,14 +1,13 @@
 import { Scene } from '@l7/scene';
 import { Marker, Popup } from '@l7/component'
-import  * as G2Plot from '@antv/g2plot'
+import * as G2 from '@antv/g2'
 const scene = new Scene({
   id: 'map',
-
+  type: 'mapbox',
-  type: 'amap',
   style: 'light',
   center: [122.80009283836715, 37.05881309947238],
   pitch: 0,
-  zoom: 3
+  zoom: 2
 });
 
 scene.on('loaded',()=>{
@@ -22,7 +21,11 @@ function addChart() {
       const el = document.createElement('div');
       const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
 
-      const size = Math.max(Math.min(parseInt(total / 20000), 100), 30);
+      const size = Math.min(parseInt(total / 30000), 70);
+      if(size< 30) {
+        return
+      }
+      console.log(total);
       const itemData = [{
         item: 'Agriculture',
         count: item.gdp.Agriculture,
@@ -37,41 +40,22 @@ function addChart() {
         percent: item.gdp.Service / total
       }];
 
-      const config = {
+
-        "tooltip": {
+      const chart = new G2.Chart({
-          "visible": true,
+        container: el,
-          "shared": false,
+        width: size,
-          "crosshairs": null
+        height: size,
-        },
+        render: 'svg',
-        legend:{
+        padding: 0,
-          "visible": false,
-        },
-        "label": {
-          "visible": false,
-          "type": "outer",
-          "style": {
-            "fill": "rgba(0, 0, 0, 0.65)"
-          }
-        },
-        "width": size,
-        "height": size,
-        "forceFit": false,
-        "radius": 1,
-        "pieStyle": {
-          "stroke": "white",
-          "lineWidth": 1
-        },
-        "innerRadius": 0.64,
-        "animation": false,
-        "colorField": "item",
-        "angleField": "percent", 
-        "color": ["#5CCEA1", "#5D7092", "#5B8FF9"]
-      }
-      const plot = new G2Plot.Ring(el, {
-        data: itemData,
-        ...config,
       });
-      plot.render();
+      chart.legend(false);
+      chart.source(itemData);
+      chart.tooltip(false);
+      chart.axis('count', {
+        grid:false
+      });
+      chart.interval().position('item*count').color('item',['#5CCEA1','#5D7092','#5B8FF9']).opacity(1);
+      chart.render();
       new Marker({
         element: el
       }).setLnglat({

examples/point/chart/demo/chart.js

@@ -0,0 +1,91 @@
+import { Scene } from '@l7/scene';
+import { Marker, Popup } from '@l7/component'
+import * as G2 from '@antv/g2'
+const scene = new Scene({
+  id: 'map',
+  type: 'mapbox',
+  style: 'light',
+  center: [122.80009283836715, 37.05881309947238],
+  pitch: 0,
+  zoom: 2
+});
+
+scene.on('loaded',()=>{
+  addChart();
+})
+function addChart() {
+  fetch('https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json')
+  .then((res) => res.json())
+  .then((data) => {
+    data.nodes.forEach(function (item) {
+      const el = document.createElement('div');
+      const total = item.gdp.Agriculture + item.gdp.Industry + item.gdp.Service;
+
+      const size = Math.min(parseInt(total / 30000), 70);
+      if(size< 30) {
+        return
+      }
+      console.log(total);
+      const itemData = [{
+        item: 'Agriculture',
+        count: item.gdp.Agriculture,
+        percent: item.gdp.Agriculture / total
+      }, {
+        item: 'Industry',
+        count: item.gdp.Industry,
+        percent: item.gdp.Industry / total
+      }, {
+        item: 'Service',
+        count: item.gdp.Service,
+        percent: item.gdp.Service / total
+      }];
+
+      var sliceNumber = 0.02;
+
+      // 自定义 other 的图形，增加两条线
+      G2.Shape.registerShape('interval', 'sliceShape', {
+        draw: function draw(cfg, container) {
+          var points = cfg.points;
+          var path = [];
+          path.push(['M', points[0].x, points[0].y]);
+          path.push(['L', points[1].x, points[1].y - sliceNumber]);
+          path.push(['L', points[2].x, points[2].y - sliceNumber]);
+          path.push(['L', points[3].x, points[3].y]);
+          path.push('Z');
+          path = this.parsePath(path);
+          return container.addShape('path', {
+            attrs: {
+              fill: cfg.color,
+              path: path
+            }
+          });
+        }
+      });
+
+      var chart = new G2.Chart({
+        container: el,
+        width: size,
+        height: size,
+        render: 'svg',
+        padding: 0,
+      });
+      chart.legend(false);
+      chart.source(itemData);
+      chart.coord('theta', {
+        innerRadius: 0.75
+      });
+      chart.tooltip(false);
+      chart.intervalStack().position('percent').color('item',['#5CCEA1','#5D7092','#5B8FF9']).shape('sliceShape');
+      chart.render();
+      new Marker({
+        element: el
+      }).setLnglat({
+        lng:item.coordinates[0],
+        lat:item.coordinates[1]
+      }).addTo(scene);
+    });
+
+  });
+
+}
+

examples/point/chart/demo/meta.json

@@ -10,7 +10,12 @@
       "screenshot":""
     },
     {
-      "filename": "popuplation.js",
+      "filename": "ring.js",
+      "title": "环图",
+      "screenshot":""
+    },
+    {
+      "filename": "chart.js",
       "title": "环图",
       "screenshot":""
     }

examples/point/chart/demo/ring.js

@@ -1,20 +1,50 @@
 import { Scene } from '@l7/scene';
 import { Marker, Popup } from '@l7/component'
 import * as G2 from '@antv/g2'
+
+const CSS = `.l7-marker .g2-guide-html {
+  width: 50px;
+  height: 50px;
+  vertical-align: middle;
+  text-align: center;
+  line-height: 0.1
+}
+
+l7-marker .g2-guide-html .title {
+  font-size: 12px;
+  color: #8c8c8c;
+  font-weight: 300;
+}
+
+l7-marker .g2-guide-html .value {
+  font-size: 18px;
+  color: #000;
+  font-weight: bold;
+}
+`
+function loadCssCode(code) {
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  style.rel = 'stylesheet';
+  // for Chrome Firefox Opera Safari
+  style.appendChild(document.createTextNode(code));
+  // for IE
+  // style.styleSheet.cssText = code;
+  var head = document.getElementsByTagName('head')[0];
+  head.appendChild(style);
+}
+loadCssCode(CSS);
+
 const scene = new Scene({
   id: 'map',
   pitch: 0,
   type: 'mapbox',
   style: 'dark',
-  center: [0, 29.877025],
+  center: [52.21496184144132, 24.121126851768906],
-  zoom: 0,
+  zoom: 3.802,
 });
-
+window.mapScene = scene;
 scene.on('loaded', () => {
-  new Marker().setLnglat({
-    lng: 112,
-    lat: 30
-  }).addTo(scene);
   Promise.all([
     fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
     fetch('https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json').then(d => d.json()),
@@ -36,7 +66,7 @@ scene.on('loaded', () => {
       const coord = point.geometry.coordinates;
       const v = point.properties.female * 1;
       if (v < 1 || v> 46 && v < 54) return;
-      const size = 70;
+      const size = 60;
       const data = [{
         type: '男性',
         value: 100.00 - v.toFixed(2)
@@ -48,7 +78,7 @@ scene.on('loaded', () => {
         container: el,
         width: size,
         height: size,
-        render: 'canvas',
+        render: 'svg',
         padding: 0
       });
       chart.source(data);
@@ -56,16 +86,13 @@ scene.on('loaded', () => {
       chart.tooltip(false);
       chart.coord('theta', {
         radius: 0.9,
-        innerRadius: 0.75
+        innerRadius: 0.6
       });
-      chart.guide().html({
+      chart.intervalStack().position('value').color('type', ['#5CCEA1','#5B8FF9']).opacity(1);
-        position: ['50%', '50%'],
-        html: '<div class="g2-guide-html"><p class="title">' + data[1].type + '</p><p class="value">' + (data[1].value + '%') + '</p></div>'
-      });
-      console.log(data);
-      chart.intervalStack().position('value').color('type', ['#eceef1', '#f0657d',]).opacity(1);
       chart.render();
-      new Marker().setLnglat({
+      new Marker(
+        { element: el}
+      ).setLnglat({
         lng: coord[0],
         lat: coord[1]
       }).addTo(scene);

examples/point/column/demo/clumn_shape_light.js

@@ -3,7 +3,7 @@ import { Point3dLayer } from '@l7/layers'
 const scene = new Scene({
   id: 'map',
   pitch: 65.68421052631578,
-  type: 'amap',
+  type: 'mapbox',
   style: 'light',
   center: [121.3917,31.259242],
   zoom: 14.55,

examples/point/image/demo/image.js

@@ -15,15 +15,15 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9
   .then((data) => {
   scene.addImage(
     '00',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Rq6tQ5b4_JMAAAAAAAAAAABkARQnAQ',
+    'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
   );
   scene.addImage(
     '01',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*0D0SQ6AgkRMAAAAAAAAAAABkARQnAQ',
+    'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
   );
   scene.addImage(
     '02',
-    'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*o16fSIvcKdUAAAAAAAAAAABkARQnAQ',
+    'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
   );
    const imageLayer = new PointImageLayer()
       .source(data, {

examples/point/marker/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 自定义Marker
+title: 自定义 Marker
 order: 7
 ---

examples/point/scatter/demo/scater.js

@@ -1,94 +0,0 @@
-import { Scene } from '@l7/scene';
-import { PointLayer } from '@l7/layers'
-const scene = new Scene({
-  id: 'map',
-  type: 'amap',
-  style: 'light',
-  center: [-122.80009283836715, 37.05881309947238],
-  pitch: 0,
-  zoom: 5.740491857794806
-});
-const colorObj = {
-  redyellow: [
-    '#8A191A', '#AE3235',
-    '#CC464B', '#E26A5D',
-    '#EC8765', '#F0A66C',
-    '#F4BC8F', '#FFCEA7',
-    '#FFE4CE', '#FFF2E8'
-  ],
-  yellow: [
-    '#7B320A', '#B35B21',
-    '#D2722E', '#F0883A',
-    '#FBA045', '#FAB04B',
-    '#FAC760', '#FBD78C',
-    '#FCE6B3', '#FCF3DB'
-  ],
-  blue_green: [
-    '#094D4A', '#146968',
-    '#1D7F7E', '#289899',
-    '#34B6B7', '#4AC5AF',
-    '#5FD3A6', '#7BE39E',
-    '#A1EDB8', '#CEF8D6'
-  ],
-  blue: [
-    '#0A3663', '#1558AC',
-    '#3771D9', '#4D89E5',
-    '#64A5D3', '#72BED6',
-    '#83CED6', '#A6E1E0',
-    '#B8EFE2', '#D7F9F0'
-  ],
-  purple: [
-    '#312B60', '#4A457E',
-    '#615C99', '#816CAD',
-    '#A67FB5', '#C997C7',
-    '#DEB8D4', '#F5D4E6',
-    '#FAE4F1', '#FFF3FC'
-  ],
-  color1: [
-    '#E4682F', '#FF8752',
-    '#FFA783', '#FFBEA8',
-    '#FFDCD6', '#EEF3FF',
-    '#C8D7F5', '#A5C1FC',
-    '#7FA7F9', '#5F8AE5'
-  ],
-  color2: [
-    '#F1646A', '#F48789',
-    '#F7A9AC', '#FBCCCD',
-    '#FDEEEE', '#EEF3FF',
-    '#C8DAFE', '#A5C1FC',
-    '#80A8FB', '#5B8EF8'
-  ],
-  color3: [
-    '#EEF3FF', '#C8DAFE',
-    '#A5C1FC', '#80A8FB',
-    '#5B8EF8', '#FCF6FA',
-    '#F5E4EF', '#F7CDDF',
-    '#ED9CBE', '#D1749B'
-  ]
-}
-fetch('https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv')
-  .then((res) => res.text())
-  .then((data) => {
-    const pointLayer =
-      new PointLayer({
-      })
-        .source(data,{
-          parser:{
-            type:'csv',
-            x:'Longitude',
-            y:'Latitude'
-          }
-        })
-        .shape('circle')
-        .size(4)
-        .color('Magnitude',colorObj.yellow)
-        .style({
-          opacity: 0.5,
-          strokeWidth: 0,
-        })
-
-        scene.addLayer(pointLayer);
-
-  });
-
-

examples/polygon/fill/demo/meta.json

@@ -17,7 +17,7 @@
     {
       "filename": "population.js",
       "title": "世界地图 女性人口比例",
-      "screenshot": ""
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j6OrT7kgAnAAAAAAAAAAAABkARQnAQ"
     }
   ]
 }

examples/polygon/fill/demo/population.js

@@ -5,8 +5,8 @@ const scene = new Scene({
   pitch: 0,
   type: 'mapbox',
   style: 'light',
-  center: [0, 29.877025],
+  center: [0.29399925603274824,0.15507808202093543],
-  zoom: 0,
+  zoom: 0.057043970584144114,
 });
 Promise.all([
   fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
@@ -21,8 +21,13 @@ Promise.all([
       fe.properties.female= popobj[fe.id] * 1|| 0;
       return fe;
     })
-    console.log(world);
+  var colors =  [
-  var colors = ['#b2182b','#ef8a62','#fddbc7','#f7f7f7','#d1e5f0','#67a9cf','#2166ac'];
+    '#0A3663', '#1558AC',
+    '#3771D9', '#4D89E5',
+    '#64A5D3', '#72BED6',
+    '#83CED6', '#A6E1E0',
+    '#B8EFE2', '#D7F9F0'
+  ];
   const layer =
       new PolygonLayer({
       })
@@ -48,5 +53,4 @@ Promise.all([
 
   scene.addLayer(layer);
   scene.addLayer(layer2);
-  console.log(layer);
 });

gatsby-config.js

@@ -35,7 +35,7 @@ module.exports = {
           zh: '图表演示',
           en: 'Examples',
         },
-        redirect: 'point/basic',
+        redirect: 'point/bubble',
       },
         // target: '_blank',
     ],

package.json

@@ -112,6 +112,7 @@
     "site:build": "npm run site:clean && gatsby build --prefix-paths",
     "site:clean": "gatsby clean",
     "site:deploy": "NODE_ENV=site npm run site:build && gh-pages -d public",
+    "site:publish":"gh-pages -d public",
     "prebuild": "run-p tsc lint",
     "build": "lerna exec --parallel 'BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments'",
     "todo:postbuild": "yarn build:declarations",

packages/component/src/css/l7.css

@@ -1,11 +1,16 @@
+.l7-marker-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+ }
+
 .l7-marker {
 	position: absolute !important;
 	top: 0;
 	left: 0;
   z-index: 5;
-  width: 100%;
+
-  height: 100%;
-  overflow: hidden;
 }
 .l7-popup-anchor-top,
 .l7-popup-anchor-top-left,

packages/component/src/marker.ts

@@ -169,7 +169,7 @@ export default class Marker {
       svg.appendChild(path);
       element.appendChild(svg);
     }
-    DOM.addClass(element, 'l7_marker');
+    DOM.addClass(element, 'l7-marker');
     element.addEventListener('click', (e: MouseEvent) => {
       this.onMapClick(e);
     });

packages/core/src/services/scene/SceneService.ts

@@ -204,6 +204,7 @@ export default class Scene extends EventEmitter implements ISceneService {
         width: pixelRatio * w,
         height: pixelRatio * h,
       });
+      //  repaint layers
       this.render();
     }
   };

packages/maps/src/amap/index.ts

@@ -50,7 +50,7 @@ export default class AMapService implements IMapService {
       const amap = mapContainer.getElementsByClassName(
         'amap-maps',
       )[0] as HTMLElement;
-      this.markerContainer = DOM.create('div', 'l7-marker', amap);
+      this.markerContainer = DOM.create('div', 'l7-marker-container', amap);
     }
   }
   public getMarkerContainer(): HTMLElement {

packages/maps/src/mapbox/index.ts

@@ -48,7 +48,7 @@ export default class MapboxService implements IMapService {
   // init
   public addMarkerContainer(): void {
     const container = this.map.getCanvasContainer();
-    this.markerContainer = DOM.create('div', 'l7_marker', container);
+    this.markerContainer = DOM.create('div', 'l7-marker-container', container);
   }
 
   public getMarkerContainer(): HTMLElement {

packages/source/src/transform/grid.ts

@@ -107,6 +107,6 @@ function _getGridLayerDataFromGridHash(
 }
 function getColumn(data: any[], columnName: string) {
   return data.map((item) => {
-    return item[columnName];
+    return item[columnName] * 1;
   });
 }

site/css/demo.css

@@ -14,22 +14,3 @@
   text-align: center;
   user-select: none;
 }
-.g2-guide-html {
-  width: 50px;
-  height: 50px;
-  vertical-align: middle;
-  text-align: center;
-  line-height: 0.1
-}
-
-.g2-guide-html .title {
-  font-size: 12px;
-  color: #8c8c8c;
-  font-weight: 300;
-}
-
-.g2-guide-html .value {
-  font-size: 18px;
-  color: #000;
-  font-weight: bold;
-}

site/locale.json

@@ -1,5 +1,5 @@
 {
-  "L7 地理空间可视化引擎": "Geospatial Visualization Analysis Framework",
+  "L7 地理空间可视化引擎": "Geospatial Visualization \n Analysis Framework",
   "地理空间数据可视化": "Geospatial Data Visualization Analysis Framework",
   "L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。": "Large-scale WebGL-powered  Geospatial data visualization analysis framework",
   "架构上灵活可扩展":"Flexible and scalable",

site/pages/index.zh.tsx

@@ -13,20 +13,21 @@ const IndexPage = () => {
   const features = [
     {
       icon:
-        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*EpwBRpW2X-4AAAAAAAAAAABkARQnAQ',
+        'https://gw.alipayobjects.com/zos/basement_prod/ca2168d1-ae50-4929-8738-c6df62231de3.svg',
       title: t('架构上灵活可扩展'),
       description: t('支持地图底图，渲染引擎，图层自由定制、扩展，组合'),
     },
     {
       icon:
-        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bjWeSqCAyWoAAAAAAAAAAABkARQnAQ',
+        'https://gw.alipayobjects.com/zos/basement_prod/0ccf4dcb-1bac-4f4e-8d8d-f1031c77c9c8.svg',
       title: t('业务上简洁且通用'),
-      description: t('以图形符号学地理设计体系理论基础，易用，易理解，专业 专注',
+      description: t(
+        '以图形符号学地理设计体系理论基础，易用，易理解，专业 专注',
       ),
     },
     {
       icon:
-        'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8UXGTKDotJwAAAAAAAAAAABkARQnAQ',
+        'https://gw.alipayobjects.com/zos/basement_prod/fd232581-14b3-45ec-a85c-fb349c51b376.svg',
       title: t('可视化上酷炫动感'),
       description: t('支持海量数据，2D、3D，动态，可交互，高性能渲染'),
     },
@@ -79,8 +80,12 @@ const IndexPage = () => {
         coverImage={
           <img
             class="Notification-module--number--31-3Z"
-            style={{ marginLeft: '125px', marginTop: '100px', height: '500px' }}
+            style={{
-            src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JTQgTKOaC1UAAAAAAAAAAABkARQnAQ"
+              marginTop: '40px',
+              marginLeft: '30px',
+              maxHeight: '600px',
+            }}
+            src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VcojS5aWhMYAAAAAAAAAAABkARQnAQ"
           />
         }
         title={t('L7 地理空间可视化引擎')}