feat(chart): add chart demo

2019-11-17 17:31:01 +08:00 · 2019-11-17 17:31:01 +08:00 · d211f51404
parent bd91e8453b
commit d211f51404
67 changed files with 4628 additions and 5184 deletions
--- a/.storybook/l7.css
+++ b/.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 {
--- a/examples/heatmap/grid/demo/china.js
+++ b/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,
-  center: [114.05737552216226, 22.542656745583486],
-  zoom: 12.405122702055305,
-  type: 'mapbox',
+  pitch: 46.49999999999997,
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
+  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);
  });
--- a/examples/heatmap/grid/demo/grid.js
+++ b/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);
-
-
-  });
--- a/examples/heatmap/grid/demo/grid1.js
+++ b/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);
+  });
--- a/examples/heatmap/grid/demo/meta.json
+++ b/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": "世界电厂热力图",
-      "screenshot":""
+      "title": "网格热力图",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6danQJDzkyoAAAAAAAAAAABkARQnAQ"
+
    }
+
  ]
 }
--- a/examples/heatmap/grid/demo/world.js
+++ b/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',
-  pitch: 0,
-  center: [116.49434030056, 39.868073421167621],
+  style: 'dark',
+  pitch: 46.49999999999997,
+  center: [112.10377141242463, 29.968602656853605],
+  zoom: 3.856,
  type: 'amap',
-  zoom: 3,
 });
-
-fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json')
-  .then((res) => res.json())
+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 HeatMapGrid3dLayer({
-      })
+    const layer = new HeatMapGridLayer({})
      .source(data, {
-        transforms: [
-          {
-            type: 'hexagon',
-            size: 200000,
-            field: 'capacity',
-            method: 'sum',
-          },
-        ],
-      })
-      .size('sum', (value) => {
-        return value * 50;
-      })
-      .shape('hexagon')
-      .style({
-        coverage: 0.9,
-        angle: 0,
-        opacity: 1.0,
-      })
-      .color('sum', [
-            '#2E8AE6',
-            '#69D1AB',
-            '#DAF291',
-            '#FFD591',
-            '#FF7A45',
-            '#CF1D49',
-      ]);
+      parser: {
+        type: 'csv',
+        x: 'lng',
+        y: 'lat'
+      },
+      transforms:[
+        {
+        type: 'grid',
+        size: 20000,
+        field:'v',
+        method:'sum'
+       }
+      ]
+    })
+    .size('count',(value)=>{
+       return value * 0;
+    })
+    .shape('square')
+    .style({
+      coverage: 1,
+      angle: 0,
+    })
+    .color('count', [
+      '#FF3417', '#FF7412',
+      '#FFB02A', '#FFE754',
+      '#46F3FF', '#02BEFF',
+      '#1A7AFF', '#0A1FB2'
+    ].reverse())
+
    scene.addLayer(layer);
-
-
  });
--- a/examples/heatmap/heatmap/demo/heatmap.js
+++ b/examples/heatmap/heatmap/demo/heatmap.js
--- a/examples/heatmap/heatmap/demo/heatmap3d.js
+++ b/examples/heatmap/heatmap/demo/heatmap3d.js
--- a/examples/heatmap/heatmap/demo/heatmap_purple.js
+++ b/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);
+
+
+  });
--- a/examples/heatmap/heatmap/demo/meta.json
+++ b/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"
    }
--- a/examples/heatmap/hexagon/demo/light.js
+++ b/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],
-  zoom: 7.2,
+  center: [120.13383079335335,29.651873105004427],
+  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);
+
  });
--- a/examples/heatmap/hexagon/demo/meta.json
+++ b/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"
    }
  ]
 }
--- a/examples/heatmap/hexagon/demo/world.js
+++ b/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);
+
+
+  });
--- a/examples/line/arc/demo/meta.json
+++ b/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",
-      "title": "弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
+      "filename": "trip_arc_dark.js",
+      "title": "3D 弧线",
+      "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"
+
    }
  ]
 }
--- a/examples/line/arc/demo/trip_arc.js
+++ b/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],
-  zoom: 10,
+  center: [-74.06355155037261,40.73507179789368],
+  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,
-      blur: 0.99
+      opacity: 1,
+      blur: 0.9
    })
    ;
   scene.addLayer(layer);
--- a/examples/line/arc/demo/trip_arc_dark.js
+++ b/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,
+    })
+  });
--- a/examples/line/isoline/demo/ele.js
+++ b/examples/line/isoline/demo/ele.js
--- a/examples/line/isoline/demo/ele_dark.js
+++ b/examples/line/isoline/demo/ele_dark.js
--- a/examples/line/isoline/demo/isoline.js
+++ b/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],
-  zoom: 3.5,
+  center: [104.117492,36.492696],
+  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);

  });
--- a/examples/line/isoline/demo/meta.json
+++ b/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"
    }

  ]
--- a/examples/line/isoline/index.en.md
+++ b/examples/line/isoline/index.en.md
--- a/examples/line/isoline/index.zh.md
+++ b/examples/line/isoline/index.zh.md
--- a/examples/line/path/demo/linedash.js
+++ b/examples/line/path/demo/linedash.js
@ -1,19 +1,19 @@
-import { Scene } from '@l7/scene';
-import { DashLineLayer } from '@l7/layers'
+import { Scene } from './node_modules/@l7/scene';
+import { LineLayer } from './node_modules/@l7/layers'
 const scene = new Scene({
  id: 'map',
  pitch: 0,
  type: 'amap',
  style: 'light',
-  center: [102.602992, 33.107329],
-  zoom: 3.5,
+  center: [104.117492,36.492696],
+  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);

  });
--- a/examples/line/path/demo/bus_dark.js
+++ b/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);
+
+  });
--- a/examples/line/path/demo/bus_light.js
+++ b/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],
-  pitch: 45,
-  zoom: 10,
-  rotation: 10,
+  center: [103.83735604457024,1.360253881403068],
+  pitch:  4.00000000000001,
+  zoom: 10.210275860702593,
+  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);
--- a/examples/line/path/demo/meta.json
+++ b/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",
-      "title": "等高线",
-      "screenshot":""
+      "filename": "bus_light.js",
+      "title": "公交线路",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*fuSLRL8Ym4kAAAAAAAAAAABkARQnAQ"
    },
    {
-      "filename": "line2.js",
-      "title": "等值线",
-      "screenshot":""
+      "filename": "bus_dark.js",
+      "title": "公交线路",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*c80NRaMfGLAAAAAAAAAAAABkARQnAQ"
    },
    {
      "filename": "road_dark.js",
--- a/examples/point/bubble/demo/color.js
+++ b/examples/point/bubble/demo/color.js
--- a/examples/point/bubble/demo/meta.json
+++ b/examples/point/bubble/demo/meta.json
--- a/examples/point/bubble/demo/normal.js
+++ b/examples/point/bubble/demo/normal.js
--- a/examples/point/bubble/demo/point.js
+++ b/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])
-        .scale('mag',{
-          type:'quantile'
-        })
+        .size('mag', [1, 25])
        .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);

-  });
+  });
+
--- a/examples/point/bubble/demo/world.js
+++ b/examples/point/bubble/demo/world.js
--- a/examples/point/bubble/index.en.md
+++ b/examples/point/bubble/index.en.md
@ -2,5 +2,5 @@
 title: Bubble Map
 order: 0
 redirect_from:
-  - /en/point
+  - /en/examples
 ---
--- a/examples/point/bubble/index.zh.md
+++ b/examples/point/bubble/index.zh.md
--- a/examples/point/chartmap/demo/chart.js
+++ b/examples/point/chartmap/demo/chart.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: 'amap',
+  type: 'mapbox',
  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": {
-          "visible": true,
-          "shared": false,
-          "crosshairs": null
-        },
-        legend:{
-          "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,
+
+      const chart = new G2.Chart({
+        container: el,
+        width: size,
+        height: size,
+        render: 'svg',
+        padding: 0,
      });
-      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({
--- a/examples/point/chart/demo/chart.js
+++ b/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);
+    });
+
+  });
+
+}
+
--- a/examples/point/chartmap/demo/meta.json
+++ b/examples/point/chartmap/demo/meta.json
@ -10,7 +10,12 @@
      "screenshot":""
    },
    {
-      "filename": "popuplation.js",
+      "filename": "ring.js",
+      "title": "环图",
+      "screenshot":""
+    },
+    {
+      "filename": "chart.js",
      "title": "环图",
      "screenshot":""
    }
--- a/examples/point/chartmap/demo/popuplation.js
+++ b/examples/point/chartmap/demo/popuplation.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],
-  zoom: 0,
+  center: [52.21496184144132, 24.121126851768906],
+  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({
-        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.intervalStack().position('value').color('type', ['#5CCEA1','#5B8FF9']).opacity(1);
      chart.render();
-      new Marker().setLnglat({
+      new Marker(
+        { element: el}
+      ).setLnglat({
        lng: coord[0],
        lat: coord[1]
      }).addTo(scene);
--- a/examples/point/chartmap/index.en.md
+++ b/examples/point/chartmap/index.en.md
--- a/examples/point/chartmap/index.zh.md
+++ b/examples/point/chartmap/index.zh.md
--- a/examples/point/column/demo/clumn_shape.js
+++ b/examples/point/column/demo/clumn_shape.js
--- a/examples/point/column/demo/clumn_shape_light.js
+++ b/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,
--- a/examples/point/column/demo/column_dark.js
+++ b/examples/point/column/demo/column_dark.js
--- a/examples/point/column/demo/column_light.js
+++ b/examples/point/column/demo/column_light.js
--- a/examples/point/column/demo/meta.json
+++ b/examples/point/column/demo/meta.json
--- a/examples/point/column/index.en.md
+++ b/examples/point/column/index.en.md
--- a/examples/point/column/index.zh.md
+++ b/examples/point/column/index.zh.md
--- a/examples/point/image/demo/image.js
+++ b/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, {
--- a/examples/point/marker/index.zh.md
+++ b/examples/point/marker/index.zh.md
@ -1,4 +1,4 @@
 ---
-title: 自定义Marker
+title: 自定义 Marker
 order: 7
 ---
--- a/examples/point/scatter/demo/scater.js
+++ b/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);
-
-  });
-
-
--- a/examples/polygon/basic/demo/fill.js
+++ b/examples/polygon/basic/demo/fill.js
--- a/examples/polygon/basic/demo/meta.json
+++ b/examples/polygon/basic/demo/meta.json
@ -17,7 +17,7 @@
    {
      "filename": "population.js",
      "title": "世界地图 女性人口比例",
-      "screenshot": ""
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*j6OrT7kgAnAAAAAAAAAAAABkARQnAQ"
    }
  ]
 }
--- a/examples/polygon/basic/demo/polygon.js
+++ b/examples/polygon/basic/demo/polygon.js
--- a/examples/polygon/basic/demo/population.js
+++ b/examples/polygon/basic/demo/population.js
@ -5,8 +5,8 @@ const scene = new Scene({
  pitch: 0,
  type: 'mapbox',
  style: 'light',
-  center: [0, 29.877025],
-  zoom: 0,
+  center: [0.29399925603274824,0.15507808202093543],
+  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 = ['#b2182b','#ef8a62','#fddbc7','#f7f7f7','#d1e5f0','#67a9cf','#2166ac'];
+  var colors =  [
+    '#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);
 });
--- a/examples/polygon/basic/index.en.md
+++ b/examples/polygon/basic/index.en.md
--- a/examples/polygon/basic/index.zh.md
+++ b/examples/polygon/basic/index.zh.md
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -35,7 +35,7 @@ module.exports = {
          zh: '图表演示',
          en: 'Examples',
        },
-        redirect: 'point/basic',
+        redirect: 'point/bubble',
      },
        // target: '_blank',
    ],
--- a/package.json
+++ b/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",
--- a/packages/component/src/css/l7.css
+++ b/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,
--- a/packages/component/src/marker.ts
+++ b/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);
    });
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/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();
    }
  };
--- a/packages/maps/src/amap/index.ts
+++ b/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 {
--- a/packages/maps/src/mapbox/index.ts
+++ b/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 {
--- a/packages/source/src/transform/grid.ts
+++ b/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;
  });
 }
--- a/site/css/demo.css
+++ b/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;
-}
--- a/site/locale.json
+++ b/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",
--- a/site/pages/index.zh.tsx
+++ b/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' }}
-            src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JTQgTKOaC1UAAAAAAAAAAABkARQnAQ"
+            style={{
+              marginTop: '40px',
+              marginLeft: '30px',
+              maxHeight: '600px',
+            }}
+            src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*VcojS5aWhMYAAAAAAAAAAABkARQnAQ"
          />
        }
        title={t('L7 地理空间可视化引擎')}
--- a/yarn.lock
+++ b/yarn.lock