Merge pull request #111 from antvis/docs

Docs
2019-12-02 19:32:52 +08:00 · 2019-12-02 19:32:52 +08:00 · a243dc867d
parent 7e5be84059 077d05b6e2
commit a243dc867d
75 changed files with 1399 additions and 1430 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,11 +1,11 @@
 <!--
 Thank you for your pull request. Please review below requirements.
 Bug fixes and new features should include tests and possibly benchmarks.
-Contributors guide: https://github.com/antvis/g2/blob/master/CONTRIBUTING.md
+Contributors guide: https://github.com/antvis/L7/blob/master/.github/CONTRIBUTING.md

 感谢您贡献代码。请确认下列 checklist 的完成情况。
 Bug 修复和新功能必须包含测试，必要时请附上性能测试。
-Contributors guide: https://github.com/antvis/g2/blob/master/CONTRIBUTING.md
+Contributors guide: https://github.com/antvis/L7/blob/master/.github/CONTRIBUTING.md
 -->

 ##### Checklist
--- a/.gitignore
+++ b/.gitignore
@ -77,4 +77,5 @@ yarn.lock
 package-lock.json
 git_log.sh
 node_modules/
-packages/l7/package_bak.json
+packages/l7/package_bak.json
+
--- a/README.md
+++ b/README.md
@ -85,10 +85,7 @@ scene.addLayer(pointLayer);
 - [Tutorials](https://l7.antv.vision/en/docs/tutorial/quickstart)
 - [API documentation](https://l7.antv.vision/en/docs/api/l7)
 - [Examples](https://l7.antv.vision/en/examples/gallery/basic)
-
-## 🔨 Development
-
-We wrote a [contribution guide](./.github/CONTRIBUTING.md) to help you get started.
+- [Contributor documentation](./.github/CONTRIBUTING.md)

 ## ✅ License

--- a/examples/line/arc/demo/arc.js
+++ b/examples/line/arc/demo/arc.js
--- a/docs/api/l7stable.en.md
+++ b/docs/api/l7stable.en.md
@ -14,7 +14,7 @@ order: 1
 #### CDN 在线使用连接为

 ```html
-<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.4/build/L7-min.js"></script>
+<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.4.6/build/L7-min.js"></script>
 ```

 ### npm 安装使用
--- a/docs/api/source/geojson.zh.md
+++ b/docs/api/source/geojson.zh.md
@ -2,6 +2,7 @@
 title: geojson
 order: 1
 ---
+
 ## 简介

 GeoJSON 是一种对各种地理数据结构进行编码的格式。GeoJSON 对象可以表示几何、特征或者特征集合。GeoJSON 支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON 里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
--- a/docs/tutorial/data.en.md
+++ b/docs/tutorial/data.en.md
@ -1,6 +1,6 @@
 ---
 title: Data
-order: 1
+order: 2
 ---

 ## 数据
--- a/docs/tutorial/data.zh.md
+++ b/docs/tutorial/data.zh.md
@ -1,6 +1,6 @@
 ---
 title: 数据
-order: 1
+order: 2
 ---

 ## 数据
--- a/docs/tutorial/demo.en.md
+++ b/docs/tutorial/demo.en.md
@ -0,0 +1,62 @@
+---
+title: How to start the demo locally
+order: 1
+---
+
+### 一、打开L7demo页面
+
+
+ 选择一个任意一个你想看的demo
+
+
+<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
+
+你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。
+
+
+### 二、打开 codesandbox。
+
+点击左侧第三个按钮，你就进入了 codesandbox。
+
+![L7 地理可视化](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*TrpMSJrrSDMAAAAAAAAAAABkARQnAQ)
+
+<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
+
+你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
+
+你可能想说我就想本地跑起来，不想在线修改。
+
+当然是是可以的
+
+
+### 三、下载demo源码
+  在codesandbox的文件目录工具有下载按钮，参照图中红色部分
+
+  点击下载你可以把这个demo的源码下载到本地。
+
+### 四、启动项目
+   解压项目，进入项目目录
+
+
+#### 1.安装环境依赖
+
+如果不知道yarn可能需要补充一下前端知识了，如果没有yarn环境你需要安装一下，
+
+```bash
+yarn install 
+```
+
+
+####  2. 启动项目
+
+```bash
+yarn  start
+```
+
+ 浏览器就会自动打开 [http://localhost:3000/](http://localhost:3000/)，这样demo 就跑起来了
+
+<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oQQ2RbOzx0oAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
+
+现在你可以尽情的本地修改代码，添加自己的图层了。
+
+L7 所有demo都可以在codesandbox 打开，你可以下载代码。
--- a/docs/tutorial/demo.zh.md
+++ b/docs/tutorial/demo.zh.md
@ -0,0 +1,66 @@
+---
+title: 如何在本地运行demo
+order: 1
+---
+
+
+### 一、打开L7demo页面
+
+
+ 选择一个任意一个你想看的demo
+
+
+<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*bKT5TrlYlGEAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
+
+你可能没有注意，代码区的上方有一排工具按钮，注意了你可能不知道干什么用的。
+
+
+### 二、打开 codesandbox。
+
+点击左侧第三个按钮，你就进入了 codesandbox。
+
+![L7 地理可视化](https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*TrpMSJrrSDMAAAAAAAAAAABkARQnAQ)
+
+<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*coZsTLbX2FQAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
+
+你发现你进入了一个线代码编辑器比较流行，这个里面你可以修改代码，并且能够随时看到效果
+
+你可能想说我就想本地跑起来，不想在线修改。
+
+当然是是可以的
+
+
+### 三、下载demo源码
+  在codesandbox的文件目录工具有下载按钮，参照图中红色部分
+
+  点击下载你可以把这个demo的源码下载到本地。
+
+### 四、启动项目
+   解压项目，进入项目目录
+
+
+#### 1.安装环境依赖
+
+如果不知道yarn可能需要补充一下前端知识了，如果没有yarn环境你需要安装一下，
+
+```bash
+yarn install 
+```
+
+
+####  2. 启动项目
+
+```bash
+yarn  start
+```
+
+ 浏览器就会自动打开 [http://localhost:3000/](http://localhost:3000/)，这样demo 就跑起来了
+
+<img src="https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*oQQ2RbOzx0oAAAAAAAAAAABkARQnAQ" alt="L7 地理可视化" width = "50%" height = "100%">
+
+
+现在你可以尽情的本地修改代码，添加自己的图层了。
+
+L7 所有demo都可以在codesandbox 打开，你可以下载代码。
+
+
--- a/examples/gallery/basic/demo/arcCircle.js
+++ b/examples/gallery/basic/demo/arcCircle.js
@ -6,14 +6,14 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 0,
-    center: [107.77791556935472, 35.443286920228644],
-    zoom: 2.9142882493605033,
-  }),
+    center: [ 107.77791556935472, 35.443286920228644 ],
+    zoom: 2.9142882493605033
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
@ -21,15 +21,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
          x: 'lng1',
          y: 'lat1',
          x1: 'lng2',
-          y1: 'lat2',
-        },
+          y1: 'lat2'
+        }
      })
      .size(1)
      .shape('arc')
      .color('#8C1EB2')
      .style({
        opacity: 0.8,
-        blur: 0.99,
+        blur: 0.99
      });
    scene.addLayer(layer);
  });
--- a/examples/gallery/basic/demo/bus_dark.js
+++ b/examples/gallery/basic/demo/bus_dark.js
@ -5,27 +5,27 @@ const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'dark',
-    center: [103.83735604457024, 1.360253881403068],
+    center: [ 103.83735604457024, 1.360253881403068 ],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
-    rotation: 19.313180925794313,
-  }),
+    rotation: 19.313180925794313
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
+  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
          coordinates: 'path',
-          type: 'json',
-        },
+          type: 'json'
+        }
      })
-      .size('level', (level) => {
-        return [1.0, level * 1];
+      .size('level', level => {
+        return [ 1.0, level * 1 ];
      })
      .shape('line')
      .color(
@ -40,8 +40,8 @@ fetch(
          '#DEB8D4',
          '#F5D4E6',
          '#FAE4F1',
-          '#FFF3FC',
-        ].slice(0, 8),
+          '#FFF3FC'
+        ].slice(0, 8)
      );
    scene.addLayer(layer);
  });
--- a/examples/gallery/basic/demo/column_dark.js
+++ b/examples/gallery/basic/demo/column_dark.js
@ -6,25 +6,25 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 35.210526315789465,
    style: 'dark',
-    center: [104.288144, 31.239692],
-    zoom: 4.4,
-  }),
+    center: [ 104.288144, 31.239692 ],
+    zoom: 4.4
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data.list, {
        parser: {
          type: 'json',
          x: 'j',
-          y: 'w',
-        },
+          y: 'w'
+        }
      })
      .shape('cylinder')
      .size('t', function(level) {
-        return [1, 2, level * 2 + 20];
+        return [ 1, 2, level * 2 + 20 ];
      })
      .color('t', [
        '#094D4A',
@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
        '#5FD3A6',
        '#7BE39E',
        '#A1EDB8',
-        '#CEF8D6',
+        '#CEF8D6'
      ])
      .style({
-        opacity: 1.0,
+        opacity: 1.0
      });
    scene.addLayer(pointLayer);
  });
--- a/examples/gallery/basic/demo/light.js
+++ b/examples/gallery/basic/demo/light.js
@ -6,40 +6,40 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 43,
-    center: [120.13383079335335, 29.651873105004427],
-    zoom: 7.068989519212174,
-  }),
+    center: [ 120.13383079335335, 29.651873105004427 ],
+    zoom: 7.068989519212174
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'hexagon',
            size: 2500,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('sum', (sum) => {
+      .size('sum', sum => {
        return sum * 200;
      })
      .shape('hexagonColumn')
      .style({
        coverage: 0.8,
        angle: 0,
-        opacity: 1.0,
+        opacity: 1.0
      })
      .color('sum', [
        '#094D4A',
@ -53,7 +53,7 @@ fetch(
        '#A1EDB8',
        '#C3F9CC',
        '#DEFAC0',
-        '#ECFFB1',
+        '#ECFFB1'
      ]);
    scene.addLayer(layer);
  });
--- a/examples/gallery/basic/demo/normal.js
+++ b/examples/gallery/basic/demo/normal.js
@ -4,27 +4,28 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
-    center: [121.417463, 31.215175],
+    center: [ 121.417463, 31.215175 ],
+    style: 'dark',
    pitch: 0,
-    zoom: 11,
-  }),
+    zoom: 11
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          y: 'lat',
-          x: 'lng',
-        },
+          x: 'lng'
+        }
      })
      .size(0.5)
      .color('#080298')
      .style({
-        opacity: 1,
+        opacity: 1
      });

    scene.addLayer(pointLayer);
--- a/examples/gallery/basic/demo/point.js
+++ b/examples/gallery/basic/demo/point.js
@ -6,16 +6,16 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 64.88,
    style: 'dark',
-    center: [114.060288, 22.53684],
-    zoom: 15.63,
-  }),
+    center: [ 114.060288, 22.53684 ],
+    zoom: 15.63
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data)
      .size(2)
@ -29,10 +29,10 @@ fetch(
        '#83CED6',
        '#A6E1E0',
        '#B8EFE2',
-        '#D7F9F0',
+        '#D7F9F0'
      ])
      .style({
-        opacity: 1,
+        opacity: 1
      });

    scene.addLayer(pointLayer);
--- a/examples/heatmap/grid/demo/china.js
+++ b/examples/heatmap/grid/demo/china.js
@ -6,39 +6,39 @@ const scene = new Scene({
  map: new GaodeMap({
    style: 'light',
    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'grid',
            size: 20000,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('count', (value) => {
+      .size('count', value => {
        return value * 0;
      })
      .shape('square')
      .style({
        coverage: 1,
-        angle: 0,
+        angle: 0
      })
      .color(
        'count',
@ -56,8 +56,8 @@ fetch(
          '#30C7C4',
          '#6BD5A0',
          '#A7ECB2',
-          '#D0F4CA',
-        ].reverse(),
+          '#D0F4CA'
+        ].reverse()
      );

    scene.addLayer(layer);
--- a/examples/heatmap/grid/demo/grid1.js
+++ b/examples/heatmap/grid/demo/grid1.js
@ -6,39 +6,39 @@ const scene = new Scene({
  map: new GaodeMap({
    style: 'dark',
    pitch: 0,
-    center: [110.097892, 33.853662],
-    zoom: 4.056,
-  }),
+    center: [ 110.097892, 33.853662 ],
+    zoom: 4.056
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'grid',
            size: 10000,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('count', (value) => {
+      .size('count', value => {
        return value * 0;
      })
      .shape('square')
      .style({
        coverage: 1,
-        angle: 0,
+        angle: 0
      })
      .color(
        'count',
@ -48,8 +48,8 @@ fetch(
          '#FFF598',
          '#FF40F3',
          '#9415FF',
-          '#421EB2',
-        ].reverse(),
+          '#421EB2'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/heatmap/grid/demo/heatmap3.js
+++ b/examples/heatmap/grid/demo/heatmap3.js
@ -6,39 +6,39 @@ const scene = new Scene({
  map: new GaodeMap({
    style: 'light',
    pitch: 0,
-    center: [110.097892, 33.853662],
-    zoom: 4.056,
-  }),
+    center: [ 110.097892, 33.853662 ],
+    zoom: 4.056
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'grid',
            size: 20000,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('count', (value) => {
+      .size('count', value => {
        return value * 0;
      })
      .shape('circle')
      .style({
        coverage: 0.9,
-        angle: 0,
+        angle: 0
      })
      .color(
        'count',
@ -54,8 +54,8 @@ fetch(
          '#F77B00',
          '#ED9909',
          '#ECC357',
-          '#EDE59C',
-        ].reverse(),
+          '#EDE59C'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/heatmap/grid/demo/world.js
+++ b/examples/heatmap/grid/demo/world.js
@ -6,39 +6,39 @@ const scene = new Scene({
  map: new GaodeMap({
    style: 'dark',
    pitch: 0,
-    center: [110.097892, 33.853662],
-    zoom: 4.056,
-  }),
+    center: [ 110.097892, 33.853662 ],
+    zoom: 4.056
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'grid',
            size: 10000,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('count', (value) => {
+      .size('count', value => {
        return value * 0;
      })
      .shape('square')
      .style({
        coverage: 1,
-        angle: 0,
+        angle: 0
      })
      .color(
        'count',
@ -50,8 +50,8 @@ fetch(
          '#46F3FF',
          '#02BEFF',
          '#1A7AFF',
-          '#0A1FB2',
-        ].reverse(),
+          '#0A1FB2'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/heatmap/heatmap/demo/heatmap.js
+++ b/examples/heatmap/heatmap/demo/heatmap.js
@ -6,20 +6,20 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 0,
-    center: [127.5671666579043, 7.445038892195569],
-    zoom: 2.632456779444394,
-  }),
+    center: [ 127.5671666579043, 7.445038892195569 ],
+    zoom: 2.632456779444394
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data)
      .shape('heatmap')
-      .size('mag', [0, 1.0]) // weight映射通道
+      .size('mag', [ 0, 1.0 ]) // weight映射通道
      .style({
        intensity: 2,
        radius: 20,
@ -31,10 +31,10 @@ fetch(
            '#FFF598',
            '#91EABC',
            '#2EA9A1',
-            '#206C7C',
+            '#206C7C'
          ].reverse(),
-          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        },
+          positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        }
      });
    scene.addLayer(layer);
  });
--- a/examples/heatmap/heatmap/demo/heatmap3d.js
+++ b/examples/heatmap/heatmap/demo/heatmap3d.js
@ -6,20 +6,20 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 58.5,
-    center: [111.8759, 30.6942],
+    center: [ 111.8759, 30.6942 ],
    rotation: 0.519,
-    zoom: 3.6116,
-  }),
+    zoom: 3.6116
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
+  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data)
-      .size('capacity', [0, 1])
+      .size('capacity', [ 0, 1 ])
      .shape('heatmap3D')
      // weight映射通道
      .style({
@ -33,10 +33,10 @@ fetch(
            '#DAF291',
            '#FFD591',
            '#FF7A45',
-            '#CF1D49',
+            '#CF1D49'
          ],
-          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        },
+          positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        }
      });
    scene.addLayer(layer);
  });
--- a/examples/heatmap/heatmap/demo/heatmap_purple.js
+++ b/examples/heatmap/heatmap/demo/heatmap_purple.js
@ -6,20 +6,20 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 0,
-    center: [127.5671666579043, 7.445038892195569],
-    zoom: 2.632456779444394,
-  }),
+    center: [ 127.5671666579043, 7.445038892195569 ],
+    zoom: 2.632456779444394
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data)
      .shape('heatmap')
-      .size('mag', [0, 1.0]) // weight映射通道
+      .size('mag', [ 0, 1.0 ]) // weight映射通道
      .style({
        intensity: 2,
        radius: 20,
@ -31,10 +31,10 @@ fetch(
            '#FFF598',
            '#F27DEB',
            '#8C1EB2',
-            '#421EB2',
+            '#421EB2'
          ].reverse(),
-          positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
-        },
+          positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
+        }
      });
    scene.addLayer(layer);
  });
--- a/examples/heatmap/hexagon/demo/china.js
+++ b/examples/heatmap/hexagon/demo/china.js
@ -6,33 +6,33 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 47.49999999999995,
-    center: [112.50447776627743, 30.830476390931125],
-    zoom: 3.9879693680088626,
-  }),
+    center: [ 112.50447776627743, 30.830476390931125 ],
+    zoom: 3.9879693680088626
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'hexagon',
            size: 17000,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('sum', (value) => {
+      .size('sum', value => {
        return value * 20;
      })
      .shape('hexagonColumn')
@ -44,12 +44,12 @@ fetch(
          '#FFF598',
          '#FF40F3',
          '#9415FF',
-          '#421EB2',
-        ].reverse(),
+          '#421EB2'
+        ].reverse()
      )
      .style({
        coverage: 0.9,
-        angle: 0,
+        angle: 0
      });

    scene.addLayer(layer);
--- a/examples/heatmap/hexagon/demo/hexagon.js
+++ b/examples/heatmap/hexagon/demo/hexagon.js
@ -6,17 +6,17 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'light',
    pitch: 56.499,
-    center: [114.07737552216226, 22.542656745583486],
+    center: [ 114.07737552216226, 22.542656745583486 ],
    rotation: 39.19,
-    zoom: 12.47985,
-  }),
+    zoom: 12.47985
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        transforms: [
@ -24,16 +24,16 @@ fetch(
            type: 'hexagon',
            size: 100,
            field: 'h12',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('sum', [0, 600])
+      .size('sum', [ 0, 600 ])
      .shape('hexagonColumn')
      .style({
        coverage: 0.8,
        angle: 0,
-        opacity: 1.0,
+        opacity: 1.0
      })
      .color(
        'sum',
@ -47,8 +47,8 @@ fetch(
          '#5FD3A6',
          '#7BE39E',
          '#A1EDB8',
-          '#CEF8D6',
-        ].reverse(),
+          '#CEF8D6'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/heatmap/hexagon/demo/light.js
+++ b/examples/heatmap/hexagon/demo/light.js
@ -6,40 +6,40 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'dark',
    pitch: 43,
-    center: [120.13383079335335, 29.651873105004427],
-    zoom: 7.068989519212174,
-  }),
+    center: [ 120.13383079335335, 29.651873105004427 ],
+    zoom: 7.068989519212174
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'lng',
-          y: 'lat',
+          y: 'lat'
        },
        transforms: [
          {
            type: 'hexagon',
            size: 2500,
            field: 'v',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('sum', (sum) => {
+      .size('sum', sum => {
        return sum * 200;
      })
      .shape('hexagonColumn')
      .style({
        coverage: 0.8,
        angle: 0,
-        opacity: 1.0,
+        opacity: 1.0
      })
      .color('sum', [
        '#094D4A',
@ -53,7 +53,7 @@ fetch(
        '#A1EDB8',
        '#C3F9CC',
        '#DEFAC0',
-        '#ECFFB1',
+        '#ECFFB1'
      ]);
    scene.addLayer(layer);
  });
--- a/examples/heatmap/hexagon/demo/world.js
+++ b/examples/heatmap/hexagon/demo/world.js
@ -6,16 +6,16 @@ const scene = new Scene({
  map: new GaodeMap({
    style: 'light',
    pitch: 0,
-    center: [104.995156, 31.450658],
-    zoom: 3.79,
-  }),
+    center: [ 104.995156, 31.450658 ],
+    zoom: 3.79
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
+  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new HeatmapLayer({})
      .source(data, {
        transforms: [
@ -23,18 +23,18 @@ fetch(
            type: 'hexagon',
            size: 90000,
            field: 'capacity',
-            method: 'sum',
-          },
-        ],
+            method: 'sum'
+          }
+        ]
      })
-      .size('sum', (value) => {
+      .size('sum', value => {
        return value * 50;
      })
      .shape('hexagon')
      .style({
        coverage: 0.9,
        angle: 0,
-        opacity: 1.0,
+        opacity: 1.0
      })
      .color(
        'sum',
@ -50,8 +50,8 @@ fetch(
          '#0F62FF',
          '#30B2E9',
          '#30B2E9',
-          '#40C4CE',
-        ].reverse(),
+          '#40C4CE'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/line/arc/demo/arcCircle.js
+++ b/examples/line/arc/demo/arcCircle.js
@ -6,13 +6,13 @@ const scene = new Scene({
  map: new Mapbox({
    pitch: 0,
    style: 'dark',
-    center: [107.77791556935472, 35.443286920228644],
-    zoom: 2.9142882493605033,
-  }),
+    center: [ 107.77791556935472, 35.443286920228644 ],
+    zoom: 2.9142882493605033
+  })
 });
 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
@ -20,15 +20,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
          x: 'lng1',
          y: 'lat1',
          x1: 'lng2',
-          y1: 'lat2',
-        },
+          y1: 'lat2'
+        }
      })
      .size(1)
      .shape('greatcircle')
      .color('#8C1EB2')
      .style({
        opacity: 0.8,
-        blur: 0.99,
+        blur: 0.99
      });
    scene.addLayer(layer);
  });
--- a/examples/line/arc/demo/meta.json
+++ b/examples/line/arc/demo/meta.json
@ -9,11 +9,6 @@
      "title": "大圆弧线",
      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"
    },
-    {
-      "filename": "arc.js",
-      "title": "弧线",
-      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*ue-SRJEKUqwAAAAAAAAAAABkARQnAQ"
-    },
    {
      "filename": "trip_arc_dark.js",
      "title": "3D 弧线",
--- a/examples/line/arc/demo/trip_arc.js
+++ b/examples/line/arc/demo/trip_arc.js
@ -7,15 +7,15 @@ const scene = new Scene({
    pitch: 60,
    type: 'mapbox',
    style: 'light',
-    center: [-74.06967, 40.720399],
-    zoom: 12.45977,
-  }),
+    center: [ -74.06967, 40.720399 ],
+    zoom: 12.45977
+  })
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
@ -23,15 +23,15 @@ fetch(
          x: 'start station longitude',
          y: 'start station latitude',
          x1: 'end station longitude',
-          y1: 'end station latitude',
-        },
+          y1: 'end station latitude'
+        }
      })
      .size(1)
      .shape('arc3d')
      .color('#0C47BF')
      .style({
        opacity: 1,
-        blur: 0.9,
+        blur: 0.9
      });
    scene.addLayer(layer);
  });
--- a/examples/line/arc/demo/trip_arc_dark.js
+++ b/examples/line/arc/demo/trip_arc_dark.js
@ -6,15 +6,15 @@ const scene = new Scene({
  map: new Mapbox({
    pitch: 60,
    style: 'dark',
-    center: [104.34278, 41.12554],
+    center: [ 104.34278, 41.12554 ],
    zoom: 2.94888,
-    rotation: 42.3999,
-  }),
+    rotation: 42.3999
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
@ -22,14 +22,14 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
          x: 'lng1',
          y: 'lat1',
          x1: 'lng2',
-          y1: 'lat2',
-        },
+          y1: 'lat2'
+        }
      })
      .size(1)
      .shape('arc3d')
      .color('#FF7C6A')
      .style({
-        opacity: 0.8,
+        opacity: 0.8
      });
    scene.addLayer(layer);
  });
--- a/examples/line/isoline/demo/ele.js
+++ b/examples/line/isoline/demo/ele.js
@ -6,22 +6,22 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 53.6305,
    style: 'light',
-    center: [102.600579, 23.114887],
-    zoom: 14.66,
-  }),
+    center: [ 102.600579, 23.114887 ],
+    zoom: 14.66
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data)
-      .size('ELEV', (h) => {
-        return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
+      .size('ELEV', h => {
+        return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
      })
      .shape('line')
      .scale('ELEV', {
-        type: 'quantize',
+        type: 'quantize'
      })
      .color(
        'ELEV',
@ -35,8 +35,8 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
          '#C8D7F5',
          '#A5C1FC',
          '#7FA7F9',
-          '#5F8AE5',
-        ].reverse(),
+          '#5F8AE5'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/line/isoline/demo/ele_dark.js
+++ b/examples/line/isoline/demo/ele_dark.js
@ -6,22 +6,22 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 26.842105263157915,
    style: 'dark',
-    center: [102.599436, 23.116371],
-    zoom: 14.78,
-  }),
+    center: [ 102.599436, 23.116371 ],
+    zoom: 14.78
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data)
-      .size('ELEV', (h) => {
-        return [h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20];
+      .size('ELEV', h => {
+        return [ h % 50 === 0 ? 1.0 : 0.5, (h - 1300) * 20 ];
      })
      .shape('line')
      .scale('ELEV', {
-        type: 'quantize',
+        type: 'quantize'
      })
      .color('ELEV', [
        '#094D4A',
@ -33,7 +33,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
        '#5FD3A6',
        '#7BE39E',
        '#A1EDB8',
-        '#CEF8D6',
+        '#CEF8D6'
      ]);
    scene.addLayer(layer);
  });
--- a/examples/line/isoline/demo/isoline.js
+++ b/examples/line/isoline/demo/isoline.js
@ -6,22 +6,22 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [104.117492, 36.492696],
-    zoom: 3.89,
-  }),
+    center: [ 104.117492, 36.492696 ],
+    zoom: 3.89
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
+  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data)
      .scale('value', {
-        type: 'quantile',
+        type: 'quantile'
      })
-      .size('value', [0.5, 1, 1.5, 2])
+      .size('value', [ 0.5, 1, 1.5, 2 ])
      .shape('line')
      .color(
        'value',
@ -35,8 +35,8 @@ fetch(
          '#83CED6',
          '#A6E1E0',
          '#B8EFE2',
-          '#D7F9F0',
-        ].reverse(),
+          '#D7F9F0'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/line/line/demo/isoline.js
+++ b/examples/line/line/demo/isoline.js
@ -6,22 +6,22 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [104.117492, 36.492696],
-    zoom: 3.89,
-  }),
+    center: [ 104.117492, 36.492696 ],
+    zoom: 3.89
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json',
+  'https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data)
      .scale('value', {
-        type: 'quantile',
+        type: 'quantile'
      })
-      .size('value', [0.5, 1, 1.5, 2])
+      .size('value', [ 0.5, 1, 1.5, 2 ])
      .shape('line')
      .color(
        'value',
@ -35,8 +35,8 @@ fetch(
          '#83CED6',
          '#A6E1E0',
          '#B8EFE2',
-          '#D7F9F0',
-        ].reverse(),
+          '#D7F9F0'
+        ].reverse()
      );
    scene.addLayer(layer);
  });
--- a/examples/line/path/demo/bus_dark.js
+++ b/examples/line/path/demo/bus_dark.js
@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
-    center: [103.83735, 1.3602538],
+    center: [ 103.83735, 1.3602538 ],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313,
-    style: 'dark',
-  }),
+    style: 'dark'
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
+  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
          type: 'json',
-          coordinates: 'path',
-        },
+          coordinates: 'path'
+        }
      })
-      .size('level', (level) => {
-        return [0.8, level * 1];
+      .size('level', level => {
+        return [ 0.8, level * 1 ];
      })
      .shape('line')
      .color(
@ -40,8 +40,8 @@ fetch(
          '#DEB8D4',
          '#F5D4E6',
          '#FAE4F1',
-          '#FFF3FC',
-        ].slice(0, 8),
+          '#FFF3FC'
+        ].slice(0, 8)
      );
    scene.addLayer(layer);
  });
--- a/examples/line/path/demo/bus_light.js
+++ b/examples/line/path/demo/bus_light.js
@ -4,28 +4,28 @@ import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
-    center: [103.83735604457024, 1.360253881403068],
+    center: [ 103.83735604457024, 1.360253881403068 ],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313,
-    style: 'light',
-  }),
+    style: 'light'
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json',
+  'https://gw.alipayobjects.com/os/basement_prod/ee07641d-5490-4768-9826-25862e8019e1.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data, {
        parser: {
          type: 'json',
-          coordinates: 'path',
-        },
+          coordinates: 'path'
+        }
      })
-      .size('level', (level) => {
-        return [0.8, level * 1];
+      .size('level', level => {
+        return [ 0.8, level * 1 ];
      })
      .shape('line')
      .color(
@ -40,10 +40,10 @@ fetch(
          '#83CED6',
          '#A6E1E0',
          '#B8EFE2',
-          '#D7F9F0',
+          '#D7F9F0'
        ]
          .reverse()
-          .slice(0, 8),
+          .slice(0, 8)
      );
    scene.addLayer(layer);
  });
--- a/examples/line/path/demo/road_dark.js
+++ b/examples/line/path/demo/road_dark.js
@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
-    center: [116.3956, 39.9392],
+    center: [ 116.3956, 39.9392 ],
    pitch: 0,
    zoom: 10,
    rotation: 0,
-    style: 'dark',
-  }),
+    style: 'dark'
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
+  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data)
      .size(1.5)
      .shape('line')
-      .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16']);
+      .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ]);
    scene.addLayer(layer);
  });
--- a/examples/line/path/demo/road_light.js
+++ b/examples/line/path/demo/road_light.js
@ -4,23 +4,23 @@ import { Mapbox } from '@antv/l7-maps';
 const scene = new Scene({
  id: 'map',
  map: new Mapbox({
-    center: [116.3956, 39.9392],
+    center: [ 116.3956, 39.9392 ],
    pitch: 0,
    zoom: 10,
    rotation: 0,
-    style: 'light',
-  }),
+    style: 'light'
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json',
+  'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new LineLayer({})
      .source(data)
      .size(1.5)
      .shape('line')
-      .color('标准名称', ['#5B8FF9', '#5CCEA1', '#5D7092']);
+      .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
    scene.addLayer(layer);
  });
--- a/examples/point/bubble/demo/color.js
+++ b/examples/point/bubble/demo/color.js
@ -6,23 +6,23 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [121.435159, 31.256971],
+    center: [ 121.435159, 31.256971 ],
    zoom: 14.89,
-    minZoom: 10,
-  }),
+    minZoom: 10
+  })
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'json',
          x: 'longitude',
-          y: 'latitude',
-        },
+          y: 'latitude'
+        }
      })
      .shape('name', [
        'circle',
@ -33,13 +33,13 @@ fetch(
        'octogon',
        'hexagram',
        'rhombus',
-        'vesica',
+        'vesica'
      ])
-      .size('unit_price', [10, 25])
-      .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
+      .size('unit_price', [ 10, 25 ])
+      .color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
      .style({
        opacity: 0.3,
-        strokeWidth: 2,
+        strokeWidth: 2
      });

    scene.addLayer(pointLayer);
--- a/examples/point/bubble/demo/point.js
+++ b/examples/point/bubble/demo/point.js
@ -7,27 +7,27 @@ const scene = new Scene({
    pitch: 0,
    type: 'amap',
    style: 'light',
-    center: [140.067171, 36.26186],
+    center: [ 140.067171, 36.26186 ],
    zoom: 5.32,
-    maxZoom: 10,
-  }),
+    maxZoom: 10
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
+  'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data)
      .shape('circle')
-      .size('mag', [1, 25])
-      .color('mag', (mag) => {
+      .size('mag', [ 1, 25 ])
+      .color('mag', mag => {
        return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
      })
      .style({
        opacity: 0.3,
-        strokeWidth: 1,
+        strokeWidth: 1
      });

    scene.addLayer(pointLayer);
--- a/examples/point/bubble/demo/scatter.js
+++ b/examples/point/bubble/demo/scatter.js
@ -5,24 +5,24 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
-    center: [-121.24357, 37.58264],
+    center: [ -121.24357, 37.58264 ],
    pitch: 0,
-    zoom: 6.45,
-  }),
+    zoom: 6.45
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
+  'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
 )
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'Longitude',
-          y: 'Latitude',
-        },
+          y: 'Latitude'
+        }
      })
      .shape('circle')
      .size(4)
@ -36,11 +36,11 @@ fetch(
        '#83CED6',
        '#A6E1E0',
        '#B8EFE2',
-        '#D7F9F0',
+        '#D7F9F0'
      ])
      .style({
        opacity: 0.5,
-        strokeWidth: 0,
+        strokeWidth: 0
      });

    scene.addLayer(pointLayer);
--- a/examples/point/bubble/demo/world.js
+++ b/examples/point/bubble/demo/world.js
@ -6,34 +6,34 @@ const scene = new Scene({
  map: new Mapbox({
    pitch: 0,
    style: 'dark',
-    center: [96.99215001469588, 29.281597225674773],
+    center: [ 96.99215001469588, 29.281597225674773 ],
    zoom: 2.194613775109773,
-    maxZoom: 10,
-  }),
+    maxZoom: 10
+  })
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
+  'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
-    data.features = data.features.filter((item) => {
+  .then(res => res.json())
+  .then(data => {
+    data.features = data.features.filter(item => {
      return item.properties.capacity > 800;
    });
    const pointLayer = new PointLayer({})
      .source(data)
      .shape('circle')
-      .size('capacity', [0, 16])
+      .size('capacity', [ 0, 16 ])
      .color('capacity', [
        '#34B6B7',
        '#4AC5AF',
        '#5FD3A6',
        '#7BE39E',
        '#A1EDB8',
-        '#CEF8D6',
+        '#CEF8D6'
      ])
      .style({
        opacity: 0.5,
-        strokeWidth: 0,
+        strokeWidth: 0
      });

    scene.addLayer(pointLayer);
--- a/examples/point/chart/demo/bar.js
+++ b/examples/point/chart/demo/bar.js
@ -6,20 +6,20 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
-    center: [2.6125016864608597, 49.359131],
+    center: [ 2.6125016864608597, 49.359131 ],
    pitch: 0,
-    zoom: 4.19,
-  }),
+    zoom: 4.19
+  })
 });
 addChart();
 scene.render();

 function addChart() {
  fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
+    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
  )
-    .then((res) => res.json())
-    .then((data) => {
+    .then(res => res.json())
+    .then(data => {
      data.nodes.forEach(function(item) {
        const el = document.createElement('div');
        const total =
@ -33,18 +33,18 @@ function addChart() {
          {
            item: 'Agriculture',
            count: item.gdp.Agriculture,
-            percent: item.gdp.Agriculture / total,
+            percent: item.gdp.Agriculture / total
          },
          {
            item: 'Industry',
            count: item.gdp.Industry,
-            percent: item.gdp.Industry / total,
+            percent: item.gdp.Industry / total
          },
          {
            item: 'Service',
            count: item.gdp.Service,
-            percent: item.gdp.Service / total,
-          },
+            percent: item.gdp.Service / total
+          }
        ];

        const chart = new G2.Chart({
@ -52,25 +52,25 @@ function addChart() {
          width: size,
          height: size,
          render: 'svg',
-          padding: 0,
+          padding: 0
        });
        chart.legend(false);
        chart.source(itemData);
        chart.tooltip(false);
        chart.axis('count', {
-          grid: false,
+          grid: false
        });
        chart
          .interval()
          .position('item*count')
-          .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
+          .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
          .opacity(1);
        chart.render();
        const marker = new Marker({
-          element: el,
+          element: el
        }).setLnglat({
          lng: item.coordinates[0],
-          lat: item.coordinates[1],
+          lat: item.coordinates[1]
        });
        scene.addMarker(marker);
      });
--- a/examples/point/chart/demo/chart.js
+++ b/examples/point/chart/demo/chart.js
@ -6,20 +6,20 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
-    center: [2.6125016864608597, 49.359131],
+    center: [ 2.6125016864608597, 49.359131 ],
    pitch: 0,
-    zoom: 4.19,
-  }),
+    zoom: 4.19
+  })
 });
 addChart();
 scene.render();

 function addChart() {
  fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json',
+    'https://gw.alipayobjects.com/os/basement_prod/0b96cca4-7e83-449a-93d0-2a77053e74ab.json'
  )
-    .then((res) => res.json())
-    .then((data) => {
+    .then(res => res.json())
+    .then(data => {
      data.nodes.forEach(function(item) {
        const el = document.createElement('div');
        const total =
@ -33,18 +33,18 @@ function addChart() {
          {
            item: 'Agriculture',
            count: item.gdp.Agriculture,
-            percent: item.gdp.Agriculture / total,
+            percent: item.gdp.Agriculture / total
          },
          {
            item: 'Industry',
            count: item.gdp.Industry,
-            percent: item.gdp.Industry / total,
+            percent: item.gdp.Industry / total
          },
          {
            item: 'Service',
            count: item.gdp.Service,
-            percent: item.gdp.Service / total,
-          },
+            percent: item.gdp.Service / total
+          }
        ];

        const sliceNumber = 0.02;
@ -54,19 +54,19 @@ function addChart() {
          draw: function draw(cfg, container) {
            const points = cfg.points;
            let 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([ '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
+              }
            });
-          },
+          }
        });

        const chart = new G2.Chart({
@ -74,25 +74,25 @@ function addChart() {
          width: size,
          height: size,
          render: 'svg',
-          padding: 0,
+          padding: 0
        });
        chart.legend(false);
        chart.source(itemData);
        chart.coord('theta', {
-          innerRadius: 0.6,
+          innerRadius: 0.6
        });
        chart.tooltip(false);
        chart
          .intervalStack()
          .position('percent')
-          .color('item', ['#5CCEA1', '#5D7092', '#5B8FF9'])
+          .color('item', [ '#5CCEA1', '#5D7092', '#5B8FF9' ])
          .shape('sliceShape');
        chart.render();
        const marker = new Marker({
-          element: el,
+          element: el
        }).setLnglat({
          lng: item.coordinates[0],
-          lat: item.coordinates[1],
+          lat: item.coordinates[1]
        });
        scene.addMarker(marker);
      });
--- a/examples/point/chart/demo/ring.js
+++ b/examples/point/chart/demo/ring.js
@ -40,30 +40,30 @@ const scene = new Scene({
  map: new Mapbox({
    pitch: 0,
    style: 'dark',
-    center: [52.21496184144132, 24.121126851768906],
-    zoom: 3.802,
-  }),
+    center: [ 52.21496184144132, 24.121126851768906 ],
+    zoom: 3.802
+  })
 });
 Promise.all([
  fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json',
-  ).then((d) => d.json()),
+    'https://gw.alipayobjects.com/os/basement_prod/5b772136-a1f4-4fc5-9a80-9f9974b4b182.json'
+  ).then(d => d.json()),
  fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
-  ).then((d) => d.json()),
-]).then(function onLoad([center, population]) {
+    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
+  ).then(d => d.json())
+]).then(function onLoad([ center, population ]) {
  const popobj = {};
-  population.forEach((element) => {
+  population.forEach(element => {
    popobj[element.Code] =
      element['Population, female (% of total) (% of total)'];
  });
  // 数据绑定

-  center.features = center.features.map((fe) => {
+  center.features = center.features.map(fe => {
    fe.properties.female = popobj[fe.properties.id] * 1 || 0;
    return fe;
  });
-  center.features.forEach((point) => {
+  center.features.forEach(point => {
    const el = document.createElement('div');
    const coord = point.geometry.coordinates;
    const v = point.properties.female * 1;
@ -74,36 +74,36 @@ Promise.all([
    const data = [
      {
        type: '男性',
-        value: 100.0 - v.toFixed(2),
+        value: 100.0 - v.toFixed(2)
      },
      {
        type: '女性',
-        value: v.toFixed(2) * 1,
-      },
+        value: v.toFixed(2) * 1
+      }
    ];
    const chart = new G2.Chart({
      container: el,
      width: size,
      height: size,
      render: 'svg',
-      padding: 0,
+      padding: 0
    });
    chart.source(data);
    chart.legend(false);
    chart.tooltip(false);
    chart.coord('theta', {
      radius: 0.9,
-      innerRadius: 0.6,
+      innerRadius: 0.6
    });
    chart
      .intervalStack()
      .position('value')
-      .color('type', ['#5CCEA1', '#5B8FF9'])
+      .color('type', [ '#5CCEA1', '#5B8FF9' ])
      .opacity(1);
    chart.render();
    const marker = new Marker({ element: el }).setLnglat({
      lng: coord[0],
-      lat: coord[1],
+      lat: coord[1]
    });
    scene.addMarker(marker);
  });
--- a/examples/point/column/demo/clumn_shape.js
+++ b/examples/point/column/demo/clumn_shape.js
@ -6,37 +6,37 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 66.02383,
    style: 'dark',
-    center: [121.400257, 31.25287],
+    center: [ 121.400257, 31.25287 ],
    zoom: 14.55,
-    rotation: 134.9507,
-  }),
+    rotation: 134.9507
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'json',
          x: 'longitude',
-          y: 'latitude',
-        },
+          y: 'latitude'
+        }
      })
      .shape('name', [
        'cylinder',
        'triangleColumn',
        'hexagonColumn',
-        'squareColumn',
+        'squareColumn'
      ])
-      .size('unit_price', (h) => {
-        return [6, 6, h / 500];
+      .size('unit_price', h => {
+        return [ 6, 6, h / 500 ];
      })
-      .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
+      .color('name', [ '#739DFF', '#61FCBF', '#FFDE74', '#FF896F' ])
      .style({
-        opacity: 1.0,
+        opacity: 1.0
      });

    scene.addLayer(pointLayer);
--- a/examples/point/column/demo/clumn_shape_light.js
+++ b/examples/point/column/demo/clumn_shape_light.js
@ -6,37 +6,37 @@ const scene = new Scene({
  map: new Mapbox({
    pitch: 60,
    style: 'light',
-    center: [121.412224, 31.26192438],
+    center: [ 121.412224, 31.26192438 ],
    zoom: 13.13438,
-    rotation: 35.97133,
-  }),
+    rotation: 35.97133
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'json',
          x: 'longitude',
-          y: 'latitude',
-        },
+          y: 'latitude'
+        }
      })
      .shape('name', [
        'cylinder',
        'triangleColumn',
        'hexagonColumn',
-        'squareColumn',
+        'squareColumn'
      ])
-      .size('unit_price', (h) => {
-        return [6, 6, h / 500];
+      .size('unit_price', h => {
+        return [ 6, 6, h / 500 ];
      })
-      .color('name', ['#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A'])
+      .color('name', [ '#5B8FF9', '#70E3B5', '#FFD458', '#FF7C6A' ])
      .style({
-        opacity: 1.0,
+        opacity: 1.0
      });

    scene.addLayer(pointLayer);
--- a/examples/point/column/demo/column_dark.js
+++ b/examples/point/column/demo/column_dark.js
@ -6,25 +6,25 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 35.210526315789465,
    style: 'dark',
-    center: [104.288144, 31.239692],
-    zoom: 4.4,
-  }),
+    center: [ 104.288144, 31.239692 ],
+    zoom: 4.4
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data.list, {
        parser: {
          type: 'json',
          x: 'j',
-          y: 'w',
-        },
+          y: 'w'
+        }
      })
      .shape('cylinder')
      .size('t', function(level) {
-        return [1, 2, level * 2 + 20];
+        return [ 1, 2, level * 2 + 20 ];
      })
      .color('t', [
        '#094D4A',
@ -36,10 +36,10 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
        '#5FD3A6',
        '#7BE39E',
        '#A1EDB8',
-        '#CEF8D6',
+        '#CEF8D6'
      ])
      .style({
-        opacity: 1.0,
+        opacity: 1.0
      });
    scene.addLayer(pointLayer);
  });
--- a/examples/point/column/demo/column_light.js
+++ b/examples/point/column/demo/column_light.js
@ -6,30 +6,30 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 48.62562,
    style: 'light',
-    center: [104.026043, 31.847],
+    center: [ 104.026043, 31.847 ],
    rotation: -0.76,
-    zoom: 4.48,
-  }),
+    zoom: 4.48
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data.list, {
        parser: {
          type: 'json',
          x: 'j',
-          y: 'w',
-        },
+          y: 'w'
+        }
      })
      .shape('cylinder')
      .size('t', function(level) {
-        return [1, 2, level * 2 + 20];
+        return [ 1, 2, level * 2 + 20 ];
      })
      .color('#006CFF')
      .style({
-        opacity: 1.0,
+        opacity: 1.0
      });
    scene.addLayer(pointLayer);
  });
--- a/examples/point/image/demo/image.js
+++ b/examples/point/image/demo/image.js
@ -6,37 +6,37 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [121.434765, 31.256735],
-    zoom: 14.83,
-  }),
+    center: [ 121.434765, 31.256735 ],
+    zoom: 14.83
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    scene.addImage(
      '00',
-      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
+      'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
    );
    scene.addImage(
      '01',
-      'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
+      'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
    );
    scene.addImage(
      '02',
-      'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',
+      'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
    );
    const imageLayer = new PointLayer()
      .source(data, {
        parser: {
          type: 'json',
          x: 'longitude',
-          y: 'latitude',
-        },
+          y: 'latitude'
+        }
      })
-      .shape('name', ['00', '01', '02'])
+      .shape('name', [ '00', '01', '02' ])
      .size(20);
    scene.addLayer(imageLayer);
  });
--- a/examples/point/image/demo/locate.js
+++ b/examples/point/image/demo/locate.js
@ -6,19 +6,19 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [116.276227, 35.256776],
-    zoom: 6,
-  }),
+    center: [ 116.276227, 35.256776 ],
+    zoom: 6
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json',
+  'https://gw.alipayobjects.com/os/basement_prod/e2fc6e0a-af2a-4320-96e5-d9f5a5fda442.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    scene.addImage(
      'marker',
-      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
+      'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ'
    );
    const imageLayer = new PointLayer()
      .source(data)
--- a/examples/point/image/demo/weather.js
+++ b/examples/point/image/demo/weather.js
@ -5,65 +5,65 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',
-    center: [120.5969, 29.7918],
+    center: [ 120.5969, 29.7918 ],
    pitch: 35,
    zoom: 7,
-    rotation: 4.183582,
-  }),
+    rotation: 4.183582
+  })
 });
 scene.addImage(
  '00',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*kzTMQqS2QdUAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '01',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*jH1XRb7F7hMAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '02',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '04',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*dmniQrDpCYwAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '11',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YaKSTr3L5i8AAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '15',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*YNlXQYCIzroAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '07',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DccRTI6ZRLoAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '16',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*iQKoS6I-rO8AAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '06',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*f-wyS7ad5p0AAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '08',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*lHhzQrOW4AQAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '17',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9Q0QS4GdaYcAAAAAAAAAAABkARQnAQ'
 );
 scene.addImage(
  '05',
-  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ',
+  'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*LyuVRowl6nAAAAAAAAAAAABkARQnAQ'
 );
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json',
+  'https://gw.alipayobjects.com/os/basement_prod/c6042c6b-45fd-4e2e-adf8-fdbf060441e8.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const imageLayer = new PointLayer()
      .source(data)
      .shape('w', function(w) {
--- a/examples/point/marker/demo/marker.js
+++ b/examples/point/marker/demo/marker.js
@ -5,20 +5,20 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
-    center: [105.790327, 36.495636],
+    center: [ 105.790327, 36.495636 ],
    pitch: 0,
-    zoom: 4,
-  }),
+    zoom: 4
+  })
 });
 addMarkers();
 scene.render();

 function addMarkers() {
  fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json',
+    'https://gw.alipayobjects.com/os/basement_prod/67f47049-8787-45fc-acfe-e19924afe032.json'
  )
-    .then((res) => res.json())
-    .then((nodes) => {
+    .then(res => res.json())
+    .then(nodes => {
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].g !== '1' || nodes[i].v === '') {
          continue;
@ -29,7 +29,7 @@ function addMarkers() {
        el.style.background = getColor(nodes[i].v);
        el.style.borderColor = getColor(nodes[i].v);
        const marker = new Marker({
-          element: el,
+          element: el
        }).setLnglat({ lng: nodes[i].x * 1, lat: nodes[i].y });
        scene.addMarker(marker);
      }
@ -40,16 +40,16 @@ function getColor(v) {
  return v > 50
    ? '#800026'
    : v > 40
-    ? '#BD0026'
-    : v > 30
-    ? '#E31A1C'
-    : v > 20
-    ? '#FC4E2A'
-    : v > 10
-    ? '#FD8D3C'
-    : v > 5
-    ? '#FEB24C'
-    : v > 0
-    ? '#FED976'
-    : '#FFEDA0';
+      ? '#BD0026'
+      : v > 30
+        ? '#E31A1C'
+        : v > 20
+          ? '#FC4E2A'
+          : v > 10
+            ? '#FD8D3C'
+            : v > 5
+              ? '#FEB24C'
+              : v > 0
+                ? '#FED976'
+                : '#FFEDA0';
 }
--- a/examples/point/scatter/demo/normal.js
+++ b/examples/point/scatter/demo/normal.js
@ -5,27 +5,27 @@ const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',
-    center: [121.417463, 31.215175],
+    center: [ 121.417463, 31.215175 ],
    pitch: 0,
-    zoom: 11,
-  }),
+    zoom: 11
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
-  .then((res) => res.text())
-  .then((data) => {
+  .then(res => res.text())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          y: 'lat',
-          x: 'lng',
-        },
+          x: 'lng'
+        }
      })
      .size(0.5)
      .color('#080298')
      .style({
-        opacity: 1,
+        opacity: 1
      });

    scene.addLayer(pointLayer);
--- a/examples/point/scatter/demo/normal2.js
+++ b/examples/point/scatter/demo/normal2.js
@ -6,16 +6,16 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 64.88,
    style: 'dark',
-    center: [114.060288, 22.53684],
-    zoom: 15.63,
-  }),
+    center: [ 114.060288, 22.53684 ],
+    zoom: 15.63
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json',
+  'https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data)
      .size(2)
@ -29,10 +29,10 @@ fetch(
        '#83CED6',
        '#A6E1E0',
        '#B8EFE2',
-        '#D7F9F0',
+        '#D7F9F0'
      ])
      .style({
-        opacity: 1,
+        opacity: 1
      });

    scene.addLayer(pointLayer);
--- a/examples/polygon/3d/demo/polygon.js
+++ b/examples/polygon/3d/demo/polygon.js
@ -6,20 +6,20 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'dark',
-    center: [114.050008, 22.529272],
-    zoom: 14.1,
-  }),
+    center: [ 114.050008, 22.529272 ],
+    zoom: 14.1
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json',
+  'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new PolygonLayer({})
      .source(data)
      .shape('extrude')
-      .size('h20', [100, 120, 160, 200, 260, 500])
+      .size('h20', [ 100, 120, 160, 200, 260, 500 ])
      .color('h20', [
        '#816CAD',
        '#A67FB5',
@ -27,10 +27,10 @@ fetch(
        '#DEB8D4',
        '#F5D4E6',
        '#FAE4F1',
-        '#FFF3FC',
+        '#FFF3FC'
      ])
      .style({
-        opacity: 1.0,
+        opacity: 1.0
      });
    scene.addLayer(layer);
  });
--- a/examples/polygon/fill/demo/fill.js
+++ b/examples/polygon/fill/demo/fill.js
@ -6,16 +6,16 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [116.368652, 39.93866],
-    zoom: 10.07,
-  }),
+    center: [ 116.368652, 39.93866 ],
+    zoom: 10.07
+  })
 });

 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json',
+  'https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const layer = new PolygonLayer({})
      .source(data)
      .color(
@ -30,21 +30,21 @@ fetch(
          '#98B7F7',
          '#BDD0F8',
          '#DDE6F7',
-          '#F2F5FC',
-        ].reverse(),
+          '#F2F5FC'
+        ].reverse()
      )
      .shape('fill')
      .style({
-        opacity: 1,
+        opacity: 1
      });
    const layer2 = new LineLayer({
-      zIndex: 2,
+      zIndex: 2
    })
      .source(data)
      .color('#fff')
      .size(0.3)
      .style({
-        opacity: 1,
+        opacity: 1
      });

    scene.addLayer(layer);
--- a/examples/polygon/fill/demo/polygon.js
+++ b/examples/polygon/fill/demo/polygon.js
@ -6,14 +6,14 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [107.042225, 37.66565],
-    zoom: 3.87,
-  }),
+    center: [ 107.042225, 37.66565 ],
+    zoom: 3.87
+  })
 });

 fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const colors = [
      '#D7F9F0',
      '#A6E1E0',
@ -22,24 +22,24 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
      '#3474DB',
      '#005CBE',
      '#00419F',
-      '#00287E',
+      '#00287E'
    ];
    const layer = new PolygonLayer({})
      .source(data)
      .color('name', colors)
      .shape('fill')
      .style({
-        opacity: 0.9,
+        opacity: 0.9
      });

    const layer2 = new LineLayer({
-      zIndex: 2,
+      zIndex: 2
    })
      .source(data)
      .color('#fff')
      .size(0.3)
      .style({
-        opacity: 1,
+        opacity: 1
      });

    scene.addLayer(layer);
--- a/examples/polygon/fill/demo/population.js
+++ b/examples/polygon/fill/demo/population.js
@ -6,25 +6,25 @@ const scene = new Scene({
  map: new Mapbox({
    pitch: 0,
    style: 'light',
-    center: [3.438, 40.16797],
-    zoom: 0.51329,
-  }),
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
 });
 Promise.all([
  fetch(
-    'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json',
-  ).then((d) => d.json()),
+    'https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json'
+  ).then(d => d.json()),
  fetch(
-    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json',
-  ).then((d) => d.json()),
-]).then(function onLoad([world, population]) {
+    'https://gw.alipayobjects.com/os/basement_prod/f3c467a4-9ae0-4f08-bb5f-11f9c869b2cb.json'
+  ).then(d => d.json())
+]).then(function onLoad([ world, population ]) {
  const popobj = {};
-  population.forEach((element) => {
+  population.forEach(element => {
    popobj[element.Code] =
      element['Population, female (% of total) (% of total)'];
  });
  // 数据绑定
-  world.features = world.features.map((fe) => {
+  world.features = world.features.map(fe => {
    fe.properties.female = popobj[fe.id] * 1 || 0;
    return fe;
  });
@ -38,27 +38,27 @@ Promise.all([
    '#83CED6',
    '#A6E1E0',
    '#B8EFE2',
-    '#D7F9F0',
+    '#D7F9F0'
  ];
  const layer = new PolygonLayer({})
    .source(world)
    .scale('female', {
-      type: 'quantile',
+      type: 'quantile'
    })
    .color('female', colors)
    .shape('fill')
    .style({
-      opacity: 0.9,
+      opacity: 0.9
    });

  const layer2 = new LineLayer({
-    zIndex: 2,
+    zIndex: 2
  })
    .source(world)
    .color('#fff')
    .size(0.3)
    .style({
-      opacity: 1,
+      opacity: 1
    });

  scene.addLayer(layer);
--- a/examples/raster/basic/demo/image.js
+++ b/examples/raster/basic/demo/image.js
@ -6,9 +6,9 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'light',
-    center: [121.268, 30.3628],
-    zoom: 13,
-  }),
+    center: [ 121.268, 30.3628 ],
+    zoom: 13
+  })
 });

 const layer = new ImageLayer({});
@ -17,8 +17,8 @@ layer.source(
  {
    parser: {
      type: 'image',
-      extent: [121.168, 30.2828, 121.384, 30.4219],
-    },
-  },
+      extent: [ 121.168, 30.2828, 121.384, 30.4219 ]
+    }
+  }
 );
 scene.addLayer(layer);
--- a/examples/raster/basic/demo/radar.js
+++ b/examples/raster/basic/demo/radar.js
@ -6,9 +6,9 @@ const scene = new Scene({
  map: new GaodeMap({
    pitch: 0,
    style: 'dark',
-    center: [115.5268, 34.3628],
-    zoom: 7,
-  }),
+    center: [ 115.5268, 34.3628 ],
+    zoom: 7
+  })
 });

 const layer = new ImageLayer({});
@ -17,8 +17,8 @@ layer.source(
  {
    parser: {
      type: 'image',
-      extent: [113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137],
-    },
-  },
+      extent: [ 113.1277263548, 32.3464238863, 118.1365790452, 36.4786759137 ]
+    }
+  }
 );
 scene.addLayer(layer);
--- a/examples/tutorial/control/demo/amap.js
+++ b/examples/tutorial/control/demo/amap.js
@ -5,47 +5,47 @@ const scene = new Scene({
  map: new GaodeMap({
    style: 'light',
    pitch: 0,
-    center: [121.4316962, 31.26082325],
-    zoom: 15.056,
-  }),
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 15.056
+  })
 });
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
+  'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
 )
-  .then((res) => res.json())
-  .then((data) => {
+  .then(res => res.json())
+  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'json',
          x: 'longitude',
-          y: 'latitude',
-        },
+          y: 'latitude'
+        }
      })
      .shape('circle')
-      .size('unit_price', [5, 25])
-      .color('name', ['#49B5AD', '#5B8FF9'])
+      .size('unit_price', [ 5, 25 ])
+      .color('name', [ '#49B5AD', '#5B8FF9' ])
      .style({
        opacity: 0.3,
-        strokeWidth: 1,
+        strokeWidth: 1
      });

    scene.addLayer(pointLayer);
    const overlayers = {
-      围栏填充: pointLayer,
+      围栏填充: pointLayer
    };
    const layersControl = new Layers({
-      overlayers,
+      overlayers
    });

    scene.addControl(layersControl);
  });

 const zoomControl = new Zoom({
-  position: 'topright',
+  position: 'topright'
 });
 const scaleControl = new Scale({
-  position: 'bottomright',
+  position: 'bottomright'
 });
 scene.addControl(zoomControl);
 scene.addControl(scaleControl);
--- a/examples/tutorial/control/demo/mapbox.js
+++ b/examples/tutorial/control/demo/mapbox.js
@ -5,9 +5,9 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'light',
    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });

 const zoomControl = new Zoom();
--- a/examples/tutorial/data/demo/line.js
+++ b/examples/tutorial/data/demo/line.js
@ -5,7 +5,7 @@ new Scene({
  map: new GaodeMap({
    style: 'light',
    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
--- a/examples/tutorial/map/demo/amap.js
+++ b/examples/tutorial/map/demo/amap.js
@ -5,7 +5,7 @@ new Scene({
  map: new GaodeMap({
    style: 'light',
    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
--- a/examples/tutorial/map/demo/mapbox.js
+++ b/examples/tutorial/map/demo/mapbox.js
@ -5,7 +5,7 @@ new Scene({
  map: new Mapbox({
    style: 'light',
    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });
--- a/examples/tutorial/marker/demo/amap.js
+++ b/examples/tutorial/marker/demo/amap.js
@ -5,17 +5,17 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'light',
    pitch: 0,
-    center: [121.4316962, 31.26082325],
-    zoom: 12.056,
-  }),
+    center: [ 121.4316962, 31.26082325 ],
+    zoom: 12.056
+  })
 });
 // 创建默认 marker
 const popup = new Popup({
-  offsets: [0, 20],
+  offsets: [ 0, 20 ]
 }).setText('hello');

 const marker = new Marker()
-  .setLnglat([121.4316962, 31.26082325])
+  .setLnglat([ 121.4316962, 31.26082325 ])
  .setPopup(popup);

 scene.addMarker(marker);
--- a/examples/tutorial/marker/demo/mapbox.js
+++ b/examples/tutorial/marker/demo/mapbox.js
@ -5,9 +5,9 @@ const scene = new Scene({
  map: new Mapbox({
    style: 'light',
    pitch: 0,
-    center: [107.054293, 35.246265],
-    zoom: 4.056,
-  }),
+    center: [ 107.054293, 35.246265 ],
+    zoom: 4.056
+  })
 });

 const zoomControl = new Zoom();
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -1,6 +1,12 @@
 const path = require('path');
 exports.onCreateWebpackConfig = ({ getConfig }) => {
  const config = getConfig();
+  config.module.rules.push({
+    test: /\.glsl$/,
+    use: {
+      loader: 'glsl-shaders-loader'
+    }
+  });
  config.resolve.extensions.push('.glsl');
  config.resolve.alias = {
    ...config.resolve.alias,
--- a/package.json
+++ b/package.json
@ -123,7 +123,8 @@
    "site:clean": "gatsby clean",
    "site:deploy": "yarn run site:build && gh-pages -d public",
    "site:publish": "gh-pages -d public",
-    "lint:fix": "prettier --write examples/**/**/*.js docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
+    "lint:fix": "prettier --write docs/api/**/*.md packages/**/*.{spec,story}.ts{,x} stories/**/**/*.tsx",
+    "lint:examples": "eslint examples/**/**/*.js --fix",
    "prebuild": "run-p tsc lint",
    "build": "yarn clean && lerna run build",
    "postbuild": "yarn build:declarations",
--- a/packages/maps/src/amap/index.ts
+++ b/packages/maps/src/amap/index.ts
@ -18,6 +18,7 @@ import { inject, injectable } from 'inversify';
 import { IAMapEvent, IAMapInstance } from '../../typings/index';
 import { MapTheme } from './theme';
 import Viewport from './Viewport';
+let mapdivCount = 0;

 const AMAP_API_KEY: string = '15cd8a57710d40c9b7c0e3cc120f1200';
 const AMAP_VERSION: string = '1.4.15';
@ -344,7 +345,7 @@ export default class AMapService
      height: 100%;
      width: 100%;
    `;
-    $amapdiv.id = 'l7_amap_div';
+    $amapdiv.id = 'l7_amap_div' + mapdivCount++;
    $wrapper.appendChild($amapdiv);
    return $amapdiv;
  }
--- a/packages/maps/src/amap/theme.ts
+++ b/packages/maps/src/amap/theme.ts
@ -4,4 +4,5 @@ export const MapTheme: {
  dark: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true',
  light: 'amap://styles/1fd9f8ef9751298f11f5c56968312c70?isPublic=true',
  normal: 'amap://styles/12db649ba3493333b098127ed892c0cb?isPublic=true',
+  blank: 'amap://styles/07c17002b38775b32a7a76c66cf90e99?isPublic=true',
 };
--- a/packages/maps/src/mapbox/theme.ts
+++ b/packages/maps/src/mapbox/theme.ts
@ -4,4 +4,17 @@ export const MapTheme: {
  light: 'mapbox://styles/zcxduo/ck2ypyb1r3q9o1co1766dex29',
  dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7',
  normal: 'mapbox://styles/mapbox/streets-v11',
+  blank: {
+    version: 8,
+    sources: {},
+    layers: [
+      {
+        id: 'background',
+        type: 'background',
+        paint: {
+          'background-color': 'white',
+        },
+      },
+    ],
+  },
 };
--- a/yarn.lock
+++ b/yarn.lock